アイキャッチ画像

この記事では、「ブログやサイトをRetinaディスプレイにも対応させる方法」について解説していきます。

プロフィール用アイコン
みきてぃ東西線

ここでは、HTML5とWordPressのそれぞれの方法について、解説していくよ!

プロフィール用アイコン
みきてぃ東西線

「Retinaって何?」という方は、まず以下の記事を読んでね!

HTML5における方法

HTML5の場合、以下のように記述すれば、画像がキレイに表示されるのはいいですが・・・。

<img src="元画像のファイル名" width="元画像の1/2サイズの幅の値" height="元画像の1/2サイズの高さの値">

これだと、たくさんの画像を使うサイトやブログではかなり重くなってしまうデメリットがあります。

そこで、通常サイズの画像とRetina用の2倍サイズの画像を1枚ずつ用意し、HTML5のsrcset属性で画像サイズを振り分けていきます。

<img src="img/image-1.jpg" srcset="img/image-1.jpg 1x,img/image-1@2x.jpg 2x" alt="xxxxx">

これで、通常のモニターでは「image-1.jpg」(通常サイズ)の画像を表示し、Retinaディスプレイでは自動的に「image-1@2x.jpg」(Retina用の2倍サイズ)の画像を表示できるようになります。

プロフィール用アイコン
みきてぃ東西線

もちろん、WordPressでも上記のコードを「カスタムHTML」ブロック内に入れて記述することもできるよ!

注意点

IE11はsrcset属性には対応していません。

WordPressにおける方法

現在のWordPressでは、モニターの解像度に応じて、自動的に画像サイズが振り分けられるようになっています。ただし、それを有効させるには、通常の2倍サイズの画像をアップロードし、かつ記事内にて1/2に縮小した画像を貼り付けないと意味がありません。

また、テーマによってはそれ以外のサイズの画像が生成されることがあり、function.phpで編集しないといけないことも。。。

そこで、このプラグインの出番。「Simple Image Sizes」を使います。

WordPress Simple Image Sizesプラグイン

導入方法は簡単。「プラグイン」→「新規追加」→「Simple Image Sizes」を検索して「インストール」・「有効化」

あとは、「設定」→「メディア」で、サムネイルなどテーマ側で自動生成されている縮小画像のサイズを2倍の値にするだけ。

※画像は、SANGOにおけるサムネイルのサイズとなります。

WordPress メディア設定画面(「Simple Image Sizes」で追加した画像サイズ)
WordPress メディア設定画面(「Simple Image Sizes」で追加した画像サイズ)

ついでに、記事内に貼り付ける画像サイズも設定しましょう。

WordPress メディア設定画面

WordPressの「大サイズ」では、記事幅と同じサイズ(例えば、記事幅が700pxであれば、縦横700pxピッタリ)にします。

また、縦画像ではスマホ表示だと大きく感じる場合があるので、「サムネイル」サイズで縦横400pxに設定します。

なお、今回は「中サイズ」の自動生成はしないので、「中サイズ」の値を縦横両方とも0に設定します。

最後に、「変更を保存」をクリックするだけで、次回の画像アップロードから設定した値で画像の自動生成が行われます。

WordPress 「変更を保存」ボタン

既存の画像を今すぐ反映したい場合は、「Regenerate Thumbnails」をクリックするだけで簡単に出来ます(画像が多いと、反映完了まで時間がかかりますので、ご注意を)。

WordPress 「Regenerate Thumbnails」ボタン
プロフィール用アイコン
みきてぃ東西線

あとは、お手持ちのMacで開き、画像が無事にキレイに表示されているかどうか確認してね!

まとめ

今回は、「ブログやサイトをRetinaディスプレイにも対応させる方法」について解説しました。

少し難しそうですが、どちらもやり方を見れば簡単に実装することができます。

これで、自分のサイトやブログもRetinaディスプレイに対応できた・・・と思いきや「アレ?何かMacで開いたら重くなったゾ・・・?」

というわけで、次回は「サイトやブログをRetinaディスプレイでも軽くする方法」について書いていきます。

スポンサーリンク