Word Press

《CSS》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を特定のぺージにのみ、適用させることができます( • ̀ω•́ )✧

  • この記事を書いた人
  • 最新記事
Reino

Reino

佐賀県唐津市生まれ。東京育ちのフリーランス。
2013年小学館CanCam新世代モデルセミファイナリスト。
現役のときは青山学院大学、現在は慶應義塾大学で人生2回目の大学生、哲学を学んでいます。
SEOコンサル、Webマーケター、Webデザイナー、広告運用代理などのマルチスキルを生かしたWeb集客のお仕事が得意😄
個人でリカレント教育のメディアも運営しています。

プライベートブログ→美容やサガン鳥栖やファッション

私の別の顔😎→ UK Rockをこよなく愛するバンドThe Charlene.(シャーレイン)のボーカルMiuとして、作詞&作曲の大部分を手がけています。CDはタワレコなどにて全国発売中。詳しくはこちら

-Word Press

© 2020 mieux