Facebook
RSS Feed
Jan 24, 2016

スマホやタブレットで画像がぼやけるのを治す方法(WP4.4レスポンシブイメージの停止方法)

WordPress4.4で実装されたレスポンシブイメージ。

レスポンシブイメージを簡単に説明すると、
画像をアップロードして記事投稿する時に、
ワードプレスが自動的に様々な端末に合わせたサイズの画像を複数作成してくれて、
見てる端末に合わせて表示を切り替えてくれる、というものです。
(現状まだ対応していないブラウザがあったり、環境によって挙動が怪しかったりします)

画像をアップした時に自動で作成されるHTMLコードの例

例えばMinimal WPのテーマで一番使いやすい960×640pxのimg画像を記事に投稿すると、

という感じに今までのHTMLコードは出力されていたのが、
WP4.4からはコードが以下のように自動で書き変わります。

『srcset』以下に端末振り分け用の各サイズの画像リストが自動で用意されます。

「コンテンツ幅が420pxまでの時はimg-420×280.jpgを表示して、
630pxの時はimg-630×420.jpgを表示して、最大は元画像の960pxを表示する」という感じで、
見てる端末に合わせて自動的に表示する画像を変更してくれます。
まさにレスポンシブ画像なわけです。

さらに例えば、960px四方のimg画像をアップすると、コードが以下のようになります。

さらにさらに例えば、適当なサイズで1656×875pxのimg画像をアップすると、コードが以下のようになります。

という感じで、このリストに自動で用意される画像サイズは、
設定>メディア設定で指定した画像サイズと、アップした元画像サイズの関係で決まるようです。

ちなみにMinimal WPのテーマのメディア画像サイズ設定のおすすめは以下の通り。
(テーマによって若干異なりますので、テーマ詳細ページの表示サイズを参考にどうぞ)

・サムネイル 幅420 高さ280
・中サイズ 幅630 高さ0
・大サイズ 幅960 高さ0

この設定で画像を投稿すると、例のコードの感じになります。

ただレスポンシブなのとRetina対応なのはまた別の話なので、
この場合、一部の高解像度ディスプレイのタブレットで閲覧した場合は、
作成した画像によっては若干ボヤけてみえるかもしれません。

スマホやタブレットで画像がぼやけるのを治す方法(WP4.4レスポンシブイメージの停止方法)

この機能は、サイトの表示速度が速くなることもあるのでいい面もありますが、
メディア設定や画像作成のサイズをコンテンツ幅を無視した適当なサイズにしてしまっていると、
スマホやタブレットのサイズによっては小さい画像が表示されてボヤけて見えてしまったり、
または高解像度ディスプレイ用に倍サイズの画像でいつでも綺麗に表示させたい!という場合等、
まだまだ使い勝手が良くない場面もあるかもしれません。

新しい機能なので、まだちょっと意味がよく分からないとか、
いっそのこと停止したいという時は、以下の方法でこの機能をストップ出来ます。

または、

をfunctions.php内に追記するとレスポンシブイメージの機能が停止します。

このことはWordPress公式フォーラムにも書かれてますので、こちらも参考にどうぞ。
WordPress › フォーラム » 4.4アップデートで一部スマホ端末表示で画質劣化

レスポンシブもどんどん進化してますけど、
全ての端末に完璧に合わせるのはやっぱり難しいので、
今のところ単純に倍サイズで作成した画像を使う方が簡単かも。

*カスタマイズは無料サポート対象外ですので、必ずバックアップを取った上で自己責任でお願いします!

Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト