ブログを開いたけれど、何かデザインが物足りないなと感じる毎日。
そこで、ブログも普通にカスタマイズできますよ、という記事を読んでみた。
参考に、昔のことを思い出しながら見出しを作ったので、備忘録的な記事を書いてみた。
ブログの見だしなみを整えよう
ブログを始めたばかりのとき、太字やアンダーライン、フォントサイズを工夫する。
見だしを作るのに、苦労している人は多いと思う。
文章がよほど上手くないと、デザインなしで文章を読ませるのは、大変。
そこで、スタイルシート（CSS）を使うことになる。
無料ブログのサービスによってはCSSが使えないところもある。
使えるところのブログを持ってる方、限定の記事になる。
<h3>
<div style="border-width: 0px 0px 1px 7px;
border-style: solid;
border-color: rgb(169, 169, 169);
padding: 10px;">
見出しＨ３
</div>
</h3>
ブログの見出しに、HTML編集で上のコードを書き入れている。
こうしたパーツを用意しておいて、コピーすれば、HTML編集が使えるブログサービスなら
どこでも使うことができる。
<h3><div style="border-width: 0px 0px 1px 7px; border-style: solid; border-color: rgb(169, 169, 169);padding: 10px;">見出しＨ３</div></h3>
実際にコピーしてみると、上のようにズラズラと書かれていてわかりにくい。
ここでCSSの使い方やHTMLがなんたらと言われて、わかる人ばかりだろうか？
むしろ、この文章をコピペして自分のブログでも使おうと思う筈。
そうした時に、自分なりにカスタマイズしたい。
と思う人が多いだろう。
けれども勉強熱心な人にはこのサイトを直接見てみることをオススメする。
HTMLリファレンスよりCSSの基本このページはHTMLを使う時に辞書として使えます。
見出しを囲んでいる線の色を好きな色に変更しよう
見出しを囲んでいる線の色は
border-color: rgb(169, 169, 169);
で変更できる。
これは、見出しを囲んでいる線＝borderのcolor はRGB形式で表すと赤169、緑169、青169の色です。
という設定だ。
このrgbの後の（）カッコ内の数字を変えてあげれば、好きな色になる。
自分の好きな色のRGBの数値を調べるには次のサイトを見ればOKだ。
ウェブセーフカラー
見出しを囲んでいる線の太さを変更しよう
border-width: 0px 0px 1px 7px;
これは、囲み線の幅は上0、右0、下1,左7 にしますという意味。
（なれないうちはかならず４つ書くこと。）
これで、今の見出しのように、左側と下にだけ線がありますという設定になる。
任意で線の太さを変えるのもいいかもしれない。
ただ、この体裁をとっているブログは結構多い。無難だということだと思う。
見出しを囲んでいる線の種類を変更しよう
border-style: solid;
これは、見出しを囲んでいる線を、実線にしますという意味。
一番単純に普通の線。
もし種類を変えたければ、
HTMLリファレンスよりborder-styleの設定
を参照して欲しい。
（さすがに種類が多いので、解説は省かせて頂きたい。）
※ コードをカスタマイズするときの注意
{ style = " この間にデザイン要素を記述 " }
となっていて、｛｝や” ”を省略すると表示がおかしくなるので注意。
要素も
要素名(border-style)： 要素の値 ；
となり、：コロンで始まり、；セミコロンで終わるというルールを守らないと表示ができない。
もしカスタマイズして表示が出来なくなったら、細かいところが消えてないか確認しよう。
HTMLのコード（ここでは<h3>や<div>）も< 名前 >で開いて、< / 名前 >で閉じるというルールだ。
よくあるのは、編集中に＜や／を消してしまい、表示がおかしくなることだ。
