昨日愛犬のうなぎ（パグ）を連れて代々木公園で走り回って筋肉痛の管理人です。
今日は、以前から多数お問い合わせ頂いてました、サイドバーとメインコンテンツの間に区切り線を付ける方法をご紹介します。
図で説明すると、
このブログでも、サイドバーとメインの間に縦のライン、区切り線が入ってます。これの付け方を解説します。
これは、なんの目的で付けてるかというと、サイドとメインをくっきり分けて、単純に見やすくするためです！
では早速、やってみます。
CSS編集画面で、/*■■■■■■■■■■■ カラムタイプ ■■■■■■■■■■*/ ←ここを探して下さい。
このちょっと下辺りに、
#sub_a { ←ここからCSSの指定が始まって
ここに適用したいスタイルの指定を書いて行きます。
} 数行下のここで終わりって意味です。
この#sub_aがサイドバー全体を包むボックスになりますので、
このボックスの右端に１本の縦線を入れると完成です。
こんな感じです。
では実際、#sub_aの中に以下のスタイルを追加します。
#sub_a {
他のスタイルの指定が書いてます。
他のスタイルの指定が書いてます。
他のスタイルの指定が書いてます。
border-right:1px #dddddd solid;
}
赤字の部分を追加します。
これを追加する事によって、もしかしたら隣のメイン部分が下にズレてしまうかもしれません。
※なにもズレずに綺麗にラインが入った場合はOK! 下記の内容は気にしなくていいです！
そんな時は同じ#sub_a内の指定にpaddingから始まる指定があれば、
そこを調整します。例えば、
padding:0 30px 0 0;
↑このような指定の場合、30pxと書かれている所を29pxと1px引いて下さい。
もしくは、こんな記述の場合もあるかも・・・
padding-right:30px;
これも同様です。1px引いた数字に書き直すとうまいこと表示されます。
ここは人によって色々と違うと思いますので、上手く行かなければお気軽にコメント残して下さい！
次はラインをデザインする為の詳しい解説です。
#sub_aに追加した
border-right:1px #dddddd solid;
これをもう少し深く知る事で、オリジナルのデザインが出来ます！
どういう指示をしているのか詳しく説明すると、まず、
border-right:1px #dddddd solid;
この赤字はなんて言ってるのかというと、
ボーダーを右側に引くよ！と言っております。
応用
border-left: こうすると、#sub_aのボックスの左に線が入ります。
border-top: こうすると、#sub_aのボックスの上に線が入ります。
border-bottom: こうすると、#sub_aのボックスの下に線が入ります。
次はここ
border-right:1px #dddddd solid;
これは線の太さを指定してます！
1pxで線を引きなさい！こう言ってます。
応用
5px こうすると、ラインが5pxと太くなります。
注意：太くするとメインがズレて下に折り返して表示されるかもしれません。そんな時は、さっきも書いた様に、
paddingやmarginの調整が必要となります。
次はここ
border-right:1px #dddddd solid;
これは線の色を指定してます。
線は薄いグレーで引きなさい！こうおっしゃってます。
応用
#000000 こうすると、ラインの色が黒になります。
カラーコードは沢山ありますので、以前書いたカラーコードサンプルを参照して下さい。
・WEBセーフカラー 216色はコチラ
・日本伝統色 其の壱はコチラ
・日本伝統色 其の弐はコチラ
次はこちら
border-right:1px #dddddd solid;
これは線の種類を指定してます。
この線は実線で引きなさいよ！こんな感じに言ってます。
応用
dotted こうすると、ラインが点線になります。
dashed こうすると、ラインが破線になります。
double こうすると、ラインが二重線になります。
groove こうすると、ラインがちょっとくぼみます。
ridge こうすると、ラインがちょっと立体的になります。
outset こうすると、ラインが凸になります。
inset こうすると、ラインが凹になります。
以上でラインを自分流にデザイン出来ると思います！
これで、自分のブログに合ったデザインを試してみて下さい。
ではでは、失礼致します！