概要
WordPressで「このページだけデザインを変えたい」という場面はよくあります。
例えば、
・トップページだけ特別なデザインにしたい
・お問い合わせページだけレイアウトを変えたい
・特定の記事だけ装飾を追加したい
このような場合は、bodyクラスを利用する方法がシンプルでおすすめです。
方法①：bodyクラスを使う（最も簡単）
WordPressでは、ページごとに自動でbodyにクラスが付与されています。
確認方法
ブラウザの検証ツールで確認すると、以下のようなクラスが付いています。
bodyタグ例
<body class="home page page-id-10 logged-in">
CSSで指定する
例えば「page-id-10」のページだけ変更したい場合
CSS
.page-id-10 .title {
color: red;
}
方法②：特定カテゴリーだけ変更する
ブログ記事の場合、カテゴリーごとの指定も可能です。
CSS
.category-blog .entry-title {
font-size: 28px;
}
方法③：自分でbodyクラスを追加する
さらに細かく制御したい場合は、独自クラスを追加することも可能です。
functions.php
functions.php
function add_custom_body_class($classes) {
if (is_page('contact')) {
$classes[] = 'contact-page';
}
return $classes;
}
add_filter('body_class', 'add_custom_body_class');
CSS
.contact-page .form {
background: #f9f9f9;
}
解説
WordPressはページごとに自動でクラスを付けてくれるため、それを利用するだけで柔軟なデザイン変更が可能です。
また、functions.phpを使えば、条件に応じてクラスを追加できるため、より細かい制御にも対応できます。
まとめ
・WordPressはbodyに自動でクラスが付く
・CSSで指定するだけでページごとのデザイン変更が可能
・functions.phpでさらに細かい制御もできる
シンプルですが非常に実用的な方法ですので、ぜひ活用してみてください。
補足（おすすめ）
よく使うクラス例
よく使うbodyクラス
.home（トップページ）
.page-id-○○（固定ページ）
.postid-○○（投稿ページ）
.category-○○（カテゴリー）
.single（投稿詳細）
ご相談・お見積もりは無料です。まずはご連絡ください！
初めての方でも安心して進められるよう、丁寧にサポートいたします。
「まだ具体的に決まっていない」
「相談だけでも大丈夫かな？」
という方もご安心ください。
ご相談・お見積もりは無料です。
初めての方にもわかりやすくご案内いたします。
