【初心者向け】ワードプレスのCSSを編集/追加/調整する方法

CSSとは？

ワードプレスを使い始めて間もない方は「そもそもCSSって何？」って方も多いと思います。

簡単に説明させていただくと、CSSと言うのは、Webサイトの見た目を整えるための指示書です。

CSSの基本的な使い方

CSSはHTMLとセットで記述して、訪問者のWebブラウザに「こんな風に表示してね」ということを伝えていきます。

HTMLで文章の意味を示して、”クラス”という名前付けをします。CSSはこの”クラス”に対して適用していきます。例を見ていきましょう。

<span class="red">文字を赤く</span>

.red{
   color: red;
}

ブラウザでの表示

文字を赤く

CSSの記述ルール

CSSは指定したセレクタ”全て”に適用されるので”red”というクラスを振ったHTMLタグの文字は全て赤くなります。

上の例では”クラス”を振りましたが、CSSのセレクタは、タグを直接指定する事もできますし、”id”と言うページ内で固有の名前を振る事も可能です。

CSSの記述方法は以下の通り。

• タグの指定は記号なし。
• クラスの指定はクラス名の前に”.”[ドット]を入れる
• idの指定はid名の前に”#”[シャープ]を入れる

これらのルールを組み合わせ、応用して、かなり複雑な位置でもCSSを指定していくことが可能になります。

<span class="bold">文字を太く</span>

<span id="big" class="bold">文字を太く大きく</span>

.bold{
   font-weight: bold;
}
#big{
   font-size: xx-large;
}

ブラウザでの表示

文字を太く
文字を太く大きく

ワードプレスのCSSを編集

ワードプレスでCSSを編集する方法はいくつかありますが、一番簡単なのは管理画面のタブから直接編集する方法です。WordPress5.1.1を例に編集方法を紹介します。

ワードプレス管理画面の「外観　→　テーマエディタ」を選択。

更に表示された画面の右側に編集するファイルを選択する窓がありますので[style.css]を選択します。

CSSの場合はこの画面で編集しても問題が起きることは少ないと思いますが、拡張子がphpのファイルの編集はこの画面から行わないようにしましょう。少しでも記述を失敗するとサイト自体が表示されなくなり、管理画面にすら戻れなくなります。

まとめ

サイトの見た目を少し変えたいなー、と言う場合はCSSを編集することになると思います。使用者の多いテンプレートは見た目が被ってしまうのでイヤと言う人もCSSを覚えれば差別化を図れるので挑戦してみるのもアリですね。