[画像サイズの設定]WordPressの自作テーマ
※このページにはプロモーションが含まれています。
この投稿の全体は以下の構成で別のページに分かれています。
- WordPressで使う自作のテーマを作った記録[上巻] (別ページ)
- WordPressで使う自作のテーマを作った記録[下巻] (別ページ)
- 広告を表示させるには
- Google Search ConsoleとGoogle Analytics
- セキュリティ対策
自分でテーマを作るとなると画像のサイズについてを考える必要がありました。
アップロードする画像のサイズは表示する画像の最大の大きさの2倍
当ブログの文章内の画像サイズは横幅が600pxです。デザインを考える際、文章より少し画像の幅が小さいほうが読みやすいのではないかと考えたのです。
WordPressでアップロードする画像の大きさが分からなくて、調べた結果1200ｘ630pxが良いらしいとのことだったので、初めから現在までその大きさでアップロードしています。Facebookで使われている画像がその縦横比から、そのサイズが良いとのことだったのですが、縦横比とサイズでは当然違います。
納得できる解説を当時は見つけられなかったのですが、画像をアップロードせずにブログを書くわけに行かなかったので、とりあえず1200ｘ630pxのサイズでアップロードすることに決めました。
もし今、アップロードする画像の大きさは？と聞かれたら、表示したい最大の画像の大きさの縦横が倍の大きさと答えます。
当ブログでの画像の大きさは590pxでも610pxでも良いのですが600pxにしているのは、アップロードしているの画像が1200pxの横幅だからです。
Amazon セールとイベント
冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭りRetinaディスプレイとスマートフォンの画像表示
WordPressでブログを書き出した当初の疑問として、800pxの横幅の画像を使うのなら、その大きさのものをアップロードすれば良いのではというものがありました。
その疑問は4Kモニターを使うようになってから、理解できるようになりました。
4Kモニターをそのままの解像度で使うと文字が小さすぎて読めたものではありません。そこで、200％拡大して使うのですが、その時800pxの画像が表示されると、画像がボケます。
WordPressは、このような2倍の大きさで表示されるモニターのときは、それに合った画像を自動で表示してくれます。
3倍の場合でも画像が用意してあればそれに合った解像度の画像が表示されます。
解像度の大きな画像をサーバーに用意しておいて、設定によりいろいろなサイズの画像を用意してボケないように表示させる必要があるのです。
自分でテーマを作る場合は設定から作れる3種類の画像サイズでは足りません。functions.phpに別途必要になる画像の設定を追加します。縦横の比率を変えることも可能なので、1つのアップロードした画像をもとに大きさや、縦横比の違った画像を作ることになります。
MacのRetinaディスプレイは2倍や3倍以上のものがあるので、適切に画像を用意しないとMacでは画像がボケてしまいます。
3倍や4倍用の画像が必要になるのかというとそういう訳ではなく、2倍用の画像を用意しておけばそれ以上のディスプレイでもそれほどボケる事は無いようです。
今はどうなっているのかわかりませんが、日本で一番使われてるであろう無料テーマのCocoonの画像のデフォルトの横幅は800pxした。そこに1200pxの画像をアップロードするとRetinaではボケてしまいます。私のモニタでは殆どのCocoonで作られたサイトの画像はボケて見えます。
この場合は800pxの倍の大きさである1600pxの画像をアップロードする必要があります。
もう一つはスマートフォンの画像表示です。
スマートフォンではすべての機種で、いわばRetina状態で2倍や3倍の表示になっています。
iPhone 14 plusを例にすると、横の解像度が1284px、CSS上の横が428px、3倍の表示になります。
等倍のモニタできれいに見える20x20pxのアイコンをスマートフォンで見ると、ひどくボケて見えるのはこのせいです。この程度の大きさのアイコンでだと容量はそこまで大きくないので、60x60pxの画像をCSSで圧縮して表示させるとボケることはありません。
loading=”lazy”を忘れずに
画像を投稿記事の中で表示させる場合は、画像の遅延読み込みについて気にする必要はありません。
以前はプラグインで遅延読み込みをさせていたのですが、現在はその必要はありません。WordPressの標準機能で1番上に表示させる画像は、ページの読み込みと同時に表示され、それ以外は遅延読み込みされます。
loading=”lazy”をつけるのはそれ以外の画像など、当ブログでは自己紹介に使っているPHPファイルから直接に表示させている画像です。
loading=”lazy”でその画像は遅延読み込みされるようになります。
WebPを使う
最後になりましたが画像の種類はWebPが軽くて良いです。Microsoft EdgeがAvifに対応するのを待ってWordPressもAvifを使えるようになるでしょうから、そうなればAvifが主流になるでしょう。
最後までお読みくださり、誠にありがとうございます。
週間アクセスランキング
このブログを書いている人
ほんだ
数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。