概要
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
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でさらに細かい制御もできる
シンプルですが非常に実用的な方法ですので、ぜひ活用してみてください。
補足（おすすめ）
よく使うクラス例
.home（トップページ）
.page-id-○○（固定ページ）
.postid-○○（投稿ページ）
.category-○○（カテゴリー）
.single（投稿詳細）
この記事を読んだ方はこちら
ご相談・お見積もりは無料です。まずはお気軽にご連絡ください。
act styleでは、デザイン性はもちろん、表示速度やSEO対策にも配慮したレスポンシブWebデザインを標準仕様として採用していますので、パソコン・スマートフォン・タブレットなど、さまざまな端末から快適に閲覧できるホームページを制作いたします。
「ホームページの新規制作」「ホームページのリニューアル」どちらのご要望にも対応可能です。ホームページ制作に関するご相談やご質問なども、お気軽にお問い合わせください。
「まだ制作するか決まっていない」「まずは話だけ聞いてみたい」という場合でも大丈夫です。しつこい営業は一切ありません。どうぞお気軽にご相談ください。
