WordPressの記事内に設置している画像をRetinaディスプレイに対応させる方法

WordPressの記事内に設置している画像をRetinaディスプレイに対応させる方法

WordPressの記事内に設置している画像をRetinaディスプレイに対応させる方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

WordPressのブログ記事内に設置した画像を簡単にRetinaディスプレイ対応させる方法の紹介です。jQueryを使ってRetinaディスプレイの時だけ画像を差し換えるという方法で、これはStocker.jpさんが考案したものです。

スポンサードリンク

記事内に設置している画像をRetinaディスプレイに対応させる方法

</body>の直前に以下のコードを追加します。</body>の直前なので、footer.phpを編集します。

footer.php
// Retinaの場合、記事の画像を高解像度のものに差し替え
$(function(){
	// devicePixelRatio の値が2以上であれば
	if (window.devicePixelRatio >= 2) {
		// .entry-content 内の img の親要素の a
		var a = $(".entry-content img").parent("a");
 
		$.each(a, function(i, value) {
			var imgpath = value.pathname;
			// href の属性値の最後が .jpg .jpeg .gif .png のいずれかであれば(大文字小文字は問わない)
			if (imgpath.match(/\.(jpe?g|gif|png)$/g)) {
				// img src 属性値を href 属性値と同じにする
				$(value).children("img").attr("src", imgpath);
			}
		});
	}
});

Retinaディスプレイの時は、画像のリンク先の元画像を表示するという仕組みになっています。

そのため、元画像の解像度が低ければあまり意味はありません。アップロードしている画像の解像度が、表示している画像の2倍以上の時に効果を発揮しますね。

あとがき

サクッとRetina対応したい時は、ぜひお試しください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。