【CSS】ブログのデザインを変えてみた！ヘッダーの枠色を緑へ変更。

デザインを変えたいと思ったきっかけ

たまにはブログを書いてみようと思い、「はて？何を書こうか？」と考えを巡らせていました。

食べ物のこと？最近買ったもの？時事ニュース？

どれを見ても特別書きたい話題がないなと思い、自分のブログのトップページを見ていたところあることを感じました。

「このブログ、暗いなぁ…」

このブログは飽きのこない白やグレーを基調としたシンプルなカラーリングをしたテーマを使っています。

結構このテーマは気に入っているのですが、「あまりアスパラガス要素がないのかな？」と感じる部分があります。

ということで、前置きが長くなりましたが、もう少しアスパラガス色を増やしていこうというのがこの記事の主旨です！

まずはヘッダーの枠の色を変えてみようと思い立ちました。

CSSでヘッダーに限らずどこかの枠の色を変えるとなったら、borderの色を変えればいいですね。

やり方は変更したい要素に対して、

border: 太さ枠線の種類色;

という形でCSSを書く場合が多いですね。

私の場合は枠線を下側にだけつけたかったので、

border-bottomというようにして8pxでちょっぴり太目の実線(solid)、色は緑を表すカラーコードの#008000という形でCSSを書いてみました。

border-bottom: 8px solid #008000;

こんな感じですね。

アスパラガスの緑を連想できる緑色の線が表示させるようになりました。

これで明るくなったのか？と言われるとまだまだのような気もしますが、これから色やその他のデザインも調整しつつ、自分が求めるサイトデザインへと変貌させたいです！