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. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  2. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  3. Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャー…
  4. ”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文…
  5. ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Ea…

関連記事

  1. media-setting_ec

    ワードプレス

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

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

  2. customized-theme-update_ecmg-1-ps
  3. facebook-fast-display_ecmg
  4. favicon-generator_ecmg

    ワードプレス

    ファビコン表示を一括設定。WordPressプラグイン「Favicon by RealFavicon…

    WEB上で見かける、ハイセンスなアイツ。名前は通称「ファビコン…

  5. sns-count-cache_ecmg2

    ワードプレス

    便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効…

    必要な設定だけにフォーカス。「ページを表示するたびに、今のシェア数…

  6. blog-contents_ecrt

    思考志向 - シコウシコウ

    ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティー”の正体

    いまだから、考えるべきこと。音楽制作をしていると、”自分の発するも…

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

特集記事

  1. tcd-theme-user-review_ecmg
  2. todoist-tips_ecmg
  3. tcd-mag_ecmg-ps
  4. display-speed_ec
  5. improvement-flow_ecmg
  6. retina_ecmg

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

todoist

人気記事

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

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

tcd-mag

ピックアップ記事

  1. annotation-image-ecmg
  2. customized-theme-update_ecmg-1-ps
  3. todoist-advanced_ec
  4. quicktag_ecmg
  5. simple-image-sizes_ec-ps
  6. sns-count-cache_ecmg2

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

retina-os-solution

掘り出し記事

  1. mergely-ecmg
  2. analytics-ip-filter-ecmg
  3. feedly-count-problem_ecmg
  4. screenpresso-initial-setting_ec
  5. facebook-app-id-app-secret-ecmg2
  6. LightShot-Screenpresso_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. blog-theme-mag_ecmg-ps
  2. facebook-fast-display_ecmg
  3. tcd-theme-options_ecmg
  4. chrome-font_ecmg-1
  5. todoist-routine_ecrt
  6. tcd-css-customize_ecmg

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. adjust-the-button_ecmg
  2. improvement-flow_ecmg
  3. todoist-extension_ecmg
  4. tcd-theme-selection_ecmg-ps
  5. todoist_ec
  6. theme-change_ecrt

人気記事

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

最近の記事

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

    ブログ

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

    ワードプレス

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

    マネジメント

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

    マネジメント

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

    マネジメント

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