CocoonのサムネイルがMacBookやiPhoneでぼやけて見えるのは、Retinaディスプレイ（高解像度ディスプレイ）に対して画像サイズが足りていないのが原因です。子テーマのfunctions.phpに3行のコードを追加するだけで解決できます。
せっかく記事を書いても、画像がぼやけていると「古いサイト」「手入れされていないサイト」という印象を与えてしまいます。この記事では、初心者の方でも迷わずできるように、スクリーンショット付きで手順を解説していきます。
この記事の結論
CocoonのサムネイルがぼやけるのはRetinaディスプレイに対して画像サイズが不足しているのが原因です。子テーマのfunctions.phpにadd_filter('theme_mod_retina_thumbnail_enable', function(){ return 1; });の3行を追加し、Regenerate Thumbnailsプラグインでサムネイルを再生成するだけで解決します。作業時間は約10分です。
検証環境：WordPress 6.9 / Cocoon 2.8.9 / Xserver / PHP 8.3.21（2026年1月時点）
子テーマに3行のコードを追加するだけで解決する
Cocoonでサムネイル画像がぼやける問題は、子テーマのfunctions.phpに3行のコードを追加するだけで解決できます。追加後にサムネイルの再生成が必要です。
追加するのは以下のコードです。
|
1 2 3 4 |
// Retinaサムネイルを強制的に有効化 add_filter('theme_mod_retina_thumbnail_enable', function() { return 1; }); |
このコードを追加すると、Cocoonが生成するサムネイル画像のサイズが自動的に2倍になります。たとえば、もともと320×180ピクセルだったサムネイルが、640×360ピクセルで生成されるようになります。これにより、高解像度ディスプレイでも画像がぼやけなくなります。
詳しい手順はこの後解説しますが、まずは「なぜぼやけるのか」という仕組みから見ていきましょう。
Cocoonトラブル関連記事
この記事はCocoonのサムネイルがぼやける原因とRetina対応の手順を解説しています。Cocoonの他のトラブルや高速化については以下もご覧ください。
なぜサムネイル画像がぼやけるのか
サムネイルがぼやける原因は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に引き伸ばすので、ぼやけて見えるわけです。
つまり、Retinaディスプレイできれいに表示するには、表示サイズの2倍の画像が必要です。
CocoonにはRetina機能が「隠されている」
実はCocoonにはRetinaディスプレイ対応機能がもともと組み込まれています。ただし、この機能は管理画面には表示されていません。ソースコードを見ると、if (false):という条件で意図的に非表示にされています。
おそらく、サーバー容量やパフォーマンスへの影響を考慮してデフォルトでは非表示にしているのでしょう。しかし、Retina機能の本体はしっかり実装されており、有効化するだけで使える状態です。コード内では、有効化するとサムネイルサイズを自動的に2倍にする処理が組まれています。だからこそ、子テーマから3行のコードで有効化するという方法が使えます。
具体的な手順——Retina対応を完了させる
子テーマのfunctions.phpにコードを追加し、Regenerate Thumbnailsプラグインでサムネイルを再生成し、開発者ツールで確認する。この3ステップで完了します。
ここからは実際の手順をスクリーンショット付きで解説します。
前提条件の確認
作業を始める前に、Cocoon親テーマがインストールされていること、Cocoon子テーマが有効化されていることを確認してください。
なぜ子テーマを使うのか：親テーマを直接編集すると、Cocoonのアップデート時にすべての変更が上書きされて消えてしまいます。子テーマを使えば、アップデートしてもカスタマイズは安全に保持されます。子テーマをまだ導入していない場合は、Cocoon公式サイトからダウンロードしてください。
ステップ1：テーマファイルエディターを開く
WordPress管理画面から、外観 → テーマファイルエディターを開きます。
画面右側のファイル一覧から「functions.php」を選択してください。
ステップ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：ファイルを保存する
画面下部の「ファイルを更新」ボタンをクリックして保存します。
「ファイルの編集に成功しました。」と表示されれば完了です。
これで、Cocoonが今後生成するサムネイルのサイズが自動的に2倍になります。ただし、過去にアップロードした画像のサムネイルはまだ古いサイズのままです。次のステップで再生成しましょう。
ステップ4：サムネイル画像を再生成する
ここが見落としがちなポイントです。コードを追加しただけでは、過去にアップロードした画像のサムネイルは変わりません。WordPressは画像をアップロードした時点でサムネイルを生成するため、古い画像は小さいサイズのままです。プラグインを使ってサムネイルを再生成します。
4-1. プラグイン「Regenerate Thumbnails」をインストール
WordPress管理画面でプラグイン → 新規追加を開きます。
検索欄に「Regenerate Thumbnails」と入力します。
「今すぐインストール」をクリックし、続けて「有効化」をクリックします。
4-2. サムネイルを再生成する
ツール → Regenerate Thumbnailsを開きます。
「Regenerate Thumbnails For All ○○ Attachments」をクリックします。
処理が完了するまで待ちます。
注意：画像の枚数によっては数分〜数十分かかる場合があります。処理中はブラウザを閉じないでください。
別の方法：「Regenerate Thumbnails」でうまくいかない場合は、「Force Regenerate Thumbnails」プラグインを試してみてください。既存のサムネイルを削除してから再生成するため、より確実です。
ステップ5：Retina対応が適用されたか確認する
最後にきちんと適用されたか確認します。最も確実な方法はブラウザの開発者ツールを使う方法です。
サイトのトップページを開き、F12キー（MacはCmd + Option + I）で開発者ツールを開きます。
左上の矢印アイコン（要素選択モード）をクリックします。
サムネイル画像をクリックして選択し、画像のURLに含まれるサイズを確認します。
確認ポイント：
| 状態 | 画像URLの例 |
|---|---|
| 対応前 | image-320×180.jpg |
| 対応後 | image-640×360.jpg |
ファイル名のサイズが2倍になっていれば成功です。実際にiPhoneやMacBookでサイトを開いて、サムネイル画像がくっきり表示されているか目視でも確認してみてください。
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分程度で完了するので、まだ対応していない方はぜひ設定してみてください。
関連記事
Cocoonのカスタマイズやトラブル解決に役立つ記事をまとめました。
なお、Cocoonでは保存時にスピナーが止まらなくなるトラブルもあります。ブログカードが原因だったケースを以下の記事にまとめています。
コメント