retina-slider_ec

ワードプレス

【Retinaディスプレイ対応5】もっと美しくワガママに。スライダー画像さえも綺麗に表示させてしまう画像設定

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

retina-slider_03

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

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

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

画面の小さいモバイルデバイスでは分かりづらいと思いますが、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さんの言う「画像を最適化せよ」とは【ボリューム】(データとしてのファイルサイズ)だけでなく【サイズ】(画像幅などの大きさ)も関係しているということも同時に分かりますね。

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

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

【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetinaディスプレイ対応方法

ページ:

1

2

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…
  2. 子テーマ使用者必見!カスタマイズしたWordPressテーマのアップデート方法と…
  3. 不要なメール通知にうんざり!購読・迷惑メールの解除をまとめて設定するUnroll…
  4. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  5. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…

関連記事

  1. retina-text-widget_ecrt
  2. theme-change_ecrt

    ワードプレス

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

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

  3. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー

    TCDテーマの、実際の使用感。幅広いユーザーニーズに応える『TCD…

  4. blog-theme-mag_ecmg-ps

    ワードプレス

    【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト…

    本当のことを話します。ワードプレスのブログテーマ【MAG】。このサ…

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

特集記事

  1. theme-change_ecrt
  2. extension-tools-for-bloggers_ec
  3. todoist_ec
  4. adjust-the-button_ecmg
  5. todoist-extension_ecmg
  6. tcd-theme-user-review_ecmg
  7. todoist-tips_ecmg
  8. improvement-flow_ecmg

ピックアップ記事

  1. todoist-routine_ecrt
  2. todoist-basic_ec-ps
  3. unroll-me_ec
  4. jpg-gif-png_ecmg
  5. phrase-express_ecmg
  6. intuitive-custom-post-order_ec
  7. todoist-class_ecrt
  8. tcd-css-customize_ecmg

強みを見つけて、活かしていこう。

business-books

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

todoist

掘り出し記事

  1. todoist-design_ec
  2. todoist-re-schedule_ec
  3. facebook-fast-display_ecmg

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. chrome-font_ecmg
  2. todoist-routine_ecrt
  3. media-setting_ec

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. customized-theme-update_ecmg-1-ps
  2. mergely-ecmg
  3. child-theme-mechanism_ecmg-ps

Requ.log | おすすめ書籍

「言葉にできる」は武器になる。 プロフェッショナルは「ストーリー」で伝える

Requ.log | おすすめ物語

モモ マリコ/マリキータ

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考・価値感系ピックアップ記事

  1. reset-button_ecrt
  2. restriction_ecmg-ps
  3. blog-contents_ecrt
  1. adjust-the-button_ecmg

    ワードプレス

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

    マネジメント

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

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー
  4. improvement-flow_ecmg

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  5. todoist_ec

    マネジメント

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