関連記事の表示方法とCSSデザイン調整｜読まれるブログ設計の基本

記事下に表示される「関連記事」は、読者の興味関心をつなげるための重要な要素です。適切に設置すると、回遊率の向上や滞在時間の増加が期待でき、SEOにも良い影響を与えます。この記事では、関連記事の基本的な表示方法とCSSを使ったデザイン調整のポイントを整理します。

記事内では、要素の取得やクラス操作の仕組みを理解する際に役立つ DOM操作の基本｜要素取得・イベント・クラス操作を体験 や、レイアウト調整の基礎になる FlexboxとGridの基礎｜レスポンシブレイアウトを理解する も関連情報として紹介しています。

1. 関連記事を表示する目的

関連記事の役割は、単にリンクを並べるだけではありません。以下のような効果が期待できます。

• 読者が求めている情報を継続して提供しやすくなる
• サイト全体の回遊率が向上する
• 直帰率の低減につながる
• 内部リンク構造が強化され、SEOにも良い影響を与える

適切なコンテンツを表示するためには、カテゴリー・タグ・カスタムフィールドなどを活用し、記事同士の関連性を整理しておくことが重要です。

2. WordPressで関連記事を表示する方法（基本）

WordPressでは、テーマやプラグインによって関連記事の表示方法が異なります。代表的な手法は以下の3つです。

2-1. テーマで標準搭載されている関連記事機能を使う方法

多くのテーマでは、記事下に関連記事が自動的に表示される機能が備わっています。
コードの編集が不要で、手軽に導入しやすい点が特徴です。

2-2. プラグインで関連記事を追加する方法

代表的なプラグインは以下です。

• Yet Another Related Posts Plugin (YARPP)
• Contextual Related Posts
• Inline Related Posts

カテゴリー・タグ・本文の類似度を元に関連記事を抽出できるため、高い精度で表示したい場合に向いています。

2-3. カスタムコードで関連記事を出力する方法（PHP）

独自デザインで関連記事を作りたい場合は、テーマファイル（single.php など）にコードを追加する方法があります。

<?php
$categories = get_the_category( $post->ID );
if ( $categories ) {
    $category_ids = array_column( $categories, 'term_id' );

    $args = array(
        'category__in'   => $category_ids,
        'post__not_in'   => array( $post->ID ),
        'posts_per_page' => 4,
    );

    $related_posts = get_posts( $args );

    if ( $related_posts ) :
        echo '<div class="related-posts">';
        foreach ( $related_posts as $post ) : setup_postdata( $post );
            ?>
            <a href="<?php the_permalink(); ?>" class="related-posts__item">
                <?php the_post_thumbnail('medium'); ?>
                <p><?php the_title(); ?></p>
            </a>
            <?php
        endforeach;
        echo '</div>';
        wp_reset_postdata();
    endif;
}
?>

クラス操作の考え方は、JavaScriptでDOM操作｜要素取得・イベント・クラス操作を体験 の内容とも共通する部分があります。

3. 関連記事デザインの基本構造

関連記事は、以下のような構造で組むことが一般的です。

<div class="related-posts">
  <a class="related-posts__item" href="#">
    <div class="related-posts__thumb"></div>
    <p class="related-posts__title">タイトルが入ります</p>
  </a>
  <!-- 繰り返し -->
</div>

4. CSSで関連記事を美しく整える方法

読みやすく、クリックされやすいデザインにするためには、レイアウトや余白の考え方が重要です。
コンポーネントの配置には Flexbox や Grid がよく使われます（→内部リンク：FlexboxとGridの基礎｜レスポンシブレイアウトを理解する）。

4-1. Flexboxを使った横並びレイアウト

.related-posts {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.related-posts__item {
  width: calc(50% - 8px);
  text-decoration: none;
  color: inherit;
}

4-2. サムネイルの比率を整える（レスポンシブ対応）

.related-posts__thumb {
  aspect-ratio: 16 / 9;
  background-color: #eee;
  border-radius: 4px;
  overflow: hidden;
}

画像サイズの扱いに迷う場合は、CSSでサイズ指定を理解する｜px・em・remの違い も参考になります。

4-3. ホバー時のアクセント

.related-posts__item:hover {
  opacity: 0.85;
  transform: translateY(-2px);
  transition: 0.3s;
}

シンプルなアニメーションを加えると、視認性と操作性が向上します。

5. スマートフォンでの表示調整

レスポンシブデザインでは、画面幅に応じて列数を変更します。

@media (max-width: 600px) {
  .related-posts__item {
    width: 100%;
  }
}

媒体によっては、デザイン調整が適用されないケースもあるため、CSSが反映されない場合の対処としては CSSが反映されないときの原因と対処法まとめ も参考になります。

6. クリックされやすい関連記事の配置と工夫

読者が自然に目に入りやすい位置へ設置することが重要です。

• 記事末に設置する
• 本文の流れを妨げないデザインにする
• カテゴリー名やタグを整理して関連性を高める
• サムネイル画像を大きめにする

画像の最適化を行うと表示速度の改善につながります。
詳細は WordPressの画像最適化ガイド（EWWW Image Optimizer編） を参照できます。

まとめ

関連記事は、読者の興味を広げる大切なナビゲーション要素です。テーマ・プラグイン・カスタムコードのいずれを選ぶ場合でも、レイアウトや余白設計を整え、読みやすいデザインに調整することでクリック率の向上が期待できます。

レイアウトの基本を理解しながらCSSでデザインを調整すると、サイト全体の一貫性も高まり、より快適な閲覧体験につながります。