子テーマに3行のコードを追加するだけで解決する
Cocoonでサムネイル画像がぼやける問題は、子テーマのfunctions.phpに3行のコードを追加するだけで解決できます。追加後にサムネイルの再生成が必要です。 追加するのは以下のコードです。|
1 2 3 4 |
// Retinaサムネイルを強制的に有効化 add_filter('theme_mod_retina_thumbnail_enable', function() { return 1; }); |
なぜサムネイル画像がぼやけるのか
サムネイルがぼやける原因はRetinaディスプレイにあります。表示領域の2倍のピクセルを持つため、通常サイズの画像では引き伸ばされてぼやけます。Retinaディスプレイとは
Retinaディスプレイとは、通常のディスプレイと比べてピクセル密度が2倍以上ある高解像度ディスプレイのことです。「Retina」はAppleの商標ですが、最近ではほとんどのスマホやノートPCが同様の高解像度ディスプレイを搭載しています。つまり、あなたのブログを見ている人の大半が高解像度ディスプレイを使っています。
| デバイスの種類 | ピクセル密度 | 代表的な機種 |
|---|---|---|
| 通常のディスプレイ | 1x（等倍） | 古いデスクトップモニター |
| Retinaディスプレイ | 2x（2倍） | MacBook、最近のWindowsノートPC |
| 最新スマートフォン | 3x〜4x | iPhone、Android各機種 |
ぼやける仕組み
仕組みはシンプルです。サムネイルの表示領域が320×180ピクセルだとします。 通常のディスプレイ（1x）の場合、表示領域も画像サイズも320×180ピクセルなので、ぴったり一致してきれいに表示されます。 Retinaディスプレイ（2x）の場合、表示領域は見た目320×180ピクセルですが、実際の物理ピクセルは640×360ピクセルです。320pxの画像を640pxに引き伸ばすので、ぼやけて見えるわけです。
CocoonにはRetina機能が「隠されている」
実はCocoonにはRetinaディスプレイ対応機能がもともと組み込まれています。ただし、この機能は管理画面には表示されていません。ソースコードを見ると、if (false):という条件で意図的に非表示にされています。
具体的な手順——Retina対応を完了させる
子テーマのfunctions.phpにコードを追加し、Regenerate Thumbnailsプラグインでサムネイルを再生成し、開発者ツールで確認する。この3ステップで完了します。 ここからは実際の手順をスクリーンショット付きで解説します。前提条件の確認
作業を始める前に、Cocoon親テーマがインストールされていること、Cocoon子テーマが有効化されていることを確認してください。
ステップ1：テーマファイルエディターを開く
WordPress管理画面から、外観 → テーマファイルエディターを開きます。
ステップ2：Retina有効化コードを追加する
functions.phpが開いたら、ファイルの末尾に以下のコードを追加します。|
1 2 3 4 |
// Retinaサムネイルを強制的に有効化 add_filter('theme_mod_retina_thumbnail_enable', function() { return 1; }); |
add_filterはWordPressの設定を上書きする命令です。theme_mod_retina_thumbnail_enableでCocoonのRetina設定を指定し、return 1で「有効」にしています（1＝有効、0＝無効）。
追加後のfunctions.php全体はこのようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php //子テーマ用関数 if ( !defined( 'ABSPATH' ) ) exit; //子テーマ用のビジュアルエディタースタイルを適用 add_editor_style(); //以下に子テーマ用の関数を書く // Retinaサムネイルを強制的に有効化 add_filter('theme_mod_retina_thumbnail_enable', function() { return 1; }); |
ステップ3：ファイルを保存する
画面下部の「ファイルを更新」ボタンをクリックして保存します。
ステップ4：サムネイル画像を再生成する
ここが見落としがちなポイントです。コードを追加しただけでは、過去にアップロードした画像のサムネイルは変わりません。WordPressは画像をアップロードした時点でサムネイルを生成するため、古い画像は小さいサイズのままです。プラグインを使ってサムネイルを再生成します。 4-1. プラグイン「Regenerate Thumbnails」をインストール WordPress管理画面でプラグイン → 新規追加を開きます。
ステップ5：Retina対応が適用されたか確認する
最後にきちんと適用されたか確認します。最も確実な方法はブラウザの開発者ツールを使う方法です。 サイトのトップページを開き、F12キー（MacはCmd + Option + I）で開発者ツールを開きます。
| 状態 | 画像URLの例 |
|---|---|
| 対応前 | image-320×180.jpg |
| 対応後 | image-640×360.jpg |
Retina対応のメリット・デメリット
メリットはどのデバイスでも美しく表示されること。デメリットは画像ファイルサイズの増加ですが、WebP変換で相殺できます。メリット
どのデバイスでも美しく表示される：iPhone、MacBook、最新のWindowsノートPCなど、現在主流のデバイスすべてできれいな画像を提供できます。 サイトの信頼感がアップする：ぼやけた画像は「古いサイト」という印象を与えがちです。高画質なサムネイルはサイト全体の品質を底上げします。 ユーザー体験が向上する：特に写真ブログやポートフォリオなど、画像が重要なサイトでは大きな差が出ます。デメリットと対策
2倍のピクセル数になるため、ファイルサイズは約2〜4倍に増えます。サーバー容量をより多く消費し、ページの読み込み速度にも影響する可能性があります。 対策：画像サイズの増加が気になる場合は、「EWWW Image Optimizer」や「Converter for Media」などのプラグインでWebP形式に変換してください。WebPはJPEGと比べて同画質で30〜50%ファイルサイズを削減できるため、Retina対応による増加を相殺できます。 なお、Retina対応で画像サイズが増えた結果、Site Kitが読み込むスクリプトと合わせてPageSpeedスコアが下がる場合があります。Site Kit側の最適化については「Site Kitのgsi/clientがPageSpeedスコアを19点下げていた」で対策を解説しています。よくある質問
Retina対応についてよく聞かれる質問と回答をまとめました。Q. 子テーマなしで対応できますか？
A. 技術的には可能ですが、おすすめしません。親テーマを直接編集すると、Cocoonのアップデート時にすべての変更が消えてしまいます。必ず子テーマを使ってください。Q. 既存の記事のサムネイルも変わりますか？
A. コード追加後にサムネイルを再生成すれば、既存の記事も含めてすべてのサムネイルがRetina対応サイズになります。再生成しないと変わりません。Q. 元の画像が小さい場合はどうなりますか？
A. 元の画像より大きなサムネイルは生成できません。Retina対応を活かすには、最低1280×720ピクセル（推奨は1920×1080ピクセル以上）の画像をアップロードしてください。Q. 新しくアップロードする画像は自動的にRetina対応になりますか？
A. はい。コード追加後にアップロードする画像は、自動的に2倍サイズのサムネイルが生成されます。再生成は不要です。Q. Retina対応をやめたい場合は？
A. functions.phpに追加した3行のコードを削除し、サムネイルを再生成すれば元に戻ります。まとめ
Cocoonのサムネイルがぼやけるのは、Retinaディスプレイに対して画像サイズが不足しているのが原因です。子テーマのfunctions.phpに3行追加し、サムネイルを再生成するだけで解決します。 解決方法は3ステップです。子テーマのfunctions.phpに3行のコードを追加する、「Regenerate Thumbnails」プラグインでサムネイルを再生成する、ブラウザの開発者ツールで画像サイズが2倍になっているか確認する。 高解像度ディスプレイが当たり前になった今、Retina対応は実質的に必須です。サムネイルがぼやけているとそれだけでサイトの印象が悪くなります。作業時間は10分程度で完了するので、まだ対応していない方はぜひ設定してみてください。
コメント