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

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

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

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

固定ページや投稿ページのエディターによって編集できる箇所であれば、セレクタを新しく付与するだけで専用の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も新しくなりますので注意が必要です。

まとめ

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

関連する記事

サムネイル

WordPressに適したレンタルサーバーの選び方とおすすめ……

2024年02月01日
WordPressを使う際のレンタルサーバーを選ぶポイントをご紹介しますので、是非レンタルサーバー選定の参考にしてみてください。
サムネイル

【無料レンタルサーバー】XREA FreeでWordPres……

2024年02月01日
「XREA Free」は複数のレンタルサーバーを提供しているGMOグループのひとつであるGMOデジロックが提供するXREA(エクセリア)というレンタルサーバーの無料プランです。
サムネイル

WordPressが使える無料レンタルサーバーおすすめ3選【……

2024年02月01日
無料レンタルサーバーはコストを掛けずにWebサイトを運用できるのという点でとても魅力的ですが、デメリットもあるので注意が必要です。
サムネイル

レンタルサーバー不要!WordPress.comの無料プラン……

2024年02月01日
WordPress.comの無料プランを使ってWebサイトを公開する方法をご紹介します。レンタルサーバーなしでWordPress使ったWebサイトを制作・公開・運用できるという手軽さが大きな魅力のサービスです。
サムネイル

WooCommerceとは?特徴やインストール方法を解説【W……

2024年01月05日
WooCommerceはWordPress用のECサイト構築プラグインです。WordPressで作成されたWebサイトにインストールすれば、誰でも簡単にECサイト開設・運営することができます。
サムネイル

ワードプレスでページURLの一覧をCSVで取得する【Expo……

2024年01月05日
ワードプレスでは「Export All URLs」というプラグインを使うと公開中のすべてページのURL一覧を簡単にCSVファイル化することができます。
サムネイル

Welcartの商品登録を行う方法【商品画像の手順と商品マス……

2023年12月11日
WelcartはWordPressにECサイト機能を実装できるプラグインです。このページではWelcartで販売する商品を登録する方法をご紹介します。