デザインを柔軟にカスタマイズ！Cocoonテーマのページ固有クラス活用術【WordPress】

カッパ子

投稿ページだけで使いたいCSSがあるんですけど、どうすれば良いでしょう？

ユウ

ページ固有クラスを活用すれば簡単だよ！

WordPressのCocoonテーマには、トップページや個別記事ページなど、特定のページに自動で割り当てられる固有クラスがあるのをご存知でしょうか？

これらのクラスを活用することで、特定のページだけに適用されるCSSを簡単に書くことができ、サイトのデザインをより柔軟にカスタマイズできます。

本記事ではCocoonテーマの固有クラスとその活用方法について解説します。

固有クラスの活用法

Cocoonテーマには、以下のような固有クラスが自動で付与されます。

これらのクラスをCSSのセレクタとして使うことで、特定のページにのみスタイルを適用できます。

たとえば、トップページにある特定の要素（例：divタグ）の背景色を変えたい場合、以下のようにCSSを書くことで、他のページに影響を与えることなくデザインを変更できます。

.home .your-custom-element { background-color: #f0f0f0; }

このコードは、「homeクラスを持つ要素の中（トップページ）にある、your-custom-elementクラスを持つ要素」だけにスタイルを適用します。

Cocoonテーマに限らず、WordPressではPHPを使って任意のクラスを追加することも可能です。

「header.php」に以下の記述を追加しましょう。

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

これでCocoonテーマと同様にページごとに固有クラスが追加されるはずです。

Cocoonテーマの固有クラスを活用することで、サイト全体のデザインを崩すことなく、特定のページを自由にカスタマイズできるようになります。

特定の要素にいちいちクラスを追加する手間が省けるので、CSSの記述がよりシンプルになり、管理もしやすくなるので、ぜひ試してみてください。

リンク