ブログは色々なパーツの箱を組み合わせたようなレイアウトになっているので、それぞれの箱の上下左右に線を引くことができます。

この線のデザインを決めるのが、**border** 関係の命令で、色の指定は **border−color:#xxxxxx**; でもできるし、**border** や **border−top** などの中で指定することもできます。
詳しくは[(http://www.htmq.com/style/index.shtml#bor|こちら)]をご覧下さいませ。

で、どのセレクタで色を指定すれば良いかというと・・・

イメージ的にはこんな感じです。

↑のイラスト中の文字の頭に**.wablog−**を付けたのが、それぞれのセレクタ名になります。
(大雑把に書いたのでさらに細かくセレクタが分かれているところもあります。)


中央のコンテンツ部分は、こんなふうに分かれてます。
//

例えば・・・
左右の空白部分(イラストではブルーの部分)と、中央の本体との境界線の色を変えたい場合は、
**.wablog−body**というセレクタ内の、**border−color**を変えます。

私のブログのbodyはこんな感じです(border関係のみ記載)。
~~blue|.wablog−body {~~
~~blue|   border−color: #000080;~~
~~blue|   border−top−width: 0;~~
~~blue|   border−right−width: 1px;~~
~~blue|   border−bottom−width: 0; ~~
~~blue|   border−left−width: 1px;~~
~~blue|}~~

上下左右の線の色を#000080に指定していますが、上(top)と下(bottom)の太さがゼロになっているため、bodyの左右だけに青い線が引かれています。


もうひとつ・・・
コンテンツの一番上に表示される日付の行に枠を付けたい場合は、
**.wablog−contents−date** に、**border**命令を加えればOKです。

私のブログの日付表示ラインは、こんな感じになってます。
~~blue|.wablog−contents−date {~~
~~blue|   border−bottom: 1px solid #FF9966;~~
~~blue|   border−right: 3px solid #FF9966;~~
~~blue|}~~

色は同じですが、上端と左端は線なしで、右端に下端よりも太い線を引いてみました。

こんなふうに、色だけでなく、**border−style** で実線(solid)を点線(dotted)に変えたり、**border−width** で太さを変えたりすると、楽しいかもしれませんね。
あっでも、『過ぎたるは及ばざるが如し』で、ある程度の統一感は必要かも・・・。
と、自分を戒めて今回はおしまい。