CSSでカスタマイズをすると聞くと、難しく聞こえますよね。
実際のところ、あまりHTMLやCSSなどのWEBデザインに関わったことがなければ難しいなぁと感じます。
わたしもブログを1年していますが、きちんと理解はできていません。笑
そこで、CSSでカスタマイズをするにあたり、とりあえず知っておきたいカンタンなCSSの仕組みを2つだけ解説していきます。
- 「CSSでデザインを登録し、HTMLで呼び出す」ことが基本
- プロパティでさらにカスタマイズができる
この2つの仕組みを理解しておけば、あとは応用である程度のカスタマイズができるようになります。
ここではワードプレスでのカスタマイズを中心に解説していくね！
INDEX
カスタマイズの基本は「CSSでデザインを登録し、HTMLで呼び出す」ということ
ワードプレスで自分の思ったとおりのデザインをカスタマイズしようと思うと、CSSと、場合によってはHTMLを利用することになります。
大ざっぱに言うと、CSSでデザインを登録して、HTMLで使いたいときに呼び出すという感覚ですね。
わたしは初めはこの感覚がよく分からなかった…。
ワードプレスでもっと具体的に言えば、CSSは、「外観」→「テーマの編集」→「スタイルシート（CSS）」にあたります。
そしてHTMLは、記事を実際に書くときに、CSSで登録したデザインを呼び出す感じです。
この記事もCSSで記述した内容を呼び出していて、HTMLはこんな感じになっています。
<span class="keikou">の部分でデザインを呼び出しています。
実際の例
実際の例を見てみましょう。
例えばブログの記事で、蛍光ペンを引きたいとします。
まずはこの蛍光ペンのデザインをCSSでします。
そして記事の中で、先ほどの蛍光ペンのデザインを呼び出します。
すると記事を見ると、画面上では蛍光ペンを引いたようなデザインになります。
おぉ～！！
こうやって蛍光ペンはデザインされていたんだね！
CSSでデザインをして、HTMLで使いたいところで呼び出して、初めてわたしたちの目には蛍光ペンが引いてあるように見えるわけです。
HTMLの呼び出し方
CSSでデザインをしてHTMLで呼び出しをしますが、呼び出すときは、セレクタ名またはクラス名を指定します。
セレクタ名またはクラス名というと分かりづいので、大ざっぱに言ってしまえば、「CSSでデザインしたときとHTMLで呼び出すときの、共通の名前」という認識でOKです。
先ほどの蛍光ペンの例でいうと、「keikou」がクラス名で、共通の名前の役割を果たしています。
この名前を一致させておかないと、うまく呼び出せないんだね。
そうそう。CSSでは「ポチ」って名前なのに、HTMLで「シロ」って呼んでも来てくれない感じかな。
CSSとHTMLで呼び出す名前が違っていれば、当然うまく表示されません。
セレクタ名またはクラス名は、CSSとHTMLで一致させておきましょうね。
CSSでデザインをしてHTMLで呼び出すことを理解すれば、コピペだけで割といける
「CSSでデザインをしてHTMLで呼び出す」っていうのは分かったかな？
うーん…。なんとなく分かった…かな。
「CSSでデザインをしてHTMLで呼び出す」ことさえ理解できれば、とりあえずCSSとHTMLのコピペだけでカスタマイズができるようになります。
さやろぐでも、他のブログやホームページでも、カスタマイズ記事にはCSSとHTMLのふたつを記述して解説しているサイトはたくさんあります。
とりあえずCSSとHTMLにコピペしてみましょう。
ちなみに失敗したときのために、カスタマイズ前にはバックアップをした方がいいよ！
カスタマイズ前のHTMLやCSSをメモ帳にコピペしておくとかでもいいね。
失敗したときに元に戻せるようにはしておきましょう！
CSSで色や大きさなどの変更をしてさらにカスタマイズを！
「CSSでデザインをしてHTMLで呼び出す」ことを理解すれば、コピペだけでもカスタマイズはできます。
ただ、自分のブログに合ったカスタマイズをしたいこともありますよね。
- 色を変えたい
- 文字の大きさを変えたい
- 余白を調整したい
こういったデザインの変更は、CSSのプロパティの値を指定してカスタマイズします。
CSSの「プロパティ」とは、{}内に記述されている部分を指します。
上記の例で言うと、以下のような指定をしています。
| color: blue; | 文字色は青色 |
| font-weight: bold; | 文字を太くする |
| font-size: 18px; | 文字の大きさは18px |
このように、CSSでデザインに関わるいろんなことを指定できます。
他にもプロパティの値を指定してあげることで、できるようになるカスタマイズはいろいろあります。
- 枠をつける
- 枠にタイトルをつける
- 余白の調整
- 位置の調整
- ボタン風のリンクを作る など
ただ、プロパティの値はかなりあって、ここでは紹介しきれませんので、変更したいときにググってみることをおすすめします。
例えば文字の大きさを変えたければ、「CSS 文字 大きさ」などでググってみるといいよ！
カスタマイズは基本を押さえてあとは応用していこう！
HTMLやCSSは、専門用語や使い方、ルールなどがたくさんあります。
ですがカスタマイズの基本は、「CSSでデザインをして、HTMLで呼び出す」ことです。
ちょっと用語を使って言えば、カスタマイズしたいところがあればセレクタ名を調べて、「色を変えたい」「余白を作りたい」「枠の角を丸めたい」などのデザインの部分を、プロパティで指定してあげればよいということですね。
これを理解しておけば、とりあえずコピペしかできなくても、ある程度のカスタマイズができるようになります。
そしてカンタンにカスタマイズできるのは、ブログ本体のデザインよりも、記事中に使うデザインです。
カスタマイズにあまり慣れていない方は、まずは練習がてら、記事で使うカスタマイズから始めてみることをおすすめします。
あなたのブログがもっとおしゃれになりますように！
