CSSが使えると、サイトのデザインにオリジナリティが出てきます。
WordPressでサイトを作り始めたころは、CSSというのは難しそうで手を出しにくいですよね。
そもそも何ができるのかあまり分かっていないので、勉強してまで使ってみようという気になりません。
しかし、実際に使ってみるとCSSの便利さが分かりますよ。
今回は、そもそもCSSとは何なのかと、CSSの追加・編集方法を紹介します。
そもそもCSSとは？
「CSS」とは、プログラム言語の一種で、ウェブページのスタイルを指定することができます。
・・・どういうこと？
言葉で意味を説明されても、いまいちピンときませんよね。プログラム言語だから難しそう、というような印象しか受けません。
もう少しざっくりと、順を追って意味を捉えてみます。
Webサイトのデザイン
ホームページなどのWebサイトを作る時には、文字を使います。（当たり前だ）
しかし、ただひたすら文字が並べられただけのサイトはほとんどありませんよね。
どのサイトも、読みやすいようにデザインを工夫しています。
- 文章の文字とはデザインが大きく異なる「見出し」をつける
- 注目してほしい部分を太字にして色を変えてみる
- リンクが貼ってあることが分かるように文字を青色にし、下線をを引いている
デザインが綺麗なサイトはスイスイ読み進められるので良いですよね。
逆に、いいことが書いてあったとしても、デザインがめちゃくちゃだとあまり読む気になりません。
サイトを作る上で、デザインはとても重要
サイトのデザインを整える際に使われるのが「スタイル」です。
スタイルは各種書式の集合
サイトを作るうえでデザインは大切ですが、1つ1つ手動で設定すると大変ですよね。
例えば、見出しを作る時には「文字の大きさを18pt」「太字を設定」「まわりを四角く囲む」「背景に色を塗る」「文字の色を目立つものに」・・・
毎回手動で設定するとしたら、見出しを1つ作るだけで一苦労ですし、2つ目の見出しを付ける際に1つ目をどうしたか思い出すのも大変です。
そこで登場するのが「スタイル」です。
ざっくり言うと、「スタイル」とは、色やサイズなどの書式設定の集合みたいなものです。
先ほどの変更をまとめて「見出し2のスタイル」としておけば、次からは「見出し2にする」としただけで見た目がすべて整います。すごく便利ですね。
「スタイル」を使えば、書式設定をまとめておくことができる
そんなスタイルを設定するために使われているのが「CSS」です。
CSSはスタイルを指定する言語
やっと「CSS」の話に戻ります。最初の説明は以下の通りでした。
「CSS」とは、プログラム言語の一種で、ウェブページのスタイルを指定することができます。
なんとなく意味が分かるようになった気がしませんか？
これまでのことをまとめると・・・
- Webページは「デザイン」が大切
- 「デザイン」を整える際、書式設定を1つにまとめた「スタイル」があると便利
- 「スタイル」を指定するために使われている言語が「CSS」
ということですね。
「見出しは18ptで太字、下線を引き、文字色は赤、背景は緑にする」という風に、日本語で伝えることができれば楽なのですが、パソコン相手ではそうはいきません。
日本語の代わりに、パソコンが理解できる「CSS」で伝えているということです。
では、CSSが分かるとどんなメリットがあるのでしょうか？
CSSが分かるとできること
WordPressでサイトを作成するだけなら、CSSの知識はゼロでも問題ありません。
実際、私もこのサイトを作り始めたときは全く知識がありませんでしたが、サイトの公開はできました。
しかしCSSについて勉強してみると、最初の頃はものすごく面倒なことをし、しかもオリジナリティがないサイト作りをしていたのだと知ることができました。
CSSが分かると具体的に何ができるのかを紹介します。
オリジナルデザインのスタイルが作れる
WordPressでサイトを作っている場合、使用しているテーマによってスタイルが異なります。
このサイトは「LION MEDIA」というテーマを使用していますが、見出しのスタイルが16パターンも用意されています。これだけあれば気に入ったのが見つかるかもしれません。
関連：テーマ「LION MEDIA」が無料とは思えないクオリティ！おすすめポイントと使い方
関連：高性能無料テーマ「LION MEDIA」がVer2.0.0になり使いやすさパワーアップ
しかし、ほとんどの場合はテーマによって見出しなどのスタイルが決まっています。
そのため、同じテーマを使用しているサイトがある場合、似たデザインになってしまいます。
CSSの知識があれば、自分でオリジナリティのあるデザインを作ることができます。
見出しやリンクテキストなどのスタイルは、CSSを使って設定されています。
CSSを編集することで、自分の好きなようにスタイルを設定することができます。
工夫することで、オリジナリティに溢れたデザインのサイトを作ることができます。
効率の良いデザイン設定ができる
初めてサイトを作り始めた当初、CSSを知る前は、実はものすごく面倒なことをしていました。
リンクを貼った文字列に、手動で下線の設定をしていたのです。お恥ずかしい限りです・・・。
リンクテキストもスタイルでデザインが設定されています。
そのため、CSSを使用すれば、リンクテキストのスタイルを編集することができます。
現在はスタイルを設定をしたことにより、手動では何も設定しなくてよくなりました。
文字にリンクを貼っただけで自動的に青い文字で下線が設定されます。とってもラクチンです。
関連：CSSを利用してリンクテキストのデザインを変更する方法（テンプレートあり）
サイト全体のデザイン変更が楽
最初は良いと思っていたデザインも、時間が経つと変えてみたくなることがありますよね。
もし、記事内の文字に手動でデザインを設定していた場合は、すべての記事を一つ一つ変えていく必要があります。
記事数が多ければ多いほど大変な作業になってしまいます。
しかし、CSSを使ってデザインを設定してあれば、その変えたい部分を編集するだけで終了です。
変更したスタイルが適用されている箇所があれば、すべての記事の適用箇所のデザインが変更されます。
大幅な変更もスムーズにできるので、とても便利です。
このように、サイトのデザインをするならCSSを知っておいて損はありません。
自分でオリジナルのスタイルが作れる
効率よく整ったデザインの記事が作成できる
サイトデザインの変更が楽に行える
では、CSSはどのように編集を行うのでしょうか？
次は、CSSの使い方を見ていきます。
スポンサーリンク
CSSの追加・編集方法
WordPressを使用している場合のCSSの追加・編集方法を見ていきます。
CSSを使用する場合は、子テーマを使用している方が望ましいです。
関連：子テーマとは？カスタマイズに子テーマを使用すべき理由と使い方
子テーマではない場合も、CSSの編集自体は同じ手順で行うことが可能です。
それでは、CSSの編集方法を見ていきます。
CSSの編集はスタイルシートで行う
CSSは、テーマのスタイルシートに記入することになります。
まずは、WordPressの管理画面「外観」の「テーマの編集」をクリックします。
画面の右側から「スタイルシート（style.css）」をクリックします。
スタイルシートの位置は、使用しているテーマによって上の画像とは異なります。
これでスタイルシートが開けました。ここにCSSを入力していくことになります。
子テーマを使用している場合は、自分が設定したいスタイルを入力するだけです。
子テーマを使用していない場合は、もともとたくさんのスタイルが書いてあるため、必要な箇所を探して修正する感じになります。
以上がWordPressでのCSSの追加・編集方法になります。
今回のまとめ
CSSが何なのか、知っていると出来ること、WordPressでの追加・編集方法をまとめました。
CSSはスタイルを作る際に使用されるプログラム言語の一種で、使えると自分だけのオリジナルスタイルを作ることができます。
CSSを使えると、サイトのデザインにオリジナリティが出せ、効率良くサイトを作ることができるようになるので、基礎知識だけでも知っておくといいですね。
追加や編集方法は簡単にできます。実は、CSSの知識がなくても試してみることは可能です。
CSSを使用したスタイルは、インターネット上に数多く公開されています。
そのため、コピぺするだけでCSSを使ってみることができます。
しかし、内容が全く分からないと使ってみるのは不安ですよね。それに、大体イメージ通りのデザインでも、ほんの少しだけ変えたいこともあるかもしれません。
そんな時は、質問サイトを利用しましょう。
私がよく利用している質問サイトが「teratail（テラテイル）」です。
teratail（テラテイル）はプログラミング専門の質問サイトで、メールアドレスだけで登録できます。初心者に対しても優しく丁寧に回答してくれる方が多いのが特徴です。
わからないことが多くても、まずはコピペでいいから実際にCSSを使ってみたい方にオススメです。
関連：プログラム系質問サイト「teratail（テラテイル）」が初心者に優しすぎてスゴイ
質問前に基礎知識だけでも持っておきたい、という方は、動画講座サイト「ドットインストール」が勉強になります。基本を学ぶ動画は、無料で視聴することができます。
1本の動画が短くまとまっているので、空いた時間に少しずつ見ることができます。
CSSの無料講座は、全17回のコースとなっています。基礎だけでいいからお金をかけずに学びたい方にオススメです。
CSSの書籍で分かりやすかったのは「ああしたい、こう変えたいが手にとるようにわかる CSS基礎」です。
かみ砕いて書かれているので、初めてCSSを勉強する方にオススメです。
デザインも綺麗で見やすいので、スラスラ読み進めることができます。
「ああしたい、こう変えたいが手にとるようにわかる」というタイトルに偽りなしです。
基礎知識だけでもできることが増えますので、少しずつ勉強してみるとサイト作りが楽しくなります。
ぜひ、CSSを活用してオリジナリティのある素敵なデザインのサイトを作りましょう！
ここまでお読みいただき、ありがとうございました。
