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

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

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


  • 次世代の暗号通貨投資法!初心者でも!どなたでも年利36.27% ⁉︎
  • このエントリーをはてなブックマークに追加

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 で
スポンサードリンク

関連記事

コメントを残す

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