- HOME
- > BLOG CATEGORY
- 【WordPress】各ページ背景画像の指定についてbody_classを解説

- お知らせ
- NEW 2023.11.23 【Photoshop】水彩風のテクスチャー作成ついて解説
- お知らせ
- 2023.11.16 【Photoshop】写真の一部を消す加工ついて解説
- お知らせ
- 2023.11.09 【Photoshop】鉛筆風フォントの作成について解説
こんな方に読んでほしい
[記事の内容]
WordPressにはトップページや固定ページ、投稿ページなどたくさんのページがあります。
そのため、ページ毎にCSSを変更することが多くあります。そのような時は「body_class」を使います。
body_classが出力する文字列は以下のようになります。
トップページ | body class=”home … など” |
---|---|
個別投稿ページ | body class=”sinle posid-{記事ID} … など” |
固定ページ | body class=”page posid-{記事ID} … など” |
bodyタグを以下のように変更します。
変更後は「GoogleChrom」の「検証ツール」でbodyタグを確認してください。
<body>
<!--↑ 変更前 ↑-->
<!--↓ 変更後 ↓-->
<body <?php body_class(); ?>>
HTML上で確認すると以下のようになります。
class属性が付与され「home」は付きます。
<body>
<!--↑ 変更前 ↑-->
<!--↓ 変更後 ↓-->
<body class="home blog logged-in">
上記のように各ページ毎にデザインを変更する場合があります。
その際には、各ページ毎の「body
」タグを確認してください。
<!--↓ ページA 例:news ↓-->
<body class="page-template page-template-page-news page-template-page-news-php page page-id-555 logged-in">
<!--↓ ページB 例:about ↓-->
<body class="page-template page-template-page-about page-template-page-about-php page page-id-565 logged-in">
<!--↓ ページC 例:works ↓-->
<body class="page-template page-template-page-works page-template-page-works-php page page-id-570 logged-in">
page-template-page-〇〇
や、page page-id-〇〇
など、
スラッグ名、ページidの番号が反映されます。
上記のようにスラッグ名が反映するので日本語は避けるようにしましょう。
上記で解説した、page-template-page-〇〇
などを用いてCSSでレイアウトしていきます。
書き方は以下のようになります。
/* ページA 例:news */
.page-template-page-news {}
/* ページB 例:about */
.page-template-page-about {}
/* ページC 例:works */
.page-template-page-works {}
上記のようにクラス名を付与し各自レイアウトが可能になります。
今回はこれで以上です。
2023.11.23
2023.11.16
2023.11.09
2023.10.26
![]() |
【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) 新品価格 |
2023.11.23
2023.11.16
2023.11.09
2023.10.26
2023.10.12
2023.09.28
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2023 shu-naka-blog