CSSをページごとに変える方法
CSSは別ファイルにして各ページにリンクして利用します。
これは各ページを共通のデザインにするためです。
しかし、各ページ違うデザインにしたい場合もあるでしょう。
CSSをページごとに変える方法を紹介します。
タグにstyle属性を指定する
<body style="background:#7aa6ed;">htmlのすべてのタグにおいてstyle属性を使うことができます。
この中にCSSを記載することで、そのタグにだけCSSを適用させることができます。
一ヶ所に一つか二つだけCSSを適用する場合はこちらの方法もよいでしょう。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
styleタグを使う
<style>
body{
background:#7aa6ed
}
</style>html内にてstyleタグを使うことができます。
このstyleタグにCSSを記述できます。
このstyleタグで記載した内容はそのページでしか適用されません。
styleタグを記述する箇所はheadタグ内が一般的です。
しかし、headタグ内の記述が難しいときbodyタグ内でもちゃんと効きます。
WordPressなら「カスタムHTML」ブロック内に記載するとよいでしょう。
bosy内に記載する場合、できるだけ上部に記述することをオススメします。
ブラウザはコードを順番に読んで適用させるため、後ろの方に記載すると一瞬CSSが効いていない状態になってしまうためです。
bodyに固有のclass名を付ける
html
<body class="example">CSS
.example h1{
background:#7aa6ed
}bodyに他のページと被らないclass名（またはid名）をつけましょう。
あとはCSSを指定するだけです。
WordPressの場合
WordPressの場合、下記のように記述するとbodyにclassをつけることができます。
テーマ（index.phpなど）
<body <?php body_class(); ?>>生成されたhtml(一例)
<body class="post-template-default single single-post postid-1799 single-format-standard logged-in admin-bar customize-support">上記の場合、数字がついているclassである「postid-1799」は重複しないclassです。
これを利用してCSSで背景色を指定するといいでしょう。
CSS
.postid-1799{
background:#7aa6ed
}クラス名を確認するときはDevToolsを使いましょう。
【まとめ】CSSをページごとに変える方法
タグにstyle属性を指定する
指定するCSSが一つか二つなら
styleタグを使う
指定するCSSが多いなら
CSSファイルをいじりたくないなら
bodyに固有のclass名を付ける
指定するCSSが多いなら
htmlファイルをいじりたくないなら
以上、CSSをページごとに変える方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
