サムネイル

サムネイルとは

サムネイルは、元の画像や記事を小さく表示したプレビュー画像です。大きな画像をそのまま一覧に表示すると、ページの読み込みが遅くなり、レイアウトも崩れます。サムネイルを使うことで、見やすく、読み込みの速い一覧ページを作成できます。

サムネイルの役割

サムネイルのメリット

• 視覚的な訴求力：画像があることで記事の内容が伝わりやすい
• クリック率向上：テキストだけより魅力的で興味を引く
• ページ速度改善：小さいファイルサイズで読み込みが速い
• 整った見た目：統一されたサイズで美しいレイアウト
• ユーザビリティ：一目で記事の内容が判断できる

WordPressでのサムネイル

WordPressでは、画像をアップロードすると自動的に複数のサイズのサムネイルが生成されます。

サムネイルとアイキャッチ画像の違い

WordPressでは「サムネイル」と「アイキャッチ画像」という用語が混在して使われることがあります。

用語の整理

サムネイルの設定方法

1. アイキャッチ画像の設定（記事ごと）

1. 投稿編集画面を開く
   新規投稿または既存の投稿を開きます。
2. 「アイキャッチ画像」パネルを探す
   右サイドバーにある「アイキャッチ画像」セクションをクリックします。
3. 画像を選択
   「アイキャッチ画像を設定」をクリックし、メディアライブラリから画像を選ぶか、新しい画像をアップロードします。
4. 画像を設定
   「アイキャッチ画像を設定」ボタンをクリックします。
5. 自動でサムネイル生成
   WordPressが自動的に複数サイズのサムネイルを生成します。

2. サムネイルサイズの設定（サイト全体）

1. 設定画面を開く
   「設定」→「メディア」を選択します。
2. 画像サイズを設定
   ・サムネイルのサイズ：幅と高さ（例：150×150）
   ・中サイズ：幅と高さ（例：300×300）
   ・大サイズ：幅と高さ（例：1024×1024）
3. サムネイルをトリミング
   「サムネイルを実寸法にトリミングする」にチェックを入れると、指定サイズぴったりに切り抜かれます。
4. 変更を保存
   「変更を保存」ボタンをクリックします。

3. カスタムサムネイルサイズの追加

テーマのfunctions.phpにコードを追加することで、独自のサムネイルサイズを作成できます。

<?php
// カスタムサムネイルサイズの追加
function mytheme_custom_image_sizes() {
    // 記事一覧用サムネイル（幅400px、高さ300px、トリミングあり）
    add_image_size('post-thumbnail-list', 400, 300, true);
    
    // ヒーロー画像（幅1200px、高さ600px、トリミングあり）
    add_image_size('hero-image', 1200, 600, true);
    
    // サイドバー画像（幅250px、高さ自動、トリミングなし）
    add_image_size('sidebar-thumbnail', 250, 9999, false);
}
add_action('after_setup_theme', 'mytheme_custom_image_sizes');
?>

最適なサムネイルサイズ

用途別推奨サイズ

レスポンシブ対応のポイント

ファイルサイズの最適化

• JPEG：写真に最適、圧縮率が高い（品質80〜90%推奨）
• PNG：ロゴやイラストに最適、透過可能
• WebP：次世代フォーマット、軽量で高画質

画像最適化プラグイン

おすすめプラグイン

• EWWW Image Optimizer：アップロード時に自動圧縮
• Smush：無料で使いやすい画像圧縮
• Imagify：高品質な圧縮、WebP変換
• ShortPixel：強力な圧縮、月100枚まで無料

サムネイルの表示方法

テンプレートでの表示

テーマのテンプレートファイルで、サムネイルを表示するコードを記述します。

基本的な表示方法

<?php
// アイキャッチ画像（サムネイル）があるか確認
if (has_post_thumbnail()) {
    // サムネイルサイズで表示
    the_post_thumbnail('thumbnail');
    
    // または中サイズで表示
    // the_post_thumbnail('medium');
    
    // またはカスタムサイズで表示
    // the_post_thumbnail('post-thumbnail-list');
}
?>

リンク付きサムネイル

<?php
if (has_post_thumbnail()) {
    echo '<a href="' . get_permalink() . '">';
    the_post_thumbnail('medium');
    echo '</a>';
}
?>

CSSクラスとalt属性付き

<?php
if (has_post_thumbnail()) {
    the_post_thumbnail('medium', array(
        'class' => 'img-fluid rounded',
        'alt'   => get_the_title(),
        'loading' => 'lazy' // 遅延読み込み
    ));
}
?>

記事一覧での表示例

<?php
if (have_posts()) :
    while (have_posts()) : the_post();
?>
        <article class="post-card">
            <?php if (has_post_thumbnail()) : ?>
                <div class="post-thumbnail">
                    <a href="<?php the_permalink(); ?>">
                        <?php the_post_thumbnail('medium'); ?>
                    </a>
                </div>
            <?php endif; ?>
            
            <h2>
                <a href="<?php the_permalink(); ?>">
                    <?php the_title(); ?>
                </a>
            </h2>
            
            <div class="post-excerpt">
                <?php the_excerpt(); ?>
            </div>
        </article>
<?php
    endwhile;
endif;
?>

デフォルト画像の設定

アイキャッチ画像が設定されていない場合に表示する画像を指定できます。

<?php
if (has_post_thumbnail()) {
    the_post_thumbnail('medium');
} else {
    // デフォルト画像を表示
    echo '<img src="' . get_template_directory_uri() . '/images/no-image.png" alt="No Image">';
}
?>

サムネイルの再生成

サムネイルサイズを変更した後、既存の画像のサムネイルを再生成する必要があります。

Regenerate Thumbnailsプラグイン

1. プラグインをインストール
   「プラグイン」→「新規追加」で「Regenerate Thumbnails」を検索してインストール・有効化します。
2. 再生成画面を開く
   「ツール」→「Regen. Thumbnails」を選択します。
3. 再生成を実行
   「Regenerate Thumbnails For All Attachments」ボタンをクリックします。
4. 完了を待つ
   画像の数によって数分〜数十分かかります。完了メッセージが表示されるまで待ちます。

WP-CLIでの再生成（上級者向け）

コマンドラインから一括再生成できます。

# すべての画像のサムネイルを再生成
wp media regenerate --yes

# 特定のIDの画像のみ再生成
wp media regenerate 123 456 789

よくある質問（FAQ）

まとめ

サムネイルは、記事一覧を視覚的に魅力的にし、ユーザーの興味を引くために重要な要素です。WordPressでは、アイキャッチ画像を設定するだけで、自動的に複数サイズのサムネイルが生成されます。

魅力的なサムネイルは、サイトの第一印象を決める重要な要素です。適切なサイズと画質を設定し、すべての記事に視覚的に訴求力のあるアイキャッチ画像を設定しましょう。

関連用語