class名を確認する
特定のページにのみCSSを適用させるためには、まず、そのページの「page-id」または「postid」を確認する必要があります。
固定ページの場合は「page-id」
投稿の場合は、「postid」となります。
ちなみにトップページにのみ特定のCSSを適用させたい場合は、
class名は「home」となります。
class名の確認方法
class名を確認するには、まず、適用させたいページのソースを表示させて、
タグを探してください。のタグには様々なclass名が表示されていますが、使用するのは、「page-id」または「postid」です。下の画像はWord Pressの固定ページのページソースです。
「固定ページ」で作成した記事なので、class名は「page-id-3407」となっています。
CSSを適用させるためには、上の画像で赤く囲ってある「page-id-3407」を指定します。
CSSの書き方
class名を確認できたら、CSSのコードを記述します。
コードの書き方
.postid-〇〇 ＋ 適用させたいタグ名やclass名
という書き方になります。
例えば、投稿ページのclass名が「postid-3407」だとします。
コードとしては以下のようになります。
1 2 3 4 | /* .postid–3407 */ .postid-3407 h1{ background–color:aliceblue; } |
Point
class名の指定となるので、必ずpostidやpage-idの前に、「.」を付けることを忘れないように気を付けましょう！
このように指定することで、
- 投稿ページ「postid-3407」のみ
- h1の背景色がaliceblue（薄い水色）に変化
となります。
postidやpage-idの指定で、CSSを特定のぺージにのみ、適用させることができます( • ̀ω•́ )✧
