• HOME > 
  • WordPress > 
  • ワードプレスで特定のページのみにCSSを反映させる方法

ワードプレスで特定のページのみにCSSを反映させる方法

投稿日:

ページによって異なるデザインを使用したい時に

固定ページや投稿ページのエディターによって編集できる箇所であれば、セレクタを新しく付与するだけで専用のCSSを反映させることは可能です。

しかし、ヘッダーやフッターといった共通部分をページによって変更したい時にはどうすればよいでしょうか?

bodyのクラスを利用する

ワードプレスは、ページによってbodyタグに異なるクラスが付与されるようになっています。

たとえば、HOMEに指定したページには「home」というクラスがbodyタグに付与され、投稿ページには「single」というクラスが付与されます。

これらは、デベロッパーツールを使用することでソースコードを確認することができます。

リンク先のサムネイル
Google Chromeのデベロッパーツールの使い方

デベロッパーツールとはWEBブラウザであるGoogle Chromeにはじめから備わっている機能の一つです。閲覧中のWEBサイトのページを構成しているHTMLやCSSといったソースコードを確認することができます...【もっと読む】

実際にトップページを開いて確認してみると、以下のようにbodyタグには「home」というクラスが付与されています。

デベロッパーツールでトップページを確認

ワードプレスにトップページとして認識させるには、あらかじめ管理画面の表示設定で「ホームページの表示」でページを指定しておく必要があります。

表示設定

続いて投稿ページを開いてデベロッパーツールで確認してみると、以下のように「single」というクラス名が見つかります。

デベロッパーツールで投稿ページを確認

他にも、固定ページは「page」、カテゴリーページは「archive」などワードプレスによって自動でクラスが付与されます。

ヘッダーもフッターも全てbodyタグに内包されていますので、このクラスを利用することでページごとに異なるCSSを反映させることが可能になります。

それでは、このクラスを用いて実際にページごとに異なるCSSを反映させるための記述の仕方を説明します。

トップページのみという指定の仕方

ワードプレスでトップページのみに反映させる場合の書き方は次のようになります。

CSS

body.home header{
    background:#d9d9d9;
}
</style>
<body class="home">
<header>
-省略-
&lr;/header>
</body>

プレビュー

トップページのみにスタイルを反映

トップページ以外という指定の仕方

「home」というクラスが付与されたもの以外のbodyという記述の仕方です。

CSS

body.single header{
    background:#819fef;
}
</style>
<body class="single">
<header>
-省略-
&lr;/header>
</body>

更に細かく特定のページのみにCSSを指定したい場合

では、特定のページのヘッダーやフッターにだけスタイルを適用させたい時はどうすれば良いでしょうか?

先程の投稿ページのbodyタグの部分を見てみると「page-id-000」というクラスも付与されていることが確認できます。

post_ID

ワードプレスによって作られたページには固有のページIDが割り振られます。

固定ページは「page-id-○○」、投稿ページは「postid-○○」となります。

これを利用すればトップページや投稿ページという大きな分類だけでなく、ピンポイントで特定のページのみに限定してCSSを反映させることが可能です。

・投稿ページの背景は水色にするが、特定のページではグレーにしたい場合は以下のように記述します。

CSS

body.single header{
    background:#819fef;
}
body.single.postid-147 header{
 background:#999;
}

ページIDはページを新規作成時に自動で割り振られる固有の値のため、ページを削除して作り直した場合などはIDも新しくなりますので注意が必要です。

まとめ

ワードプレスによって自動で割り振られるクラス名を利用すれば、ページごとに異なるスタイルを適用させることが簡単にできます。ページによってデザインを変えたい場面は多くあるのでおぼえておきましょう。

関連する記事

サムネイル

Elementor(エレメンター)の使い方を徹底解説【ページ……

2023年03月09日
最終更新日:2023年03月10日
Elementorは直感操作でワードプレスのサイトを構築できるページビルダープラグインです。ウィジェットをドラッグアンドドロップしていくだけでページのレイアウトを作成することが可能です。
サムネイル

ワードプレスのログイン画面をカスタマイズする方法【プラグイン……

2023年03月07日
最終更新日:2023年03月10日
ワードプレスのログイン画面はカスタマイズしてロゴや背景を変更することができます。ログイン画面のカスタマイズはプラグインを使うかfunctions.phpを編集して行います。
サムネイル

ワードプレスのコンタクトフォーム7で自動返信メールを設定する……

2023年02月28日
最終更新日:2023年03月10日
ワードプレスのContact Form 7プラグインを使って自動返信メールを設定する手順を解説します。フォームの編集画面で「メール(2)を使用」にチェックを入れると、設定項目が表示されて自動返信ができるようになります。
サムネイル

ワードプレスでログイン履歴を確認する方法【SiteGuard……

2023年01月26日
最終更新日:2023年03月10日
多くのセキュリティ対策プラグイン「SiteGuard WP Plugin」を使ってログイン履歴を確認する方法について解説します。
サムネイル

ワードプレスで文字数のカウントを行う方法【エディター搭載の便……

2023年01月26日
最終更新日:2023年03月10日
ワードプレスにはページエディターに標準的に文字数カウントが搭載されています。外部のWebサイトを利用する必要なく、ダイレクトにチェックすることができるので是非活用してみてください。
サムネイル

ワードプレスでnoindexを設定する方法【サイト全体や特定……

2023年01月17日
最終更新日:2023年01月24日
ワードプレスのサイト全体(すべてのページ)にnoindexを設定する方法はとても簡単で、管理画面の「表示設定」にある「検索エンジンでの表示」にチェックを入れるだけです。
サムネイル

ワードプレスでリダイレクトを設定する手順【.htaccess……

2022年10月28日
最終更新日:2023年01月24日
ワードプレスで制作したページにリダイレクトによる転送処理を設定するには、.htaccessを使う方法とプラグインを使う方法の2通りがあります。