CSS Word Press

Word Pressのid指定をして特定のページにのみCSSを適用させる方法

class名を確認する

特定のページにのみCSSを適用させるためには、まず、そのページの「page-id」または「postid」を確認する必要があります。

固定ページの場合は「page-id」
投稿の場合は、「postid」となります。

ちなみにトップページにのみ特定のCSSを適用させたい場合は、
class名は「home」となります。

class名の確認方法

class名を確認するには、まず、適用させたいページのソースを表示させて、<body>タグを探してください。

<body>のタグには様々なclass名が表示されていますが、使用するのは、「page-id」または「postid」です。

下の画像はWord Pressの固定ページのページソースです。
「固定ページ」で作成した記事なので、class名は「page-id-3407」となっています。

CSSを適用させるためには、上の画像で赤く囲ってある「page-id-3407」を指定します。

CSSの書き方

class名を確認できたら、CSSのコードを記述します。

コードの書き方

.postid-〇〇 + 適用させたいタグ名やclass名

という書き方になります。

例えば、投稿ページのclass名が「postid-3407」だとします。

コードとしては以下のようになります。

Point
class名の指定となるので、必ずpostidやpage-idの前に、「.」を付けることを忘れないように気を付けましょう!

このように指定することで、

  • 投稿ページ「postid-3407」のみ
  • h1の背景色がaliceblue(薄い水色)に変化

となります。

postidやpage-idの指定で、CSSを特定のぺージにのみ、適用させることができます( • ̀ω•́ )✧

-CSS, Word Press

Copyright© Wonderwall Music Records , 2020 All Rights Reserved Powered by AFFINGER5.