Cocoonサムネイルがぼやける？Retina対応で解決

「トップページのサムネイル画像がなんだかぼやけて見える…」

MacBookやiPhone、最近のWindowsノートPCでブログを確認したとき、こんな経験はありませんか？

実はこれ、Retinaディスプレイ（高解像度ディスプレイ）が原因なんです。

通常のディスプレイと比べてピクセル密度が2倍以上あるRetinaディスプレイでは、普通サイズの画像が引き伸ばされて表示されるため、どうしてもぼやけて見えてしまいます。

この記事では、WordPressテーマ「Cocoon」でサムネイル画像をRetina対応させ、どのデバイスでも美しく表示させる方法を詳しく解説します。

この記事でわかること
なぜサムネイル画像がぼやけるのか？
1. Retinaディスプレイとは
2. ぼやける仕組みを図解で理解する
CocoonにはRetina機能が隠されている！
子テーマでRetina機能を有効化する方法
サムネイル画像を再生成する
Retina対応が適用されたか確認する方法
Retina対応のメリット・デメリット
よくある質問（FAQ）
まとめ

この記事でわかること

サムネイルがぼやける原因と仕組み
Cocoonに隠されているRetina機能の正体
子テーマを使ったRetina対応の具体的な手順
サムネイル再生成の3つの方法
対応後の確認方法とトラブルシューティング

なぜサムネイル画像がぼやけるのか？

Retinaディスプレイとは

Retinaディスプレイとは、Appleが開発した高解像度ディスプレイの名称です。通常のディスプレイと比べて、1インチあたりのピクセル数が2倍以上あります。

「Retina」はAppleの商標ですが、現在ではApple製品だけでなく、多くのスマートフォンやノートPCで同様の高解像度ディスプレイが採用されています。

【デバイス別のピクセル密度】

通常のディスプレイ：1x（等倍）
Retinaディスプレイ：2x（2倍）
最新のスマートフォン：3x〜4x

つまり、2024年現在、ほとんどのユーザーが高解像度ディスプレイでWebサイトを閲覧しているということです。

ぼやける仕組みを図解で理解する

例えば、320×180ピクセルのサムネイル画像があるとします。

【通常のディスプレイ（1x）の場合】

表示領域：320×180ピクセル
画像サイズ：320×180ピクセル
結果：ピッタリ！きれいに表示される

【Retinaディスプレイ（2x）の場合】

表示領域：320×180ピクセル（CSS上）
実際の物理ピクセル：640×360ピクセル
画像サイズ：320×180ピクセル
結果：画像が引き伸ばされてぼやける！

Retinaディスプレイでは、CSS上では320pxの領域でも、実際には640個の物理ピクセルで描画しています。そのため、320pxの画像を640個のピクセルに引き伸ばすことになり、ぼやけて見えるのです。

つまり、Retinaディスプレイできれいに表示するには、表示サイズの2倍の解像度を持つ画像が必要なのです。

CocoonにはRetina機能が隠されている！

「じゃあCocoonを使っている場合はどうすればいいの？」

安心してください。実は、CocoonにはRetinaディスプレイ対応機能が最初から組み込まれています。

しかし、この機能は現在の管理画面には表示されていません。いわば「隠し機能」のような状態になっているのです。

※以前はCocoon設定の「画像」タブに設定項目があったようです。

Cocoonのソースコードを調査してみた

Cocoonの親テーマ内にある lib/page-settings/image-forms.php を確認すると、以下のようなコードがあります。

<?php if (false): //フォームの非表示 ?>
<!-- Retinaディスプレイ -->
<tr>
  <th scope="row">
    <?php generate_label_tag(OP_RETINA_THUMBNAIL_ENABLE, __('Retinaディスプレイ', THEME_NAME) ); ?>
  </th>
  <td>
    <?php
    generate_checkbox_tag(OP_RETINA_THUMBNAIL_ENABLE , is_retina_thumbnail_enable(), __( 'サムネイルをRetinaディスプレイ対応にする', THEME_NAME ));
    ?>
  </td>
</tr>
<?php endif; ?>

注目すべきは if (false): という条件です。

この条件により、Retina設定のチェックボックスが管理画面に表示されないようになっています。

おそらく、サーバーの容量やパフォーマンスへの影響を考慮して、デフォルトでは非表示にしているのでしょう。

Retina機能の実装を詳しく見る

一方で、実際の処理を行う lib/page-settings/image-funcs.php を見ると、Retina機能の本体が実装されています。

// Retinaディスプレイ
define('OP_RETINA_THUMBNAIL_ENABLE', 'retina_thumbnail_enable');
if ( !function_exists( 'is_retina_thumbnail_enable' ) ):
function is_retina_thumbnail_enable(){
  return get_theme_option(OP_RETINA_THUMBNAIL_ENABLE, 1);
}
endif;

// サムネイルの横の画像サイズ
if ( !function_exists( 'get_thumbnail_width' ) ):
function get_thumbnail_width($width){
  if (is_retina_thumbnail_enable()) {
    $width = get_retina_image_size($width);  // 2倍にする
  }
  return $width;
}
endif;

// Retinaディスプレイサイズの取得
if ( !function_exists( 'get_retina_image_size' ) ):
function get_retina_image_size($size){
  return intval($size) * 2;  // サイズを2倍に
}
endif;

このコードから、以下のことがわかります。

デフォルト値は「1」（有効）になっている
有効時は、サムネイルサイズが自動的に2倍になる
例：320×180 → 640×360

なぜRetina機能が効いていないのか？

「デフォルトで有効なら、なぜぼやけるの？」と思いますよね。

これには以下のような理由が考えられます。

過去に設定画面でオフにしていた
データベースに無効の設定が残っている
テーマの更新時に設定がリセットされた

いずれにせよ、確実にRetina機能を有効化する方法を知っておくことが重要です。

子テーマでRetina機能を有効化する方法

それでは、確実にRetina機能を有効化する方法を解説します。

前提条件

Cocoon親テーマがインストールされている
Cocoon子テーマが有効化されている

子テーマをまだ導入していない場合は、Cocoon公式サイトからダウンロードしてください。

⚠️ 重要：なぜ子テーマを使うのか？
親テーマを直接編集すると、テーマのアップデート時にすべての変更が上書きされて消えてしまいます。子テーマを使えば、親テーマがアップデートされても、あなたのカスタマイズは安全に保持されます。

手順1：子テーマのfunctions.phpを編集

WordPressの管理画面から、外観 → テーマファイルエディターを開きます。

右側のファイル一覧から「functions.php」を選択してください。

手順2：Retina有効化コードを追加

functions.php の末尾に、以下のコードを追加します。

// Retinaサムネイルを強制的に有効化
add_filter('theme_mod_retina_thumbnail_enable', function() {
  return 1;
});

【コード解説】

add_filter：WordPressのフィルターフック機能
theme_mod_retina_thumbnail_enable：Cocoonのテーマ設定を上書きするフィルター名
return 1：1（有効）を返すことで、常にRetina機能をオンにする

手順3：ファイルを保存

「ファイルを更新」ボタンをクリックして保存します。

これで、Cocoonが生成するサムネイルサイズが2倍になります。

完成したfunctions.phpの例

<?php //子テーマ用関数
if ( !defined( 'ABSPATH' ) ) exit;

//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();

//以下に子テーマ用の関数を書く

// Retinaサムネイルを強制的に有効化
add_filter('theme_mod_retina_thumbnail_enable', function() {
  return 1;
});

✅ ポイント
コードは必ず <?php タグの内側（ファイルの末尾、閉じタグの前）に追加してください。

サムネイル画像を再生成する

🚨 重要：コードを追加しただけでは、既存のサムネイル画像は変わりません！

WordPressは、画像をアップロードしたときにサムネイルを生成します。つまり、過去にアップロードした画像は、古い（小さい）サイズのままなのです。

Retina対応の2倍サイズで再生成する必要があります。

方法1：Regenerate Thumbnailsプラグインを使う（推奨）

最も簡単な方法は、プラグインを使うことです。

インストール手順

WordPress管理画面でプラグイン → 新規追加を開く
検索欄に「Regenerate Thumbnails」と入力
「Regenerate Thumbnails」を見つけて今すぐインストールをクリック
有効化をクリック

サムネイル再生成の実行

ツール → Regenerate Thumbnailsを開く
「Regenerate Thumbnails For All ○○ Attachments」をクリック
処理が完了するまで待つ

💡 ヒント
画像の枚数によっては、数分〜数十分かかる場合があります。処理中はブラウザを閉じないでください。

方法2：WP-CLIを使う（上級者向け）

サーバーにSSH接続できる環境であれば、WP-CLIを使って一括再生成できます。

# WordPressのインストールディレクトリに移動
cd /path/to/wordpress

# サムネイルを再生成
wp media regenerate --yes

WP-CLIは大量の画像を高速に処理できるため、画像が多いサイト（100枚以上）ではこちらがおすすめです。

方法3：Force Regenerate Thumbnailsプラグインを使う

「Regenerate Thumbnails」で問題が発生する場合は、「Force Regenerate Thumbnails」プラグインを試してみてください。

このプラグインは、既存のサムネイルを削除してから再生成するため、より確実に新しいサイズのサムネイルが生成されます。

古いサムネイルが残っていて問題が解決しない場合に有効です。

Retina対応が適用されたか確認する方法

方法1：ブラウザの開発者ツールで確認

最も確実な確認方法です。

サイトのトップページを開く
F12キー（または右クリック → 検証）で開発者ツールを開く
左上の矢印アイコンをクリックして要素選択モードにする
サムネイル画像をクリックして選択
画像のURLを確認

【Retina対応前】

example.com/wp-content/uploads/2024/01/image-320x180.jpg

【Retina対応後】

example.com/wp-content/uploads/2024/01/image-640x360.jpg

ファイル名に含まれるサイズが2倍になっていれば、正しく適用されています。

方法2：画像の実サイズを確認

開発者ツールの「要素」タブで画像を選択すると、以下の情報が表示されます。

表示サイズ（CSS）：320×180
実際の画像サイズ（Natural Size）：640×360

実際の画像サイズが表示サイズの2倍であれば、Retina対応が成功しています。

方法3：スマートフォンで目視確認

最も確実なのは、実際にRetinaディスプレイを搭載したデバイスで確認することです。

iPhoneやMacBookでサイトを開き、サムネイル画像がくっきり表示されているか確認してください。対応前と比べて、明らかに画像がシャープになっているはずです。

Retina対応のメリット・デメリット

メリット

1. 高解像度ディスプレイで美しく表示される

iPhone、MacBook、最新のWindowsノートPCなど、現在主流のデバイスすべてで美しい画像を提供できます。

2. サイトの品質・信頼感が向上する

ぼやけた画像は「古いサイト」「手入れされていないサイト」という印象を与えがちです。高画質なサムネイルは、サイト全体の品質を底上げします。

3. ユーザー体験の向上

特に写真ブログ、ポートフォリオ、ECサイトなど、画像が重要な役割を果たすサイトでは大きな差が出ます。

デメリット

1. 画像ファイルサイズが増加する

2倍のピクセル数になるため、ファイルサイズも増加します。縦横2倍で面積は4倍になるため、ファイルサイズは約2〜4倍になります。

2. サーバー容量を消費する

各画像に対して、より大きなサムネイルが生成されるため、サーバーの容量を多く消費します。

3. ページの読み込み速度に影響する可能性

画像が大きくなると、ダウンロードに時間がかかります。特にモバイル回線では注意が必要です。

対策：次世代画像フォーマットを併用する

画像サイズの増加が気になる場合は、次世代フォーマット（WebP、AVIF）への変換を検討してください。

以下のプラグインを使えば、自動的にWebP形式に変換できます。

EWWW Image Optimizer
Converter for Media

WebPはJPEGと比べて、同画質で30〜50%程度ファイルサイズを削減できます。つまり、Retina対応で画像が大きくなっても、WebP変換で相殺できるのです。

よくある質問（FAQ）

Q. 管理画面にRetina設定がないのはなぜ？

A. Cocoonの開発者が意図的に非表示にしています。理由は明記されていませんが、サーバー容量やパフォーマンスへの影響を考慮して、すべてのユーザーに一律で適用するのを避けた可能性があります。

Q. 子テーマなしで対応できますか？

A. 技術的には可能ですが、絶対におすすめしません。親テーマを直接編集すると、テーマのアップデート時に変更が上書きされてしまいます。必ず子テーマを使用してください。

Q. 既存の記事のサムネイルも変わりますか？

A. コード追加後にサムネイルを再生成すれば、既存の記事も含めてすべてのサムネイルがRetina対応サイズになります。再生成しないと変わりません。

Q. 元の画像が小さい場合はどうなりますか？

A. 元の画像より大きなサムネイルは生成できません。Retina対応を活かすには、元の画像を十分な解像度でアップロードしてください。

推奨する元画像のサイズ：

最低：1280×720ピクセル
推奨：1920×1080ピクセル以上

Q. Retina対応を無効にしたい場合は？

A. functions.php に追加したコードを削除し、サムネイルを再生成すれば元に戻ります。

// このコードを削除する
add_filter('theme_mod_retina_thumbnail_enable', function() {
  return 1;
});

Q. 新しくアップロードする画像は自動的にRetina対応になりますか？

A. はい、コード追加後にアップロードする画像は、自動的に2倍サイズのサムネイルが生成されます。再生成の手順は不要です。

まとめ

Cocoonでサムネイル画像をRetinaディスプレイ対応させる方法を解説しました。

【手順のおさらい】

子テーマの functions.php にコードを追加（3行だけ！）
Regenerate Thumbnailsプラグインでサムネイルを再生成
ブラウザの開発者ツールで確認

たった数行のコード追加で、サイト全体のサムネイル画像が高画質化されます。

高解像度ディスプレイが当たり前になった今、Retina対応はもはや必須と言えるでしょう。サムネイルがぼやけていると、それだけでサイトの印象が悪くなってしまいます。

まだ対応していない方は、ぜひこの機会に設定してみてください。作業時間は10分程度で完了しますよ。

Cocoon

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

Cocoonのサムネイルがぼやける？Retinaディスプレイ対応で高画質化する方法