WordPress 追加CSSとは。追加CSSの使い方とCSS編集方法

WordPress

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

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

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

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

この記事でわかること

  • WordPressの追加CSS機能でCSSを編集するやり方
  • 無料でCSSの学習ができるサイト

追加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を編集することでできる主な内容

人に例えたイメージ)HTMLは人の構造を定義。CSSで十人十色に見た目を調整

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

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

CSSを編集することで何ができる?

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

CSSで出来ることの例

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

 

 

WordPress 追加CSSの編集のやり方

追加CSSの設定方法

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

CSSはどこに書けばいい?

 

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

追加CSSの場所

 

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

CSSを書く場所

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

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

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

  • 既存のクラスを流用する
  • 新しいクラスを追加する

ここから先は、CSSの基本的な書き方がある程度わかっている方向けの解説になります。

既存のクラスを流用する

既存のクラスを流用して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

追加CSS機能を使ってCSSを編集する例

.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 クラスの入力スペースが表示されるので、任意のクラス名(本例では heading-custom)を追加して更新ボタンをクリック(保存します)。

追加 CSS クラス

この段階ではまだCSSは適用されていません。

この時点では、まだなにもレイアウトは変わりません。ここから追加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が適用されない場合

CSSが適用されない場合は、全角文字はないか?誤字脱字はないか?プロパティや値に間違いはないか?を確認

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

CSSが適用されない場合

  • 全角文字はないか
  • 誤字脱字はないか
  • 使っているプロパティや値は正しいか
新しいクラスを追加した場合は上記3つをチェックして、既存のクラスを流用した場合は上記3つをチェックしてそれでも適用されない場合は、CSSの詳細度をチェックしましょう!

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

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

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を書く場所

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

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

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

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

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

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

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


 

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

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

WordPress(ワードプレス)の使い方総まとめ

WordPress(ワードプレス)の使い方  総まとめ版

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress