スポンサーリンク

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

2019年7月21日

 
WordPressでCSSをかく場合は主にstyle.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を設定することはできません。

 

きらり

きらり

すべてのページで適用されるなら外部ファイル(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を設定できるプラグイン

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

WP Add Custom CSSのインストール

場所[プラグイン][新規追加]

WP Add Custom CSS』を検索してください。

[今すぐインストール]して[有効化]してください。

※インストールしたらすぐに使うことができます。
プラグインの設定もありますが、特に設定の変更は必要ありません。

 

使い方

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

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

 

表示されてないとき『Custom CSS』ga表示されていない場合は、投稿編集画面の右上の『表示オプション』から「cu CSS」を探してチェックを入れてください。

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

 

きらり

きらり

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

結耶

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

 

 

最後に

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

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

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

 

 

【おまけ】Jetpack カスタムCSS

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

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

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

結耶

結耶

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

 

スポンサーリンク

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。