ブログ制作– category –

ブログ内にカルーセルなどでInstagramの画像を入れたい時がある。 Instagram用のプラグインが存在しますが、使ってみると表示が重い。 Smart Slider3にもSNSのデータを取得する事ができるスライダーがあります。 表示させる数も設定できますが、多ければ多いほど表示も遅くなる可能性があります。 Instagramの画像は正方形で投稿する事が多い為、統一している方が綺麗に表示できます。 Instagram用のプラグインも良いですが、周囲のデザインやカスタマイズが困難です。 カスタマイズしたとしてもかなり面倒な作業かもしれません。

固定ページをトップページにしたり案内ページにする際、 ただ単に投稿スペースに内容を入れるだけなら記事と同じように編集すれば良い。 記事ページを始め、アーカイブや新着ページのようにヘッダーとフッターが同じように表示されているよりも、少し変わった趣向を取り入れても良いのでは？ このような動機から固定ページを記事ページ等と異なるデザインにする為に全画面表示を行いました。

Smart Slider3（スマートスライダー3）はWordpressのプラグインのひとつで スライダーやカルーセル等を簡単に構築できるプラグインです。 以前からSmartSlider3を取り入れていましたが、当初は表示が重かった。 特にスマホでの表示はとても及第点を出せませんでした。 最近では色々な意味で最適化され、 Smart Slider3を表示させているページも通常ページ同様のスピードで表示されるようになりました。 それらもあって、積極的にSmart Slider3を活用しています。 今回はSmart Sliderでテスト的に作成したヘッダーデザインをご紹介します。

Smart Slider3で作成したヘッダーデザインのデモページになります。Smart Slider3は拡張性の高いスライダー（カルーセル）だけでなく投稿ページの構築にも効果を発揮します。

Wordpressのテーマのカスタマイズはキリがありません。なぜカスタマイズに時間を割...

wordpressのブロックエディタは様々なレイアウトができる為、デザインの幅が広がり...

使用しているブログのテーマ「Luxeritas」で「Google Material Icons」を採用。Font AwesomeからGoogle Material Iconsに全移行してみました。Luxeritasを使用していなくてもGoogle Material Iconsは使えますが、Luxeritasの場合、アイコンのコードさえ記入すれば即使えます。Google Material Iconsに移行した理由なども記載しておきます。

ブログの最適化を進めていると様々な弊害も生じます。良かれと思って行ったセキュリティ対策がスピード低下に繋がる事もあります。特に「reCAPTCHA」は良くもあり悪くもあり。コメントなどを記入できるブログなどは必須ではありますがそれ以外では特に必要性を感じません。実際にreCAPTCHAを表示・非表示で記事の表示パフォーマンスをテストしてみると…スマホでの表示は極端に遅くなります。PCでは表示し、スマホでは非表示。または必要な記事のみに表示…などreCAPTCHAの表示を制御する事である程度改善できるかと思います。

CLSに関する問題:0.25超とは？ある日Google Search ConsoleにおいてCLSに関する問題:0.25超が発生。遅いと判断されたブログの記事を改善すべく対策しました。モバイルでのスピードが遅めだったのは理解できますがPCでの表示スピードも遅いと判定されました。ブログの表示スピードで重要になってくるのは必要不可欠なプラグインと不必要なプラグインの選定。画像を多く採用する為、パフォーマンスが低下。画像の最適化は全ページに関わり、しかもひとつひとつ処理する必要性があります。