HTML・CSSは詳しくないけどリストや囲み枠のデザインをアレンジしたい
こんにちは、きのです！
ブログを読んでくださる方、いつもありがとうございます。みなさんはわたしのモチベーションです＊
前回は、ブログで使う文字色についての記事を書きました。
programmingforbeginners.hatenablog.com
さて今回は、HTML・CSSは詳しくないよという人が、自分好みのリストや囲み枠にアレンジするときに見るポイントをお伝えしたいと思います。
この記事を読めば、HTML・CSSに詳しくなくても、他サイトからコピペしてきたHTML・CSSのソースを編集し、自分のブログに合ったデザインに変えられるようになります。
【 目次 】
■ おさえるのはたった２つだけ？！最速でアレンジをするためのポイント
□ 色
□ 外枠の太さ
■ まとめ
『そのまんまコピペ』からステップアップ
HTMLやCSSに詳しくないけれど、キレイなブログを作りたいと思っている人は、ブログにアレンジを加えるとき、
コピペするだけでお洒落なリストや囲み枠が作れるようなサイトをよく利用すると思います。
しかしその多くは、文字通り『コピペするだけ』。ということは、自分のブログのイメージと少しだけずれていたりする場合もあるはずです。
でも、HTMLやCSSの知識ないし、コピペしたものに手を加えて動かなくなったら怖い。試行錯誤する時間もなんだかもったいなく感じる。という方もいると思います。
しかし、実はアレンジは超簡単なんです。どんなに難しそうなソースだって、実際に編集するところは数カ所なんです。
おさえるのはたった２つだけ？！最速でアレンジをするためのポイント
コピペしてきたソースは完成品。大部分は変に手を加えるとうまく反映されなくなってしまいます。
ですが、変更しても全体に影響なく反映させることができる部分もあります。それは『色』と『外枠の太さ』です
色
色を変えるとすると、
・背景色
・文字色
・外枠の色
が挙げられると思います。
コピペしたソースコードをよくみてみると、『＃〇〇〇〇』というなんだかよくわからない文字と数字の羅列があるとおもいます。
それがカラーコードです。これを変えることで、色を変更することができます。
ちなみにこのカラーコードのところに、『black』『red』といった色の名前が直接書いてあることもあります。
それも気にせずに『＃〇〇〇〇』の形のコードを入れることができます。またその逆も可能です。
・背景を変えたい→background: #999999;
・文字色を変えたい→color: #000000;
・外枠の色を変えたい→border: 2px solid #000000;
borderの時は、border-topとかborder-leftとか上下左右でそれぞれ指定している場合があるので、変更し忘れがないように注意します。
外枠の太さ
枠を作る時は、主にborderを使用しています。そこに『◯px』という表示が必ずあります。そこを変更することで、太さを調節できます。
気をつけることは、わたしのブログの見出しのように、左と下だけの枠線、左右の枠線、上下の枠線など、一部だけ枠線を作る時の太さの比率です。
コピペした時は整っていてもその比率を無視して手を加えると不格好になりかねないので、注意しましょう。
実際のソースを見て理解する
See the Pen list by Sanae Sumi (@s-sanae) on CodePen.
See the Pen gOOjpYQ by Sanae Sumi (@s-sanae) on CodePen.
まとめ
一見難しく思えるHTML・CSSのソースですが、知識がなくともほんの一部分を編集してあげることで、あなたのブログに合うようにアレンジができます。
コピペじゃつまらない、なにか変化が欲しいと思っている方は是非挑戦してみてください。
枠のソースコードをコピペしてアレンジしてみましょう。
１.本記事のソースコードをコピーする
２.あなたのブログのCSSの編集画面またはブログ画面に行き、ペーストする
３.『色』と『枠』を編集してみる
４.確認する
最後まで読んでいただき、ありがとうございました！
ツイッターもやっているので、よければのぞいてみてください！
