retina-slider_ec

ワードプレス

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

このサイトのトップページには、スライダーが表示されています。 

retina-slider_03

2016/7/13追記
テーマ変更により、このサイトからはスライダーがなくなりましたが、有効な手法です。

公開した記事のアイキャッチ画像が自動的に流用されていて…画像をクリックすると記事ページにも飛べてしまう!という便利で”カッコ綺麗”なスライダー嬢。でもそのままだと、Retinaをはじめとする高解像度ディスプレイでは、画像がボヤケて見えてしまいます

これじゃあ、せっかくのビボウがもったいない。じゃあ、そのシュッとした顔も美しく表示させましょう。こんな感じで。

Before | After(イメージ)

画面の小さいモバイルデバイスでは分かりづらいと思いますが、Windows環境でも違いが分かるでしょう。Mac環境においては・・・ぜんぜん違いますよね。

スライダーで表示させる画像なんて、どうやっていじるんや・・・想像つかんわ

どーせよくある、”初心者お断り”なカスタマイズやろ?

これ、初心者でも簡単にできます。

Retina対応の基本

元画像のクオリティーをRetinaディスプレイで再現するためには、2倍のサイズの画像が必要です。下の2つの記事ではそんな「Retinaディスプレイ対応策」の骨格を説明。それぞれWordPressプラグインひとつで解決してきました

【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適切表示させる方法

【Retinaディスプレイ対応2】スリムで美しいブログを実現させる、画像圧縮と不可欠な知識

今回もそのプラグイン【Simple Image Sizes】と【Compress JPEG & PNG images】を使った流れであれば簡単に設定できます。

使用しているテーマやスライダーの仕様によって結果が異なる場合もあると思います。私の環境はTCDテーマを利用しており、スライダーもデフォルトで実装されているものです。あくまで実例のひとつとして参考にして下さい。
作業の流れ

スライダーに使われる画像サイズを大きくする

ファイルサイズの大きくなった画像を圧縮する

作業自体はこれまでと一緒ですね。じゃあ早速。

1.スライダーに使われる画像サイズを大きくする

この作業には【Simple Image Sizes】を使います。プラグイン自体の設定方法はこちら 

メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Sizes」の設定方法

WordPress管理画面内「設定」→「メディア」から、改めてSimple Image Sizesの設定画面を覗いてみましょう。(※以降の見えにくい画像はクリックで拡大できます)

retina-slider_04

復習になりますが、「size1」から「size4」は、使っているテーマ側からの命令で自動生成されている画像たちです。画像をひとつアップロードするたびに、この4種類の画像が追加作成されている、ということですね。(つまりテーマによって種類の数・サイズともに違ってきます)

「自動生成..?ほーら、早速イミわからん単語出てきたじゃないの!」

という場合は下の記事も参考に。WordPressを使うなら知っておきたい、基本的なことです 

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

自動生成画像の使われている場所

私の使用しているテーマの場合、「size1」という名前で設定されている画像は、ウィジェット内のサムネイルに使われています。

retina-slider_05

retina-slider_06

「size2」から「size4」は、トップページのスライダーや、記事抜粋部分のサムネイルとして使われています。

retina-slider_07

retina-slider_08

retina-slider_09

「自動生成画像がサイト内のどこで使われているか」の簡単な調べ方は次ページに後回し。
ここでは設定方法を進めます。

スライダーに使われる画像サイズを変更

スライダーに使われているのは「size2」から「size4」。この3つのサイズを大きくします。

retina-slider_11

retina-slider_12

ここでは1.8倍に設定しました。整数にならない箇所も出てきますが、小数点以下は画像の縦横比が崩れにくいように切り捨て、調整します。最後に「メディア」ページ自体の保存ボタンも忘れずに。

ぴったり2倍にしない理由は後述。

次に管理画面内「メディア」→「ライブラリ」から、スライダーに使っているアイキャッチ画像を探します。マウスオーバーすると現れる「Regenerate thumnails」をクリック。

retina-slider_14

retina-slider_15

これで先ほど変更した画像サイズが3種類、追加作成されました。スライダーが引っぱってくる「size2」から「size4」の画像を再設定したことになるわけです。これだけで…

Retina対応完了!です。

スライダーに、新たに設定した画像がギュッ!と縮小表示されます。意外と簡単でしょう?

2. ファイルサイズの大きくなった画像を圧縮する

さて、綺麗に表示されるようになったのは嬉しいんですが、その分、ファイルサイズの大きい画像を表示させることになるわけです。となると、やはり表示速度に影響してきます

ここで役立つのが画像圧縮プラグイン、【Compress JPEG & PNG images】。やたらと長い名前を持ってるだけある、頼りになる「パンダさんプラグイン」です。
プラグイン自体の設定方法と、”パンダさん”の意味はこちら 

きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG & PNG imagesの設定と使い方

Simple Image Sizesの時と同じ「メディア」画面内にある「File Compression」では圧縮対象を設定できます。新たに変更した「size2」から「size4」に、一時的にチェックを入れます。

retina-slider_13

ここからもさっきと同じ。管理画面内「メディア」→「ライブラリ」から、スライダーに使っているアイキャッチ画像を探します。

すると、先ほど追加サイズを生成させたアイキャッチ画像に・・・

retina-slider_16

「3 sizes not compressed」つまり「この画像、まだボクが圧縮してないサイズが3つあるよ」と表示されているではありませんか!やはりただ者ではないパンダです。
じゃあ、ポチッと。

retina-slider_17

retina-slider_18

はい、圧縮完了。楽勝。

その証拠に、「今月圧縮した画像数」と「減量できた合計サイズ」も・・・

retina-slider_19

retina-slider_20

retina-slider_21

しっかり反映されていることが確認できます。

最後に、圧縮対象のチェックを元に戻しておきましょう。パンダさんは1ヶ月に500枚までしか働いてくれないもんですから。大したパンダです。

retina-slider_22

詳しくはパンダさんの…いえ、プラグインの設定記事で。
まとめ

今回の説明は【既にアップロードされているアイキャッチ画像】に対しての処理でした。
【今後アップロードするアイキャッチ画像】に対しては、

アイキャッチ画像のアップロード直前に圧縮チェック⇒完了したらチェックを外す

もし”ど忘れ”した場合は 

今回のように、後付けで圧縮する

ということになります。
都度いじる必要があるのは「Compress JPEG & PNG images」のほうだけ。「Simple Image Sizes」は、一度設定したらそのままでOKです

スライダー画像を2倍にしなかった理由

スライダーで表示させる画像を「2倍」ではなく、「1.8倍」にした理由。それは、PageSpeed Insightsのスコア対策です。「2倍」に設定すると・・・

retina-slider_24

retina-slider_25

どーん。。。撃沈します。「画像を最適化せよ」と赤旗を上げて怒られてしまいます。

今回のように「1.8倍」にすると・・・

retina-slider_23

OK!だそうです。

私は検証の際、2倍→1.5倍→1.8倍、という順番で試してみました。PageSpeed Insightsのスコアとバランスを取りたい場合は1.8倍、スコアに比重を置きたい場合は1.5倍程度に抑えておくべきでしょう。

Googleさんの言う「画像を最適化せよ」とは【ボリューム】(データとしてのファイルサイズ)だけでなく【サイズ】(画像幅などの大きさ)も関係しているということも同時に分かりますね。


以上です。次のページでは補足として、「自動生成画像がサイト内のどこで使われているか」を簡単に調べる方法を紹介しています。実際に取り組む際はそちらも参考に、自サイトと照らし合わせて挑戦してみてください。

画像の流用場所の探し方

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

固定ページ:

1

2

スポンサーリンク

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  2. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…
  3. アレ?Chromeの表示文字、汚なくなった!? 変わったフォントを1分で取り戻そ…
  4. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  5. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…

関連記事

  1. retina_ecmg
  2. enlarge-image-ecmg
  3. analytics-ip-filter-ecmg
  4. description-video_ec
  5. child-theme_ecmg

    ワードプレス

    「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

    とりあえず作りきる!知識は後半!記事ページをカスタマイズしたい。え…

  6. todoist-constitution_ec

    マネジメント

    ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法

    ストレスフリーで効率的な下準備。いざ記事を書こうとしても、すぐに手…

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

特集記事

  1. adjust-the-button_ecmg
  2. retina_ecmg
  3. todoist-extension_ecmg
  4. todoist_ec
  5. valuable-content-from-image_ec
  6. extension-tools-for-bloggers_ec

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

todoist

人気記事

  1. child-theme_ecmg
  2. chrome-font_ecmg-1
  3. compress-jpeg-png-images-ecmg
  4. jpg-gif-png_ecmg
  5. child-theme-mechanism_ecmg-ps
  6. chrome-full-screen-capture-ecmg

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

tcd-mag

ピックアップ記事

  1. gif-animation_ec
  2. original-share-button_ecmg-ps
  3. widgetoon-js-count-jsoon_ecmg
  4. chrome-full-screen-capture-ecmg
  5. child-theme-mechanism_ecmg-ps
  6. facebook-page-plugin_ecmg-ps

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

retina-os-solution

掘り出し記事

  1. mergely-ecmg
  2. insert-card-link_ecmg
  3. retina-os-solution_ecmg
  4. retina-weight-saving_ecmg
  5. browzer-extension_ec
  6. feedly-count-problem_ecmg

ゆっくり、フシギな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. sns-count-cache_ecmg2
  2. todoist-routine_ecrt
  3. todoist-constitution_ec
  4. todoist-basic_ec-ps
  5. dash_ecmg
  6. firefox-full-screen-capture-ecmg

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. display-speed_ec
  2. valuable-content-from-image_ec
  3. tcd-mag_ecmg-ps
  4. todoist-extension_ecmg
  5. tcd-theme-selection_ecmg-ps
  6. tcd-theme-user-review_ecmg

人気記事

  1. jpg-gif-png_ecmg
  2. chrome-full-screen-capture-ecmg
  3. compress-jpeg-png-images-ecmg
  4. todoist-basic_ec-ps
  5. child-theme-mechanism_ecmg-ps
  6. chrome-font_ecmg-1
  7. screenpresso-initial-setting_ec

最近の記事

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

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  2. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  3. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  4. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  5. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
PAGE TOP