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. Todoistとも連携。複数のメールアカウントを一括管理するMac・iPhone…
  2. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  3. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  4. 不要なメール通知にうんざり!購読・迷惑メールの解除をまとめて設定するUnroll…
  5. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読…

関連記事

  1. retina-text-widget-ecmg
  2. customized-theme-update_ecmg-1-ps
  3. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点

    TCDテーマからTCDテーマへ。魅了されてしまった。ついに乗り換え…

  4. todoist-constitution_ec

    マネジメント

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

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

  5. unveil-lazy-load_ec

    ワードプレス

    設定不要!WordPressプラグイン「Unveil Lazy Load」でページ読込スピードアップ…

    簡単装備で速度をブースト!プラグインをインストールするだけで、ペー…

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

特集記事

  1. improvement-flow_ecmg
  2. tcd-mag_ecmg-ps
  3. todoist-tips_ecmg
  4. retina_ecmg
  5. theme-change_ecrt
  6. todoist-extension_ecmg

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

todoist

ピックアップ記事

  1. todoist-routine_ecrt
  2. customized-theme-update_ecmg-1-ps
  3. todoist-constitution_ec
  4. chrome-full-screen-capture-ecmg
  5. media-setting_ec
  6. todoist-productivity_ecmg

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

tcd-mag

掘り出し記事

  1. feedly-count-problem_ecmg
  2. mergely-ecmg
  3. insert-card-link_ecmg
  4. screenpresso-initial-setting_ec
  5. retina-text-widget-ecmg
  6. theme-manual-update-ecmg

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

retina-os-solution

ピックアップ記事

  1. annotation-image-ecmg
  2. child-theme_ecmg
  3. facebook-fast-display_ecmg
  4. todoist-routine_ecrt
  5. unroll-me_ec
  6. enlarge-image-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. tcd-theme-options_ecmg
  2. dash_ecmg
  3. firefox-full-screen-capture-ecmg
  4. facebook-page-plugin_ecmg-ps
  5. enlarge-image-ecmg
  6. gif-animation_ec

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. display-speed_ec
  2. improvement-flow_ecmg
  3. extension-tools-for-bloggers_ec
  4. adjust-the-button_ecmg
  5. retina_ecmg
  6. todoist-extension_ecmg

ピックアップ記事

  1. chrome-full-screen-capture-ecmg
  2. child-theme-mechanism_ecmg-ps
  3. original-share-button_ecmg-ps
  4. todoist-productivity_ecmg
  5. lightshot_ecmg
  6. media-setting_ec

最近の記事

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

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  2. extension-tools-for-bloggers_ec

    ブログ

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

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  4. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  5. todoist_ec

    マネジメント

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