ワードプレス

【Retinaディスプレイ対応5】WordPressのスライダーやサムネイル画像を綺麗に表示させる設定方法

retina-slider_ec

プラグイン【Simple Image Sizes】は、有効化するだけで「使用しているテーマ側からの命令で自動生成されている画像サイズ」の一覧も表示してくれます。

retina-slider_04

上の状態から、私のテーマの場合「size1」から「size4」までがデフォルト設定されていることが分かります。じゃあ、これらはどこで使われているんでしょう?

例えばスライダーでは「.php」という拡張子のテンプレートファイルで、「画像の呼び出し」がこんな感じで指定されていたりします。

retina-slider_10

でも私たちのような初心者にとって、こんな探し方は大変。なので、
実際にサイト内で表示されている画像サイズ」を調べましょう。

「自動生成画像がどこで使われているか」を知る簡単な調べ方

このサイトでは、アイキャッチ画像が自動的に流用されている場所は3種類。
以前紹介したChrome拡張「View Image Info」を使ってそれぞれの画像情報を覗いてみます。
(Firefoxでは右クリックで現れる「画像の情報を表示」から確認可能)

ウィジェットの画像

retina-slider_26

retina-slider_27

上のウィジェットの場合、100×100pxの画像が54×54pxにギュッと縮小表示されていることが確認できます。ここに「size1」が使われているということですね。

スライダーの画像

retina-slider_28

同様にスライダーを見てみます。

retina-slider_29

retina-slider_30

440×376pxの画像が表示されています。ここでは「size2」が使われているということ。そして、“そのサイズのまま”表示されています。スライダー内のその他の箇所でも「size3」「size4」が使われ、“そのサイズのまま”表示されていました。

 クリックで拡大

retina-slider_31

記事抜粋部分の画像

retina-slider_09

retina-slider_32

ここでは、スライダーに使われていた「size4」が流用され、333×185pxの画像が204×113pxにギュッと縮小表示されているようです。

まとめ & やるべきこと

私のテーマの場合、スライダーの画像には「size2」から「size4」が使われていて、“そのサイズのまま”表示されています。だからRetinaディスプレイではボヤケて見えてしまいます。

やるべきことは、「size2」から「size4」の画像をもっと大きいサイズに変更して、ギュッと縮小表示させること。また、記事抜粋部分のサムネイルにも「size4」が流用されているので、あわせて解像度を高めることができる、ということになります。

一方「size1」はデフォルトで約1/2に縮小表示されているので、このままで問題ないと言えます。


こんな感じで、「Simple Image Sizes」の設定画面と照らし合わせながら、実際にサイトで使われている【アイキャッチを流用している画像】を調べれば、「どの自動生成画像をサイズ変更する必要があるか」ということがハッキリします

そうすればスライダーだけでなく、ウィジェットや記事抜粋部分で使われているサムネイルなどにも、同時にRetinaディスプレイ対策を施すことができます。

運営サイトの環境や用途に応じて、今回紹介した手法をうまく取り入れてみてください!

実際にスライダーをRetina対応させる設定方法は前のページへ。

スライダーのRetina対応方法

Retinaディスプレイ対応まとめ

固定ページ:
1

2

スポンサーリンク

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  2. WordPressで子テーマを作る際に知っておくべき仕組みと注意点
  3. ”知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、…
  4. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  5. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!

関連記事

  1. jpg-gif-png_ecmg
  2. original-share-button_ecmg-ps
  3. tcd-mag_ecmg-ps
  4. media-setting_ec

    ワードプレス

    知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケンな関係

    意外と知らない、WordPressの”お気づかい”ひとつの画像をW…

  5. switch-by-the-device_ecmg
  6. enlarge-image-ecmg
【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. todoist-tips_ecmg
  2. extension-tools-for-bloggers_ec
  3. improvement-flow_ecmg
  4. display-speed_ec
  5. tcd-mag_ecmg-ps
  6. retina_ecmg

タスク管理で、自己管理。

todoist

人気記事

  1. chrome-font_ecmg-1
  2. media-setting_ec
  3. jpg-gif-png_ecmg
  4. screenpresso-initial-setting_ec
  5. compress-jpeg-png-images-ecmg
  6. todoist-basic_ec-ps

魅力的なブログを、今すぐ作る。

tcd-mag

ピックアップ記事

  1. todoist-advanced_ec
  2. compress-jpeg-png-images-ecmg
  3. dash_ecmg
  4. todoist-routine_ecrt
  5. tcd-css-customize_ecmg
  6. annotation-image-ecmg

ブログのRetina対応、始めませんか?

retina-os-solution

掘り出し記事

  1. todoist-share_ec
  2. meta-seo-inspector_ecmg
  3. feedly-count-problem_ecmg
  4. mailbox-goodbye-newapp_ec
  5. retina-os-solution_ecmg
  6. browzer-extension_ec

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. todoist-basic_ec-ps
  2. facebook-page-plugin_ecmg-ps
  3. like-button-card_ecmg-ps
  4. facebook-fast-display_ecmg
  5. gif-animation_ec
  6. todoist-routine_ecrt

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. valuable-content-from-image_ec
  2. improvement-flow_ecmg
  3. todoist-extension_ecmg
  4. display-speed_ec
  5. tcd-mag_ecmg-ps
  6. todoist_ec

人気記事

  1. child-theme_ecmg
  2. compress-jpeg-png-images-ecmg
  3. screenpresso-initial-setting_ec
  4. chrome-font_ecmg-1
  5. child-theme-mechanism_ecmg-ps
  6. todoist-basic_ec-ps
  7. media-setting_ec

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
  2. display-speed_ec

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
  3. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  4. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  5. improvement-flow_ecmg

    マネジメント

    ”セルフマネジメント”の第一歩。忙しくても頭と心は軽くしておく、自己管理術と生活…
PAGE TOP