現在デフォルトスキンとして「 Fuwari -海老茶(えびちゃ)- 」を適用中。

テーマのサムネイルをRetinaディスプレイ対応させる方法

テーマ設定
この記事は約4分で読めます。

Cocoonのカスタマイズ質問に多いものとして、以下のようなものもありました。

Retinaディスプレイ対応のスマホで見るとインデックスページのサムネイル等がぼやけて見えるのでカスタマイズ方法を教えてください。

これまで、こういった声が結構あったので、Cocoon 1.4.5よりサムネイルをRetina対応させました。

スポンサーリンク

サムネイルをRetina対応させる主な手順

サイト全体のサムネイル画像をRetinaディスプレイ対応させる主な手順はこちら。

  1. Cocoon設定でサイズ変更
  2. Regenerate Thumbnailsプラグインで画像の再生成

プラグインにより、画像の再生性が必要になるので、既に投稿されている記事数によっては、実行時間はかかるかもしれません。

プラグインによる一括処理が必要になるので、一応念のためサーバーのWordPressファイルのバックアップをしておくことをおすすめします。MixHostやカラフルボックス(復元無料)、エックスサーバー(復元有料)のような自動バックアップ機能のあるサーバーであれば不要かもしれません。

    Cocoon設定でサイズ変更

    サムネイルサイズの縦横比を変更するには、まずテーマ設定を開きます。

    WordPress管理画面から「Cocoon設定」を選択してください。

    Wordpress管理画面からCocoon設定を選択

    「画像」タブにある「全体画像設定」項目中の「Retinaディスプレイ」の設定を変更します。

    サムネイルをRetinaディスプレイ対応にする

    Regenerate Thumbnailsプラグインで画像の再生成

    Cocoon設定で、これらの設定を終えただけでは画像自体には反映されていません。

    画像自体に反映させるには、Regenerate Thumbnailsプラグインを利用して「画像の再生成」を行う必要があります。

    プラグインの利用方法は、以下に詳しく書かれているので参照してください。

    テーマが利用しているサムネイルを再生成して最適化する方法
    Force Regenerate Thumbnailsプラグインを用いて、テーマ上のサムネイルを再生成し、画像できるだけ綺麗に表示する方法の紹介です。

    設定が変更されるサムネイル部分

    このサムネイル画像の縦横比変更で、変更が適用されるテーマ部分はこちら。

    インデックスカード

    index

    新着記事ウィジェット

    new

    人気記事ウィジェット

    popular

    関連記事(ウィジェット)

    related

    カルーセルカード

    carousel

    ページ送りナビ(デフォルトのみ)

    page-navi

    ブログカード

    ブログカード

    注意点

    今回実装したRetina対応機能は、以下のケースでは「Retina用画像」は生成されませんのでご注意ください。

    • インデックスカードが「大きなカード」だった場合のサムネイル
    • 投稿・固定ページの本文中の画像
    • 投稿・固定ページのアイキャッチ
    • ヘッダー・フッターのロゴ画像
    • 外部サイトの画像
    • その他サムネイル以外

    アイキャッチ画像が小さいとRetina対応画像が生成出来ません

    その他にも、アイキャッチで指定されている画像サイズが、Retina対応できる分のサイズ(サムネイル画像サイズの2倍)がない場合は、Regenerate Thumbnailsで新しいアイキャッチが作成されません

    アイキャッチには、できる限り大きな画像を設定してください
    Cocoonデフォルト設定状態でも、最低でも800×800px以上できれば1024×1024px以上は欲しい。そして可能ならば出来る限り限り大きなサイズのアイキャッチを指定しておくことをおすすめします。

    今後のことも考えた場合、アイキャッチは1280×1280px以上を推奨します。

    この記事の設定を行ったのに、画像がRetinaサイズにならない場合は、対象ページに大きな画像のアイキャッチを用意して再設定してください。

    画像のLazy Loadがおすすめ

    Retina対応画像にすると、画像サイズが大きくなります。その分読み込み時間もかかります。

    ですので、高速化設定の画像のLazy Load機能と併用することをおすすめします。

    Cocoonおすすめのサイト高速化設定
    Cocoonと相性の良いページの高速化設定方法の紹介です。Cocoonデフォルト機能だけでも十分にPageSpeed Insightsで高得点が狙えます。加えて、ページキャッシュプラグインや、画像最適化プラグインを利用すれば、より良い良いパフォーマンスを目指すことも可能かと思います。
    Lazy Load機能を事前に実装したから、Retina機能を実装する気になったともいえます。

    まとめ

    基本的には、「カード形式のサムネイル画像」がRetina対応しています。

    これまでフォーラムで対応していても質問のほぼすべてが、インデックスページカードのサムネイルに関するものだったと記憶しています。

    なので、インデックスカードはもとより、その他のサムネイルにも対応したことで、これでほとんどの需要は満たせるのではないかと思っています。

    テーマ設定
    スポンサーリンク
    わいひら

    無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

    わいひらをフォローする
    わいひらをフォローする
    おすすめレンタルサーバー

    性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

    ◎LiteSpeedを用いた高速サーバー(完全SSD)
    ◎http/2・QUIC(高速化プロトコル)に対応
    ◎東京・大阪でリージョン選択が可能
    ◎プランのアップ・ダウングレードが自由自在
    ◎同サービス内でドメイン管理が可能
    ◎転送量が多い
    ◎毎日無料バックアップ(14日分)
    ◎復元ポイントを指定して復旧可能(無料)
    ◎アダルト・出会い系サイト可
    ◎ドメインとサーバー代のチャージ払いが可能
    ○サーバ引っ越しオプションあり(有料)
    △新しいサービスなので運営櫪がまだ短い
    サービス運営期間:11ヶ月

    「12ヶ月」「24ヶ月」「36ヶ月」契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

    クーポンコード:PK4JK4RJ

    クーポンの使用方法はこちら

    プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

    ◎LiteSpeedを用いた高速サーバー(完全SSD)
    ◎http/2・QUIC(高速化プロトコル)に対応
    ◎プランのアップ・ダウングレードが自由自在
    ◎転送量が多い
    ◎毎日無料バックアップ(14日分)
    ◎復元ポイントを指定して復旧可能(無料)
    ◎アダルト・出会い系サイト可
    ○サーバ引っ越しオプションあり(有料)
    ○サーバー料金をチャージ払いが可能
    サービス運営期間:2年11ヶ月

    安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

    ◎nginxを用いた高速サーバー(完全SSD)
    ◎老舗サーバーなので安定感抜群
    ◎ディスク容量が多い
    ◎転送量が多い
    ◎同サービス内でドメイン管理が可能
    ○http/2(高速化プロトコル)に対応
    ○毎日無料バックアップ(14日分)
    △DBは7日分だけ無料復旧可能(ファイルは有料)
    ×プラン変更でCPUのスペックアップができない
    ×プラン変更しても即時反映されない
    ×アダルト・出会い系サイト不可
    サービス運営期間:15年

    とにかく速い。サイトに表示スピードを求めるならココ。

    ◎nginxを用いた高速サーバー(完全SSD)
    ◎プランのアップ・ダウングレードが自由自在
    ◎ディスク容量が多い
    ◎転送量が多い
    ○http/2(高速化プロトコル)に対応
    ○毎日無料バックアップ(14日分)
    ○DB復旧は無料(ファイルは有料)
    ○サーバ引っ越しツールあり
    ○サーバー料金をチャージ払いが可能
    △新しいサービスなので運営櫪がまだ短い
    サービス運営期間:9ヶ月

    格安な値段で始められる高機能サーバーです。
    性能も備えつつ最安ならここ。
    サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

    ◎LiteSpeedを用いた高速サーバー(完全SSD)
    ◎激安プランが用意してある
    ◎値段あたりのスペックが高い(コスパ良し)
    ◎サーバ引っ越しオプションあり(無料)
    ◎アダルト・出会い系サイト可
    ○http/2(高速化プロトコル)に対応
    △プランのアップは可能だがダウンは不可
    △毎日自動バックアップ(1日分)
    △前日のバックアップからのみ復元できる(無料)
    サービス運営期間:3年

    Cocoon

    コメント テーマの質問はフォーラムへ

    タイトルとURLをコピーしました