
テーマによって多少異なりますが、WordPress は基本的にトップページでも下層ページ(投稿・固定ページ・アーカイブ)でも同じ CSS を読み込んでいます。
通常はそれでもとくに問題ありませんが、特定の CSS をそのページでのみ読み込みたいケースもあると思います。たとえば「CSS を使った見出しのデザインサンプル」という記事を書くときですね。
すべて style.css に追記しておいてもよいですけど、他の記事でまったく使わない CSS が大量にあると表示スピードにも影響してしまいます。
そこで、そのページにだけ個別のスタイルを適用する方法を解説していきます。
Headline
Case1. ページごとにCSSファイルを用意する方法
一般的に、CSS は外部リンクとして <head> 内に置かれています。
WordPress では header.php に <head>
が書かれていることが多いので、現在使用しているテーマをのぞいてみてください。
シンプルなものだと、下の 2 つのうちどちらかになっていると思います。
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
functions.php で style.css を読み込んでいるテーマや、CSS が細分化されているテーマもありますが、いずれにせよブログが表示されたときは以下のように CSS ファイルへのリンクに置換されています。
<link rel="stylesheet" href="https://example.com/wp-content/themes/xxx/style.css" type="text/css" />
header.php はトップページでも下層ページでも共通となっていることが多く、そこで読み込んでいる style.css も各ページ共通となっているわけです。
もしページごとに CSS を切り替えたい場合は、条件分岐を使いましょう。
条件分岐でページごとにCSSを変更する
たとえば、「投稿ページ」と「それ以外のページ」で読み込む CSS を変更する場合、それぞれの CSS を用意しておきます。
ページタイプ | 読み込む CSS |
---|---|
投稿ページ | article.css |
それ以外の全ページ | style.css |
<head>
内の指定は以下のとおりです。
<?php if( is_single() ): ?> <link rel="stylesheet" href="<?php bloginfo(‘url’); ?>/css/article.css" type="text/css" /> <?php else: ?> <link rel="stylesheet" href="<?php bloginfo(‘url’); ?>/css/style.css" type="text/css" /> <?php endif; ?>
is_single という条件分岐タグを使って、投稿ページとそれ以外のページで振り分けています。
ID やスラッグを指定して、特定の投稿のみ分岐することもできます。
<?php if( is_single( array( 100, 'sample' ))): ?> <link rel="stylesheet" href="<?php bloginfo(‘url’); ?>/css/article.css" type="text/css" /> <?php else: ?> <link rel="stylesheet" href="<?php bloginfo(‘url’); ?>/css/style.css" type="text/css" /> <?php endif; ?>
その他の条件分岐タグを使えば、トップページのみ変える・404 ページのみ変える、というのも可能です。
大まかにページタイプによって読み込む CSS を変更するなら上記の方法でよいのですが、特定の投稿にのみ適用させるのはちょっと不便だと思います。
では、投稿編集画面に専用の CSS 入力欄を作ってしまう方法を見ていきましょう。
Case2. カスタムフィールドを利用する方法
大幅なカスタマイズはしなくても、カスタムフィールドを使ってその投稿にのみ特定の CSS を出力できます。
手順1:header.php にコードを追記する
header.php に書かれている <head>
内に以下のコードを入れてください。
<?php if ( is_single() ) { $article_css = get_post_meta($post->ID,article_css,true); if($article_css) { echo <<<EOS <style> $article_css </style> EOS; } } ?>
「投稿ページであれば article_css という名前のカスタムフィールドに書かれた値を出力しますよ」というものです。
カスタムフィールドに何も書かれていなければ、コードは出力しません。
参考 1記事限定で反映させたいcssやjavascriptをカスタムフィールドで読み込む
手順2:投稿編集画面でカスタムフィールドにCSSを入力
投稿編集画面で、カスタムフィールドに CSS を入力します。
名前 | 値 |
---|---|
article_css | 任意 |
以下のように入力すると、「値」に書いたスタイルがその投稿のみに反映されます。

Case3. カスタムフィールドを使わずにCSS入力欄を作成する方法
カスタムフィールドではなく、CSS を書く専用欄を作成したほうが便利かもしれません。
functions.php を編集するので、カスタマイズ前に必ずバックアップをとっておいてください。
手順1:functions.phpにコードを追記する
functions.php に以下を追記します。
//Custom CSS Widget add_action('admin_menu', 'custom_css_hooks'); add_action('save_post', 'save_custom_css'); add_action('wp_head','insert_custom_css'); function custom_css_hooks() { add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high'); add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high'); } function custom_css_input() { global $post; echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />'; echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>'; } function save_custom_css($post_id) { if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id; if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id; $custom_css = $_POST['custom_css']; update_post_meta($post_id, '_custom_css', $custom_css); } function insert_custom_css() { if (is_page() || is_single()) { if (have_posts()) : while (have_posts()) : the_post(); echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>'; endwhile; endif; rewind_posts(); } }
参考 ページや記事ごとに個別のCSSやJavaScriptを追加する方法
これだけで準備完了です。
手順2:投稿編集画面で「Custom CSS」にCSSを入力
投稿編集画面に入ると、本文入力エリア(エディター)の下に「Custom CSS」という入力欄が表示されていると思います。

その投稿にのみ反映させたい CSS を入力しましょう。

カスタムフィールド使用時と同じく、<head>
内に <style>
を出力してくれます。
Case4. プラグイン「Simple CSS」を使う方法
カスタマイズに不安があるなら、プラグインを使うのが最も簡単です。
個別に CSS を出力できるプラグインはいくつかありますが、ここでは「Simple CSS」をご紹介します。
手順1:プラグインインストール・有効化
プラグイン新規追加で「Simple CSS」を検索し、インストール・有効化してください。

手順2:投稿編集画面で「Simple CSS」にCSSを入力
投稿編集画面下部に「Simple CSS」欄が表示されているので、CSS を入力しましょう。

WordPress5.8 & テーマ「Snow Monkey」で動作確認済みです。
備考:サイト全体に適用するCSSも編集できる
「Simple CSS」は、投稿ごとの CSS だけではなく、サイト全体に適用する CSS も編集できます。
外観 > Simple CSS に入ると専用エディターが表示されるので、そこに入力していけば OK です。

今後テーマを変更しても、プラグインで保存したものはそのまま引き継げるので便利ですね。
カスタマイザーからも編集できるため、実際の表示を確認しながら CSS を書きたい場合も重宝すると思います。

まとめ
以上、WordPress で特定のページに個別の CSS を設定する方法でした。
CSS を使ったカスタマイズ記事を書くときは重宝すると思うので、ぜひ使ってみてください。
新しいものを取り入れていくと、ますますブログを書くのが楽しくなりますよ!
それでは、また。