【WordPressの追加cssとは】設定箇所とCSS編集する方法

WordPressのサイトのデザインを自分好みのデザインにしたくて、「ここの部分だけデザインを変えたいけど、どこを触ったら良いんだろうか」と悩んでいる人もいらっしゃると思います。

WordPressでは標準で追加CSSという機能で、管理画面からCSSを追記編集することができます。

この記事では、WordPressの追加CSS機能を使った編集のやり方を解説します。

■追加CSSを記述するエリア
CSSを書く場所

■外観＞カスタマイズ＞追加CSS

WordPressの追加CSS機能の特徴や注意点

WordPressの追加CSSとは、WordPressの管理画面(カスタマイズ＞追加CSS)から直接CSSを追加できる機能です。

追加CSSはテーマファイルのソースコードを編集することなく管理画面から簡単に追加することができるので、比較的初心者の方でも触りやすい機能です。

追加CSSは親テーマにアップデートがあっても編集内容は影響を受けず安心です。

追加CSSの注意点

追加CSSの画面はそこまで大きくないので、たくさんコードがある見えずらく管理しにくくなります。
追加CSSの記述内容は利用テーマに保持されます。テーマ変更(親から子テーマへの変更含む)すると追加CSSに追加した記述内容がリセットされます。
追加CSSはあくまでもCSSのみ編集できる機能です。HTMLやPHPファイルを追加する際は子テーマを利用する必要があります。

+ CSSを編集することでできる主な内容

補足になりますが、CSSとはCascading Style Sheetsの略で、CSSを編集することで、HTMLに装飾（デザイン）を加えることが可能になります。

下記画像では、Lorem Ipsum という文字（HTML）をCSSで編集することで、CSS編集前と編集後ではだいぶ印象が変わりますよね。

このように、CSSを編集することで綺麗な装飾（デザイン）になり、与える印象や、サイト全体のイメージをガラッと変えることができるようになります。

■CSSで出来ることの例

文字の装飾
フォントの変更
余白の調整
アニメーション...etc

【CSSの基本】CSSの基本とプロパティ一覧

WordPress 追加CSSの編集のやり方

追加CSSの設定方法

追加CSSを利用するには、管理画面の外観＞カスタマイズをクリックします。

追加CSSをクリックします。

追加CSSの画面が開きます。この部分にCSSを記述することができます。CSSの編集内容をリアルタイムでプレビューもできます。

なお、追加CSSはテーマごとに設定が保存されているため、テーマを切り替えるとCSS設定はクリアされますので注意してください。

既存のクラス名を上書きしてCSSを適用させる方法

CSSを適用させるには、既存のクラスに上書きするか、新しいクラスを追加して設定するかの2種類があります。

関連【HTML CSS】classとid属性の意味や違い・使い方

既存のクラスを流用してCSSを編集する場合、デザインを変更したい要素（HTML）にあたっているクラス（class）を確認する必要があります。

クラスの確認方法は、ブラウザの検証ツールを使用します。※今回はGoogle Chromeを利用した例で説明します。

検証ツールは通常の画面には表示されていなく、画面のどこでもいいので右クリック→検証をクリックすることで、検証ツールが表示されます。

検証ツールが開きます。

検証ツールを開いたら、下記画面キャプチャの矢印の部分をクリックします。

クリックすると（アクティブ状態の時は）青色になりますので、その状態でデザインを変更したい要素上にマウスをホバーします。

今回は、コンセプトという文字を装飾しますので、コンセプトの箇所でマウスホバーしてクリックすると、右側の検証ツールの一部がハイライトになりました。

このハイライトになっている箇所が、その対象の要素（コンセプトという文字）のHTMLになります。

ハイライトが当たっている箇所のHTMLと、そのHTMLにあたっているクラスは以下になります。

（※実際のクラス名は、同じ見出し(h2)でもご利用テーマや導入プラグインによって異なります。下記はデモサイト上の環境での一例です。）

<h2 class="is-style-vk-heading-default">コンセプト</h2>

装飾したいHTMLのクラス（is-style-vk-heading-default）を確認することができたので、そのクラスに対してCSSを適用させていきます。

CSSを記述する際は、クラス名の前に.（ドット）を記述する必要があります。
例）.is-style-vk-heading-default

.is-style-vk-heading-default {
color: #fff; /* 文字を白色 */
font-size: 100px;　/* 文字サイズを100px */
font-weight: bold; /* 文字を太く */
text-align: center; /* 文字を中央寄せ */
text-shadow: 0px 0px 24px #36a93b; /* 文字にシャドウをかける */
}

既存のクラスを流用してCSSを編集する場合、公開していなくてもリアルタイムでデザインが変わっていきます。

デザインが変更されない場合は、CSSに全角文字が含まれてないか？誤字脱字がないか？を確認した上で、それでも変更されない場合は、CSSの詳細度が原因の可能性があります。

とくに既存のクラスを流用する場合、CSSを書いてもうまく適用されない場合があります。

その場合、CSSの詳細度が影響している可能性が高く、詳細度に関しては少し難しいので、初心者の方は新しいクラスを追加して、CSSを適用させるやり方の方が詰まることなくうまくいくでしょう。

関連CSSセレクタの優先順位・詳細度・継承

新しいクラスを追加してCSSを適用させる方法

既存のクラスを流用してCSSを編集する方法のほかに、ブロックエディター上で任意のブロックに対して新しいクラスを追加して指定する方法もあります。

下記例では見出しブロック(コンセプトという文言)に対して設定する例です。

「コンセプト」という見出しブロックを選択して右メニューから高度な設定パネルをクリックします。

高度な設定パネルをクリックすると、下記画面キャプチャの追加 CSS クラスの入力スペースが表示されるので、任意のクラス名（本例では heading-custom）を追加して更新ボタンをクリック(保存します)。

この段階ではまだCSSは適用されておらずなにもレイアウトは変わりません。ここから追加CSSでCSSを記述していきます。

外観＞カスタマイズから、追加CSSをクリックします。

先程定義したheading-customというクラス名を追加CSSに記述します。

CSSを記述する際は、クラス名の前に .（ドット）を記述する必要があります。
例）.heading-custom

.heading-custom {
color: #fff;
font-size: 100px;
font-weight: bold;
text-align: center;
text-shadow: 0px 0px 24px #36a93b;
}

ここに記述する場合はリアルタイムでデザインが適用されないので、プレビューをクリックして期待通りのデザインが適用されているかを確認しましょう。

CSSが適用されない場合

初心者の方がWordPressの追加CSS機能を使った際、CSSが適用されない場合が多々ありますが、その多くはクラス名が全角文字になっていたり、誤字脱字があったり、CSSのプロパティや値が間違っているのが原因です。

CSSが適用されない場合

全角文字はないか
誤字脱字はないか
使っているプロパティや値は正しいか

追加CSSと子テーマの使い分け・いろいろなカスタマイズ方法

WordPressをカスタマイズする方法としては追加CSSの他にも、「テーマカスタマイザーによる設定」そして「子テーマ」があります。

それぞれの違いは下記の通り。

簡単	テーマカスタマイザー(外観＞カスタマイズ)	WordPressのテーマのレイアウトや表示に関する設定を行う機能です。ご利用のテーマが用意した設定項目に限りますが、共通の色やデザインはここで変更できる場合も多いです。関連WordPressカスタマイズ方法とカスタマイザーの使い方
普通	追加CSSによるCSSカスタマイズ	追加CSSは、テーマカスタマイザーから直接CSSを編集できる機能です。CSSの知識が必要ですが、管理画面から追記できるので比較的初心者の方でも触りやすいです。
やや難	子テーマによるカスタマイズ	子テーマは本格的にカスタマイズする場合に使う機能です。CSS編集に加えてテンプレート(xxx.php)編集やfunctions.php編集によりほぼどんなカスタマイズも可能です。関連WordPressで子テーマを作成してカスタマイズする方法

追加CSSは、サイトのデザインを変更する用途で数行〜数十行程度のCSSを追加する場合に役に立ちます。

一方、数百行のCSSを追加して本格的にサイトをカスタマイズする場合や、HTMLやPHPファイルを編集する場合は、子テーマの作成・利用を検討する必要があります。

■WordPress子テーマの概要

小規模なCSS設定であればこの追加CSS機能を利用。HTML、PHPやJavascriptまで編集する場合は子テーマといったような使い分け方をすると良いでしょう。

■追加CSSと子テーマのできることの違い

	子テーマ	追加CSS
用途	本格的にテーマカスタマイズしたい場合に向いている	数行〜数十行の小規模なCSS設定のみで済む場合に向いている
CSSの追加編集	◯	◯
テンプレート(xxx.php)の追加・編集	◯	×
難易度	やや難しい	簡単
更新方法	ファイルを修正してFTPでファイルアップロード	Web上の管理画面で更新
注意点	子テーマとはいえ、親テーマのPHPファイルの仕様やバージョンが大幅に変わった場合、再度子テーマのPHPファイルなどを再メンテナンスしなければならない場合があります。	追加CSSはテーマごとに設定保持されているので、追加CSSを設定した後で親テーマ→子テーマに切り替えると一旦リセットされます。（事前にコピーして再設定する必要があります。）

知っておきたいCSSの基本

追加CSSを利用する場合、CSSの基本を知らないとどうしても「うまくできない」といったケースが多いです。

ここでは、最低限知っておきたい基本についてご紹介します。

CSSセレクタで指定するクラス名やID名とは

例えば以下のようなHTMLコードがあり、2番目と4番目のpタグのみ文字色を赤色に変更したいとします。

<body>
  <p>ここは黒文字です</p>
  <p>ここは赤文字です</p>
  <p>ここは黒文字です</p>
  <p>ここは赤文字です</p>
</body>

<body>

ここは黒文字です

ここは赤文字です

ここは黒文字です

ここは赤文字です

</body>

この場合、以下のように「タグ名{}」といった書き方だと全てのpタグに対してスタイルが適用されてしまいうまくいきません。

p {
  color: red;
}

p {

color: red;

}

そこで特定のタグ(今回の場合は2番目と4番目のpタグ)のみにスタイルを効かせたい場合は、以下のように該当するタグにclass属性を指定し、classセレクターを使ってスタイルを指定してあげる必要があります。

<body>
  <p>ここは黒文字です</p>
  <p class="red">ここは赤文字です</p>
  <p>ここは黒文字です</p>
  <p class="red">ここは赤文字です</p>
</body>

<body>

ここは黒文字です

ここは赤文字です

ここは黒文字です

ここは赤文字です

</body>

.red {
  color: red;
}

.red {

color: red;

}

classとid属性の役割は特定のタグのに目印をつけることです。

特定のタグにclass名や・id名を設定することで、指定したタグだけにCSSでスタイルを適用させたり、javascriptで操作することができるようになります。

<div id="main" class="container">テキストテキストテキスト</div>

1	<div id="main" class="container">テキストテキストテキスト</div>

関連【HTML CSS】classとid属性の意味や違い・使い方

CSSセレクタの優先順位

CSSを使って任意の要素に対して適切なスタイルを設定するには、CSSセレクタの種類や指定方法を理解しておく必要があります。

h2などの要素で指定したものを要素セレクタ、前述のクラス名で指定したものをclassセレクタ、id名で指定したものをidセレクタと言います。

要素セレクタ　例 h2{ color:red; }
classセレクタ　例 .red{ color:red; }
idセレクタ　例 #title{ color:red; }
各セレクタを組み合わせて指定も可能※

※セレクタは#title h2 {font-size:40px;}のように組み合わせることができます。

あるセレクタをx、もう一方のセレクタをyとするとき、下記のような組み合わせがよく使われます。

方法	意味
x y{ ... }　　※xとyに半角スペースあり	xで指定した要素の中のy
xy{ ... }　　※xとyに半角スペースなし	xかつyの要素
x,y{ ... }　　※xとyにカンマあり	xおよびyの要素
x>y{ ... }　　※xとyに>あり	xの要素直下にあるyの要素

xで指定した要素の中のy (x y{...})

header p{・・・}のように複数のセレクタを半角スペースを空けて記述すると、header要素の中にあるp要素という絞り込み指定ができます。

■header要素の中のp要素にのみスタイルを指定している例

<body>
  <header>
    <p>header要素の中のp</p>
  </header>
  <p>header要素の外のp</p>
</body>

<body>

header要素の中のp

</header>

header要素の外のp

</body>

header p {
  color: red;
}

header p {

color: red;

}

■表示例

上の例では、headerタグの中にあるpタグのみを絞り込んで赤文字に変更しています。

関連CSSセレクタの種類や指定方法
関連CSSセレクタの優先順位・詳細度・継承

主なCSSプロパティ

ここでは、よく使うCSSの設定項目や設定値の例を下記に挙げます。詳しくはそれぞれのリンクで説明していますのであわせてご参考ください。

カテゴリ	プロパティ	意味
文字に関するスタイル	color	文字の色
	font-size	文字の大きさ(フォントサイズ)
	font-weight	文字の太さ
	text-decoration	テキストの装飾
	font-family	文字の字体
テキストレイアウトに関するスタイル	text-align	テキストや画像の水平方向の位置
	line-height	行間
	letter-spacing	字間
	vertical-align	イテキストや画像の縦方向の位置
枠線に関するスタイル	border	枠線
枠線に関するスタイル	border-radius	枠の丸さ
横幅と高さに関するスタイル	width	横幅
	height	高さ
	calc()	※高さや横幅を計算する関数
余白に関するスタイル	margin	外部余白
	padding	内部余白
	box-sizing	ボックスの算出方法(borderやpaddingをwidthやheightに含めるか)
背景に関するスタイル	background	背景全般
表示に関するスタイル	display	インライン・ブロックレベルの変更：inline、block、inline-block 非表示：none フレックスボックス(横並び)：flex グリッドレイアウト(横並び)：grid
影に関するスタイル	box-shadow	ボックスの影
影に関するスタイル	text-shadow	テキストの影
位置に関するスタイル	position	相対位置：relative 絶対位置：absolute 絶対位置(スクロールしても固定)：fixed スクーロール途中から固定：sticky
	top	上からの位置
	bottom	下からの位置
	left	左からの位置
	right	右からの位置
	z-index	重なりの順序指定
要素のはみ出しに関するスタイル	overflow	そのままはみ出して表示:visible はみ出し部分を非表示:hidden はみ出し部分をスクロール表示:scroll
要素の回転、移動、伸縮、変形	transform	要素の回転:rotate() 要素の移動:translate() 要素の拡大縮小:scale() 要素の傾斜:skew()
アニメーションに関するスタイル	transition	簡単なアニメーションの実装
アニメーションに関するスタイル	keyframes/animation	より多彩なアニメーションの実装
横並び(浮動)に関するスタイル	float	横並び(浮動)
横並び(浮動)に関するスタイル	clear	横並び(浮動)の解除