最新の投稿をホームページに設定している場合にトップページだけCSSを適用する方法【WordPress】

2026-02-18

WordPress

WordPressではトップページ（ホームページ）の表示方法を設定から選択できますが、「最新の投稿」をホームページに設定している場合、固定ページのように個別編集画面からCSSを追加することができません。

固定ページをトップにしている場合は編集画面やテーマ機能からスタイル調整が可能ですが、投稿一覧トップの場合はその対象となるページが存在しないため、直接スタイルを追加する方法が分かりにくいポイントです。

この記事では、WordPressでトップページを「最新の投稿」に設定しているサイトにおいて、トップページだけにCSSを適用させる方法を解説します。テーマを大きく改造せず、functions.phpへ追記するだけで対応できるため、シンプルに実装可能です。

目次 [ close ]

WordPressのホームページ表示タイプの基本

WordPressの「表示設定」では、ホームページを以下の2種類から選択できます。

最新の投稿（投稿一覧がトップ）
固定ページ（任意ページをトップに設定）

固定ページを使用する場合は、そのページに対してCSSやブロック設定を直接追加できます。しかし、投稿一覧をトップにした場合は編集対象のページが存在しないため、インラインCSSやページ固有のスタイルを追加できません。

このようなケースでは、テーマ側から条件分岐を行い、トップページ判定時のみスタイルを読み込ませる方法が有効です。

functions.phpでトップページ専用CSSを読み込む

トップページが投稿一覧の場合でも、WordPressの条件分岐タグを利用すれば対象ページを判定できます。以下のコードをテーマのfunctions.phpに追加することで、トップページだけにCSSを適用できます。

/**
 * トップページ（最新投稿表示）にCSSを追加
 */
function custom_inline_style_home() {

  // 投稿一覧トップを判定
  if ( is_home() ) {

    // 空のスタイルを登録
    wp_register_style( 'custom-home-style', false );
    wp_enqueue_style( 'custom-home-style' );

    // ここに適用したいCSSを書く
    $css = "
      .header{
        border-bottom:none !important;
      }
      .contents{
        padding-top:3em !important;
        padding-bottom:3em !important;
      }
    ";

    // インラインCSSとして追加
    wp_add_inline_style( 'custom-home-style', $css );
  }
}

add_action( 'wp_enqueue_scripts', 'custom_inline_style_home' );