かつをくん この記事ではワードプレス初心者の方向けにCSSで、サイトの見た目を装飾する方法を解説していくで
わかめちゃん 初のキャラクター記事だな
CSSとは？
ワードプレスを使い始めて間もない方は「そもそもCSSって何？」って方も多いと思います。
簡単に説明させていただくと、CSSと言うのは、Webサイトの見た目を整えるための指示書です。
かつをくん CSSはサイトの記事やレイアウトを整えるためのマークアップ言語やね
わかめちゃん HTMLって言葉もよく聞くけど、あれは何なの？
かつをくん CSSに対してHTMLは、どちらかと言うと文章やパーツの意味を示すためのマークアップなんよね
CSSの基本的な使い方
CSSはHTMLとセットで記述して、訪問者のWebブラウザに「こんな風に表示してね」ということを伝えていきます。
HTMLで文章の意味を示して、”クラス”という名前付けをします。CSSはこの”クラス”に対して適用していきます。例を見ていきましょう。
0 1 2 | <span class="red">文字を赤く</span> |
0 1 2 3 4 | .red{ color: red; } |
ブラウザでの表示
文字を赤くわかめちゃん おおっ！まじか。赤くなったぞ
かつをくん 文字の色以外にも色んな表現ができるよ
CSSの記述ルール
CSSは指定したセレクタ”全て”に適用されるので”red”というクラスを振ったHTMLタグの文字は全て赤くなります。
上の例では”クラス”を振りましたが、CSSのセレクタは、タグを直接指定する事もできますし、”id”と言うページ内で固有の名前を振る事も可能です。
CSSの記述方法は以下の通り。
- タグの指定は記号なし。
- クラスの指定はクラス名の前に”.”[ドット]を入れる
- idの指定はid名の前に”#”[シャープ]を入れる
これらのルールを組み合わせ、応用して、かなり複雑な位置でもCSSを指定していくことが可能になります。
0 1 2 3 4 | <span class="bold">文字を太く</span> <span id="big" class="bold">文字を太く大きく</span> |
0 1 2 3 4 5 6 7 | .bold{ font-weight: bold; } #big{ font-size: xx-large; } |
ブラウザでの表示
文字を太く文字を太く大きく
わかめちゃん いきなり下ネタ、ブッ込んで来たな、コイツ
かつをくん ちょっと黙ろうか
タグ指定 ＞ クラス指定 ＞ id指定
ワードプレスのCSSを編集
ワードプレスでCSSを編集する方法はいくつかありますが、一番簡単なのは管理画面のタブから直接編集する方法です。WordPress5.1.1を例に編集方法を紹介します。
ワードプレス管理画面の「外観 → テーマエディタ」を選択。
更に表示された画面の右側に編集するファイルを選択する窓がありますので[style.css]を選択します。
わかめちゃん 結構簡単に編集できるんだな
かつをくん この他にも手持ちのテキストエディタで編集して、FTPでアップロードする方法もあるんやで
わかめちゃん 編集失敗したらヤバいんじゃねーの？これ？
かつをくん CSSを追記する分には、いきなりサイトの表示がされなくなったりすることはないと思うよ。元々ある記述を変更する場合なんかはバックアップを取っておいた方が無難かな。
CSSの場合はこの画面で編集しても問題が起きることは少ないと思いますが、拡張子がphpのファイルの編集はこの画面から行わないようにしましょう。少しでも記述を失敗するとサイト自体が表示されなくなり、管理画面にすら戻れなくなります。
まとめ
サイトの見た目を少し変えたいなー、と言う場合はCSSを編集することになると思います。使用者の多いテンプレートは見た目が被ってしまうのでイヤと言う人もCSSを覚えれば差別化を図れるので挑戦してみるのもアリですね。
ワードプレスのCSSに関連する記事を紹介しています。
只今、イメージセットを取得中です。
CSS設計完全ガイド ～詳細解説＋実践的モジュール集
只今、カスタマーの評価を取得しています。
￥3,428 (2020-05-29 以降 - 追加情報商品価格と取扱状況は記載された日時の時点で正確で、また常に変動します。Amazon のサイトに表示された価格と取扱状況の情報は、この商品が購入されたその時のものが適用されます。)
