【追加cssとは】wordpressで追加CSSの使い方・CSS編集方法

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

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

この記事では、WordPressの追加CSS機能を使った編集のやり方を詳しく解説していきますので、ご自身のサイトのデザインをカスタムしたいとお考えの方は是非お役立てください。

追加CSS機能とは？特徴や注意点について

追加CSS機能と特徴

WordPressの追加CSS機能とは、WordPressの管理画面(カスタマイズ＞追加CSS)から直接CSSを追加できる機能です。CSSの編集内容をリアルタイムでプレビューもできます。

本来、WordPressでソースコードを変更する際は、子テーマを作成したりFTPソフトを利用しますが、追加CSS機能は例外で、それらを利用することなく管理画面から簡単に追加することができるので、比較的初心者の方でも触りやすい機能です。

通常親テーマのCSSファイルを直接編集するとアップデートで編集内容が消えてしまいますが、追加CSS機能は親テーマにアップデートがあっても編集内容は影響を受けず安心です。

追加CSS機能を利用する場面とそうでない場面

追加CSS機能は、サイトのデザインを変更する用途で数行〜数十行程度のCSSを追加する場合に役に立ちます。初心者にとって難易度の高い子テーマやFTPを利用せずに簡単に利用することができます。

一方、数百行のCSSを追加して本格的にサイトのデザインを変更するや、HTMLやPHPファイルを編集する場合は、追加CSS機能では機能不足のため、子テーマの作成・利用を検討する必要があります。

追加CSSの注意点

• 追加CSS機能欄はそこまで大きくないので、あまりにも沢山のコードを追加した場合ごちゃごちゃになり非常に見えずらくなります。
• 追加CSSの記述内容は利用しているテーマに保持されます。テーマ変更のほか、親から子テーマに変更したり（子テーマから親テーマも然り）すると追加CSSに追加した記述内容がリセットされてしまいます。
• WordPressの追加CSS機能は、あくまでもCSSのみ追加できる機能なので、HTMLやPHPファイルを追加する際は子テーマを利用する必要があります。

(補足)CSSを編集することでできる主な内容

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

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

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

 

WordPress 追加CSSの編集のやり方

追加CSSの設定方法

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

 

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

 

追加CSSの画面が開きます。この部分にCSSを記述することができます。

CSSを適用させる2種類の方法

CSSの書く場所がわかって早速CSSを適用させていきたいところですが、CSSを適用させるには2種類の方法があります。

既存のクラスを流用する

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

クラスの確認方法は、ブラウザの検証ツールを使用します。

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

検証ツールが開きます。

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

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

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

このハイライトになっている箇所が、その対象の要素（コンセプトという文字）の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: カスケーディングスタイルシート | MDN

新しいクラスを追加する

既存のクラスを流用して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のプロパティや値が間違っているのが原因です。

WordPressは、HTML, CSS, JavaScript, PHP を使って作られているCMSですが、これからWordPressを長く使っていく予定の方は、CSSだけでも使えるようになると、できることの幅が広がってくるので前向きに学習してみるのも良いでしょう。

【無料】CSSの学習ができるサイト web.dev

web.dev

公式サイト：https://web.dev/learn/css/

web.devとは、Googleが提供しているWebサイト計測・Webの技術（CSS以外の学習コンテンツ有り）に関する学習が無料（登録不要）でできるWebサービスです。

CSSとは？から始まり、あらゆるCSSの技術と正しい使い方について学習することができます。

CSSをマスターすることができれば、1からWebサイトを構築できたり、利用しているWordPressテーマのデザインをガラッと変えたりと、できることの幅が広がるようになります。

まとめ

まとめです。今回は、WordPressの追加CSS機能で編集するやり方を解説しました。

初心者の方は、CSSの編集をする際に思った通りのデザインにならなかったりしてつまずくことも多いでしょう。

そんな時は、今回紹介したweb.devのような無料で使えるサービスを使って学習してみて、それでもつまづくようでしたらお金を払ってスクールなどを利用して学習するのも良いでしょう。

今回は以上になります。最後までご覧いただきありがとうございました。

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室