【初心者向け】WordPressのCSS(スタイルシート)編集の基礎

この記事では、WordPressのCSS編集の基礎を説明します。

先に概要です。
まず、CSSとはウェブページの見た目を整える言語のことです。
そして、WordPressでは「追加CSS」と「テーマのstyle.css」でCSSの編集ができますが、私は通常「テーマのstyle.css」でCSSを編集するようにしています。
CSSの具体的な書き方については別記事でまとめます。

一応、検証で使ったWordPressとテーマのバージョンを記載しておきます。
バージョンが異なると、表示も若干異なる場合があるからです。

CSSとはそもそも何？

「CSS」は「Cascading Style Sheets (カスケーディング スタイル シート)」の頭文字を取ったもので、ウェブページの見た目を整える言語です。

通常は「カスケーディング スタイル シート」とは呼ばず、「スタイルシート」もしくは「シーエスエス」と呼ばれていると思います。

CSSを記述する場所は3つです。

1. HTMLのタグ(本文)
2. HTMLのヘッダ
3. 外部ファイル(HTMLのヘッダで読み込む)

覚えておくのは優先順位があることと、現在は、3.(外部ファイルに記載)が一般的ということくらいですかね。
優先順位については、1.の優先度が最も高く、2.と3.に関しては後に読み込まれた方が優先されるようになっています。
例えば、「画像Aの枠線は、赤」という記述が2.にあるものの、「画像Aの枠線は、青」という記述が1.にあった場合、1.の方が優先度が高いため、画像Aの枠線は「青」になります。

WordPressでCSSを編集するときにいじる場所

WordPressでCSSを編集するときにいじる箇所は「追加CSS」か「テーマのstyle.css」のどちらかです。

追加CSSの編集

「追加CSS」は、ダッシュボードから「外観」→「カスタマイズ」と辿り、「追加CSS」をクリックすれば編集画面になります。

「追加CSS」への記載は、上述したHTMLのヘッダに記載することと同じです。
次に説明する「テーマのstyle.css」よりも後に読み込まれるため、優先度は高くなります。
また、編集しながらプレビューを確認できる利点もあります。
しかし、ヘッダにCSSを書くのは一般的ではない上、画面が小さく編集しずらいため、私は次に説明する「テーマのstyle.css」を編集するようにしています。

テーマのstyle.cssの編集

「テーマのstyle.css」は、ダッシュボードから「外観」→「テーマエディタ」と辿れば、編集画面になります。

注意点として、子テーマがある場合は子テーマを編集するようにした方が安全ですね。
もし親テーマのstyle.cssを編集すると、テーマのアップデート時、せっかく編集したCSSがリセットされる可能性があるからです。
編集するテーマの選択は右上の「編集するテーマを選択」欄でできます。

上述したように通常は「テーマのstyle.css」を編集するようにしています。
このブログでもCSS編集に関する記事を書いていますが、そこで編集しているのも「テーマのstyle.css」です。

おわりに

CSSが使えるようになると、記事作成だけでなく、デザインを整える楽しみも増えますよね。
この記事の続きや他のウェブページを参考に、CSSの知識を深めていって下さい。
では。

—
YouTube: ミサキさん

問い合わせ先
Mail: caprico.aries@gmail.com
Twitter: https://twitter.com/caprico_aries(無言フォローもお気軽に)