初心者向け!『追加CSS』を使ったCSS編集のススメ【WordPress】

追加CSS
藤依しの

とりあえず見た目から入る、藤依しのです。

「ブログを始めたばかりの奴は、デザイン気にするよりも記事を書け!」

なんてよく言われますが、
そうは言っても、少しくらい見た目に気を使いたいのが我々ブログ初心者というもの。

ななしちゃん
ななしちゃん

見た目は『やる気』に繋がりますもんね。

藤依しの

そこで今回は、「WordPressでCSSをいじって、ちょっと見た目を変えたい」時に役に立つ『追加CSS』の機能について説明したいと思います。

スポンサーリンク
スポンサーリンク

追加CSSとは?

藤依しの

CSS編集でよく聞くのは『テーマの編集』ですね。

WordPress編集画面の左側メニューバーから
外観⇛テーマの編集と移動することで、『テーマの編集』画面が開きます。

この場所にCSSを記載することで、画面上のデザインを変更できるのですが、
実はもう一箇所、CSSを編集できる場所があります。

それがこの『追加CSS』

追加CSS

同じく、WordPress編集画面の左側メニューバーから
外観⇛カスタマイズ⇛追加CSSと移動することで、『追加CSS』の画面にたどり着きます。

追加CSSの場所
藤依しの

CSS自体は『テーマの編集』『追加CSS』どちらに書いても、結果は変わりません。

しかしそれでも僕は、
少なくとも初心者のうちは『追加CSS』を使うことをオススメします。

『テーマの編集』よりも『追加CSS』が良い理由

確認しながら編集できる

藤依しの

主な理由がこれです。

初心者がCSSを変更する場合、大抵調べたコードを貼り付けるわけですが、環境によっては上手くいかない時もあります。

そんな時、何故上手くいかないのか考えながら、プロパティを変えたり値を変えたり、試行錯誤するわけですが…

いちいち『更新』押して、
実際の画面を開いて確認するの、面倒じゃないですか?

『追加CSS』を使うと、その煩わしさが解決します。

なんと追加CSSに書き込んだ内容は、右側のプレビューですぐに確認ができるのです。

追加CSS
藤依しの

更新ボタンを押す必要もないので、手間が省けますね。

親テーマ・子テーマを気にする必要がない

藤依しの

初心者にとってわかりづらいのが、CSSにおける『親テーマ・子テーマ』です。

『CSSは親テーマではなく、子テーマに追加せよ』

というのが、WordPressテーマ編集による鉄則なのですが

なぜかというと『親テーマに独自のCSSを書き込んでいると、バージョンアップがあった際にそれが上書きされ消えてしまうから』なのです。

親テーマから独立した『子テーマ』にCSSを追加することで、親テーマのバージョンアップがあっても、追加したCSSがそのまま使用できます。

「なーんだ、それだけの話か」

と思うかもしれませんが、問題は子テーマを自分で作らなきゃいけない場合があるという点です。

Webの知識がない初心者にとって、ただCSSを編集したいだけなのに、そこまでするのは手間でしょう。

そんな時に役に立つのが『追加CSS』

『追加CSS』はバージョンアップの影響を受けないため、子テーマを作る必要がなくなります。

あくまで「CSSを変えたいだけ」であれば『追加CSS』で事が足りるのです。

『追加CSS』の使い方

藤依しの

追加CSSは、style.cssと同じように使います。
あまり説明することもないのですが、基本的な機能だけ話しておこうと思います。

予測変換はTabキーで

藤依しの

『color』や『width』『font-size』などよく使うプロパティは、自動で入力されて欲しいですよね。

ご安心ください。
『追加CSS』ではほぼ全てのプロパティが予測変換に表示されます。

予測変換

表示された変換候補をカーソルで選択肢、『Tabキー』を押すことで自動入力されます。

コロン(:)やセミコロン(;)までは入力されませんが、
ブラウザでこれだけできれば十分だと思います。

3段階のレスポンシブデザイン

藤依しの

レスポンシブデザインとは、PC・タブレット・スマホで、それぞれ微妙にデザインを変えるCSSの機能です。

大きさを指定することで、画面サイズに応じたデザインを適用できます。

本来なら、「CSSを更新後、スマホやタブレット用の画面サイズでページを開いて確認」といったまどろっこしい作業が必要ですが…

『追加CSS』ならなんと『ワンクリック』で切り替え可能です。

レスポンシブ

プレビューの機能がフル活用されていると言っても過言ではないでしょう。

画面の移動もできる

藤依しの

特定のページだけにCSSを適用したい。
と言った場合も、『追加CSS』のプレビューで問題なく確認できます。

プレビュー画面から該当のページをクリックすることで、プレビューの中だけページが移動します。

あるページに反映させたCSS、別のページで悪さをしていないかちゃんと確認したい。なんて時にも、プレビュー画面だけで全て確認できてしまうのです。

更新は『公開ボタン』から

藤依しの

CSSを保存するには上の『公開』ボタンを押します。

公開

『公開』を押すと、実際に外部公開されているWebページにCSSが反映されます。

もし間違ったCSSの状態で公開をしたり、エラーの出ている状態で公開してしまっても大丈夫です。
もう一度、追加CSS画面から不要な行を削除し『公開』しなおすだけで、サイトデザインは元に戻ります。

とはいえ『テーマの編集』でCSSを変更する場合と違って、あらかじめプレビューで確認できるので、間違ったデザインを公開してしまう可能性はぐっと減ることでしょう。

『検証』と合わせればさらに簡単に

藤依しの

多くのブラウザで提供されている『検証機能』は『追加CSS』の画面でも機能します。

たとえば『chrome』
右クリックから『検証』ボタンを押すことで、プレビューの横に検証画面が現れます。

CSSの編集画面、プレビュー画面、HTMLの検証画面が一つの画面に収まるので、CSS編集がより簡単に。

とても便利です。

ななしちゃん
ななしちゃん

ただ、プレビュー画面が小さくなるので、タブレット用のデザインに変わることがあるのが難点ですね。

藤依しの

そのへんは上手く調整が必要ですね。

何にせよ、初心者のうちは『追加CSS』を使った方がわかりやすいと思います。

というわけで以上、『追加CSS』に関する説明でした!