投稿（ブログ記事）だけCSSを切り替える方法

投稿ページでも特定の記事だけCSSを切り替えることができます。ここでは is_single('スラッグ') を使った具体例をご紹介します。

投稿ページのスラッグ確認方法

• WordPress管理画面で投稿を開く。
• 「タイトル」の下にある「パーマリンク」を確認。
• URLの最後の部分がスラッグです。例: https://example.com/my-first-post/ の場合、スラッグは my-first-post
• 必要に応じてスラッグは編集可能です。

functions.php で投稿スラッグ別にCSS切替

// 投稿ページごとにスラッグでCSSを切り替える
function custom_css_by_post_slug() {
    if (is_single('my-first-post')) { // スラッグが my-first-post の投稿
        wp_enqueue_style('first-post-css', get_stylesheet_directory_uri() . '/css/first-post.css');
    } elseif (is_single('about-me')) { // スラッグが about-me の投稿
        wp_enqueue_style('about-me-css', get_stylesheet_directory_uri() . '/css/about-me.css');
    } else { // その他の投稿
        wp_enqueue_style('default-post-css', get_stylesheet_directory_uri() . '/css/custom-post.css');
    }
}
add_action('wp_enqueue_scripts', 'custom_css_by_post_slug');

投稿ページ用CSS例

/*投稿（ブログ記事）だけCSSを切り替える*/
/* first-post.css */
body.single-my-first-post {
    background-color: #e8f5e9;
}
.single-my-first-post h1 {
    color: #2e7d32;
}

/* about-me.css */
body.single-about-me {
    background-color: #fff3e0;
}
.single-about-me h1 {
    color: #ef6c00;
}

/* custom-post.css （その他の投稿） */
body.single {
    background-color: #f5f5f5;
}

子テーマのディレクトリ構造

まとめ

投稿ページでは is_single('スラッグ') を使うことで、記事ごとに個別のCSSを読み込むことができます。子テーマの /css/ フォルダにファイルを整理して、functions.php に条件分岐で読み込む方法が基本です。