ホームへ

CSSをページごとに変える方法

CSSは別ファイルにして各ページにリンクして利用します。

これは各ページを共通のデザインにするためです。

しかし、各ページ違うデザインにしたい場合もあるでしょう。

CSSをページごとに変える方法を紹介します。

タグにstyle属性を指定する

<body style="background:#7aa6ed;">

htmlのすべてのタグにおいてstyle属性を使うことができます。

この中にCSSを記載することで、そのタグにだけCSSを適用させることができます。

一ヶ所に一つか二つだけCSSを適用する場合はこちらの方法もよいでしょう。

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をページごとに変える方法でした。

マンガで読める関連記事