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



かつをくんかつをくん

この記事ではワードプレス初心者の方向けにCSSで、サイトの見た目を装飾する方法を解説していくで

わかめちゃんわかめちゃん

初のキャラクター記事だな

CSSとは?

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

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

かつをくんかつをくん

CSSはサイトの記事やレイアウトを整えるためのマークアップ言語やね

わかめちゃんわかめちゃん

HTMLって言葉もよく聞くけど、あれは何なの?

かつをくんかつをくん

CSSに対してHTMLは、どちらかと言うと文章やパーツの意味を示すためのマークアップなんよね

CSSの基本的な使い方

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

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

ブラウザでの表示

文字を赤く
わかめちゃんわかめちゃん

おおっ!まじか。赤くなったぞ

かつをくんかつをくん

文字の色以外にも色んな表現ができるよ

CSSの記述ルール

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

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

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

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

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

ブラウザでの表示

文字を太く
文字を太く大きく
わかめちゃんわかめちゃん

いきなり下ネタ、ブッ込んで来たな、コイツ

かつをくんかつをくん

ちょっと黙ろうか

CSSの適用範囲の広さ

タグ指定 > クラス指定 > id指定

ワードプレスのCSSを編集

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

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

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

わかめちゃんわかめちゃん

結構簡単に編集できるんだな

かつをくんかつをくん

この他にも手持ちのテキストエディタで編集して、FTPでアップロードする方法もあるんやで

わかめちゃんわかめちゃん

編集失敗したらヤバいんじゃねーの?これ?

かつをくんかつをくん

CSSを追記する分には、いきなりサイトの表示がされなくなったりすることはないと思うよ。元々ある記述を変更する場合なんかはバックアップを取っておいた方が無難かな。

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

まとめ

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