WordPressでページごとにCSSを設定するには？

2019年7月21日2023年5月13日便利なプラグイン

WordPressでCSSをかく場合は主にstyle.cssまたは［外観］➡︎［カスタマイズ］➡︎［追加CSS］に記述します。ここで設定したCSSはサイト全体に反映されます。

テーマをカスタマイズする場合やよく使うCSSを指定するときにはここに記述すといいのですが、記事を書いているその記事(ページ)でしか使わないスタイルもあります。
その記事(ページ)でしか使わないスタイルをstyle.cssや追加CSSに記述するには不便です。

では記事ごとにCSSを記述するにはどうしたらいいんでしょう？
今回はWordPressでページごとにCSSを記述するにはどうしたらいいかを含め「ページごとにCSSを設定できるプラグイン」を紹介します。

WordPressで記事ごとにCSSを記述するには?

通常WebサイトではCSSを書く場所は外部ファイル、HEAD内、HTMLタグ内(インライン)の3つです。
ページごとにCSSを記述したい場合、HEAD内かHTMLタグ内に記述するのが一般的です。

ですが、WordPressで各ページのHEAD内にCSSを書くには記事のHEAD部分になるheader.phpに書けばいいのですが、header.phpはすべてのページで読み込まれ適用されるため記事ごとにCSSを設定することはできません。

CSSを書く場所と基本的な書き方

UUPDATE 2023年05月13日『WordPressでCSSを書く場所』を追記しました 2019年07月21日『CSSを書く場所』 ...

 https://kirari-yums.net/post-8221/

きらり

すべてのページで適用されるなら外部ファイル(style.css)に書くのと同じだね。

結耶

そうなんだよね。WordPressで記事ごとのHEAD内にCSSを書くのは構造上無理ってことだよね(^^;

BODY内にCSSを書く

上で書いた通り、WordPressで記事ごとに個別でHEAD内にCSSを書くことはできません。
そうすると記事ごとにCSSを設定するにはHTMLタグ内に記述するしかないのですが、WordPressでは記事の冒頭に<style>～</style>を使ってスタイルを指定することもできます。

ですがHTMLを書く上でBODY内にCSSを記述しない方がいいという話もあります。

きらり

BODY内にスタイル設定しちゃダメなの？

結耶

ダメってことではないけど…できるだけBODY(本文)内はHTMLだけにしておいた方がいいとはいうね。
「HTMLを書くときのルール」みたいなものらしい。

記事ごとにCSSを書くにはHEAD内がベスト

記事を書く側としてもBODY内にスタイルを指定するとなんだか記事がごちゃごちゃしてきます。
特に私の場合、記事の内容によって非常に多くのスタイルを書かなくてはならないことがあります。

BODY内にスタイルを指定しないようにするにはやはりHEAD内に指定するのがページ内のスタイルをまとめられるので一番いい方法なのです。

きらり

でもWordPressの構造上記事ごとに個別でCSSを書くのは無理なんでしょ！？

結耶

そうなんだけどね…WordPressには「プラグイン」という便利なものがあるんだよ！w

テーマによっては記事ごとに設定できる

お使いのテーマによっては記事編集画面にCSSやJavaScriptを入れられる機能が搭載されているものがあります。

記事ごとにCSSを設定できるプラグイン

記事ごとにCSSを設定できるプラグインはいくつかあります。
私も調べていくつか使ってみました。その中でも一番簡単で使い易い『WP Add Custom CSS』を紹介します。

WP Add Custom CSSのインストール

インストール方法

1. WordPress管理画面から［プラグイン］→［新規追加］
2. 『WP Add CustomCSS』と入力して検索
3. ［今すぐインストール］をクリック。インストール後［有効化］する

※見つからない場合はプラグインページ(下記リンク)よりファイルをダウンロードしてアップロードしてください。アップロード方法はこちら

WP Add Custom CSS – WordPress プラグイン | WordPress.org 日本語

カスタム CSS をウェブサイト全体、あるいは特定の投稿や固定ページに追加します。

 https://ja.wordpress.org/plugins/wp-add-custom-css/

設定

設定はしなくても使うことができます。設定ではテーマ(背景色)をライトかダークが選択でき、行番号も付けることができます。

使い方

［投稿］［新規追加］または［投稿一覧］から投稿編集画面を開いてください。

投稿編集画面の下に『Custom CSS』という項目が追加されています。

上の画像の赤枠の部分にページで使用するスタイルを記述してください。

きらり

これでページごとにスタイルを設定できるんだね！

結耶

そうそう♪記事を書きながらスタイルを設定できるから楽だよ～♪

最後に

WordPressで記事を書いていて「この記事でしか使わないスタイルをまとめたいな」「HEAD内にCSSを書きたいな」と思っている人にはとても便利なプラグインだと思います。

HTMLタグ内に同じスタイルを何度も書かなくてすみます。記事編集の邪魔になることもありません。
記事で使うスタイルをまとめることができるのでとても便利です。

ぜひ使ってみてください。

スラスラわかるHTML＆CSSのきほん 第2版 [ 狩野 祐東 ]

¥2,178 （2024/09/02 19:05時点 | 楽天市場調べ）

Amazon

楽天市場

Yahooショッピング

ポチップ

【おまけ】Jetpack カスタムCSS

Jetpackの機能の中に『カスタムCSS』があります。
JetpackのカスタムCSSはページごとにCSSを設定はできませんが、テーマのCSSを追加または書き換えることができます。

テーマがアップデートしても影響を受けないので設定CSSが消えることもありません。

JetpackのカスタムCSSを有効化すると、［外観］➡︎［CSS編集］からスタイル編集ができます。

結耶

JetpackのカスタムCSSはテーマのカスタマイズするときには便利な機能です。

応援よろしくお願いします。

     

お問い合わせはこちら

この記事を書いた人

フォロー

結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター

きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM