WordPressの記事ページのみにカスタマイズCSSを適応させたい

WordPressで記事ページにのみCSSを読み込ませたいというご質問を頂きました。

投稿ページ、固定ページなどに独自のデザイン・カスタマイズを加えたいという要望は多い事でしょう。

記事ページだけに外部CSSファイルを読み込ませる方法や、記事ページだけに適用されるCSSの書き方をまとめました。


WordpressのSEO対策ならRoot-013 Root-013ではWordPress・SEO対策・アフィリエイトなどサイト運営に関するご質問に無料でお答えしております。
WordPress SEO対策 アフィリエイト 無料相談 無料!WPインストール代行・集客サポート

記事ページにのみ、カスタマイズしたCSSを実行させたいです。

調べると、function.phpに条件分岐で記述しアクションフックで呼び出すと良さそうということがわかりました。ただ、初心者すぎて具体的にどのような記述をどこにすれば良いのか分かりません。。

ご存知でしたらお力添えいただけますと幸いです。


>匿名様

コメントありがとうございます!
CSSの追加は様々な方法がありますが、CSSの追加だけであればfunctions.phpに記述を加えるまでも無いかなと思います。

特に初心者さまということですので、functions.phpはコードにエラーがあるとログインすらできなくなってしまいますので・・・

では、いくつか方法をまとめさせていただきますね。

方法としては、
・記事のページにだけ独自のCSSを読み込ませる方法
・記事ページにのみ適用となるように追記する(外観カスタマイズ or プラグイン)
となります。

現在どの程度勉強されているのかが分からないので、PHPやCSSで分からない部分があったらご連絡ください。

記事ページ・固定ページにだけCSSファイルを読み込ませる

WordPressで記事のみ、固定ページのみに何かをするというカスタマイズはCSSに限らず様々なシーンで出てくるでしょう。

このような場合に必須となるのが「条件分岐タグ」です。

WordPress Codex 条件分岐タグ

これからWordPressを始めるなら絶対に覚えておいた方がよいもので、既存のテーマでも必ず使われているのでテーマのコードを読み解いていくうえでも必要な知識です。

記事ページだけに何かをする場合は is_single()

記事ページだけに何かをする場合は is_single()。固定ページならis_page() となります。

例えばheader.phpの内にCSSファイルを読み込む場合はPHPのif分と組み合わせ、『〇〇の時は〇〇(記事ページの時にcustom.cssを読み込む)』

<?php if( is_single() ) : ?>
  <link href="http:// example.com/【インストールフォルダ名】/wp-content/themes/【テーマフォルダ名】/custom.css" rel="stylesheet">
<?php endif; ?>
<!-- headタグの閉じタグの前に記載するのが良いでしょう。 -->
</head>

のようにすれば、記事ページでだけでcustom.cssを読み込ませることができます。

上のコード通りなら、style.cssと同じ階層にcustom.cssをアップロードすれば適用されます。

custom CSSアップ

is_singleがis_pageになれば、固定ページにだけ適用されるCSSになるというわけですね。

ちなみに、条件を「&&(かつ)」「||(または)」でつなぐことで複数のテンプレートに適用することも可能です。

if( is_single() || is_page() )
なら記事ページまたは固定ページ

if( is_page() || is_front_page() )
なら固定ページかつ、フロントページに適用されている場合

となります。これの使い方を覚えればCSSのみならず、記事ページに特定の文言やバナーを表示したり・・・なんてカスタマイズもできるようになります。

記事ページにだけ適用されるようにCSSを記述する方法

多くのWordPressテーマでは、header.phpのbodyタグの部分に、このような記述があります。

<body <?php body_class(); ?>>

body_class()というのは、様々な情報をclassとして出力してくれます。

テンプレートタグ body_class

ブラウザの右クリック>要素を検証(chromeの場合)でコードを確認すると、このようになっています。

bodyタグ 確認

例えば
single・・・記事ページの時に出力される
postid-3135・・・記事のIDが表示される
logged-in・・・ログイン状態の時に表示される
などです。
固定ページならsingle ではなく page が出力されます。
あとはアーカイブなら archiveが出力されるわけですね。

既存のCSSにこれらのクラスを利用した記述を追加することで「記事にのみ出力されるCSS」「固定ページにのみ出力されるCSS」を記述することができます。

.single p {
color:red;
}

(singleクラスの中にあるpタグ という指定になります。)
などとしてみましょう。記事ページの段落だけ赤文字になるはずです。

CSSの追加については、テーマのstyle.cssを直接編集するのはお勧めできません。前述のようにカスタム用のCSSを読み込ませるか、以下の追加CSSやプラグインの方が無難です。

外観 > カスタマイズ > 追加CSS

外観 > カスタマイズ > 追加CSS で、CSSを追加することができます。

追加CSS

プラグインを使う方法

他に、プラグインでCSSを読み込ませる方法もあります。

CSS追加プラグイン

このようなプラグインはたくさんありますが、ご紹介する『Simple Custom CSS and JS』は、インライン(HTML内にCSSを記述)か外部ファイル(External)か、headerで読み込むかfooterで読み込むかなどを選べる汎用性の高いプラグインです。

custom CSS02

まとめ CSSの優先順位について

CSSの追加方法について、参考にしていただけたでしょうか。

これらのポイントを押さえれば、CSSのデザインカスタマイズはほとんど思った通りにすることができるはずです。

コメントをどうぞ

  1. ご丁寧に解説いただき、ありがとうございます!!
    初心者の私でも非常にわかりやすかったです。
    ただ、記事ページ内のタイトル、サイドバー(プロフィールや最近の投稿など)にもなぜか指定したCSSが反映されてしまいました。。
    CSSを記事本文のみに適用することはできますでしょうか?

    1. よかったです!
      >記事ページ内のタイトル、サイドバー(プロフィールや最近の投稿など)にもなぜか指定したCSSが反映
      これについては、
      「どのタグにCSSを適用したいのか」
      「どんなCSSを記述しているか」
      によります。
      たとえば、ブログ本文のpタグであれば、

      .single .entry-content p {
      color:red;
      }
      

      のようになります。
      .entry-content 部分はテーマによっても変わります。
      お使いのテーマで、記事本文全体を囲っているタグにどんなクラスがあるかはテーマ次第です。

      「.single」は多くの場合bodyタグに記載されているクラスなので、
      .single p {color:red;} だと記事ページのすべてのpタグが赤文字になります。(サイドバー含む)

      ブラウザ右クリックでコードを確認して、適用したい部分(を内包する)のHTMLタグにどんなクラス(div class=”XXXX” など)が適用されているかを確認してみましょう。
      頑張って下さい!

      1. できました、、!
        とても嬉しいです、ありがとうございました!
        引き続き学習頑張ります・・

コメントを残す

メールアドレスが公開されることはありません。

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。