オリジナルスキンCSSの編集 記事枠(線)
リクエストにお答えして記事枠の付け方です
今回はborder(線)を使った方法です
border----
パディング(padding)の外側にある枠の領域のことで実際は線とは違いますが・・・
線感覚で使う場合がほとんどですので線ってことにしておきます
スタンダードのグリーンスキンを使って説明します
元の状態です
/*記事枠*/
.entry{
border:3px solid #00ff00;
}
・・・・記事の周りに3pxの緑色の線を付けてみます
・・・右側の線が出ません?
パディング(padding)の外側にある枠の領域・・・
.entryの幅が400pxそれの外側に3pxの線---3px+400px+3px=406px
真ん中のカラム幅は400pxでその中に406pxは入りません
ので、右側がはみ出てしまっているので右の線が表示されません
.entry{
width:394px;
border:3px solid #00ff00;
}
---- 3px+394px+3px=400px で全部表示されるはずですが・・・・・??右側が細い??
CSSの中ほどにあります
.entry{
width:99%;
margin-bottom:20px;
}
.entry .date{
width:99%;
background-color:#98CB00;
padding:5px 0 2px 5px;
border-bottom:1px solid #006600;
border-right:1px solid #006600;
display:block;
color:#333333;
}
----この width:99%; が影響しています
対策としてこの width:99%; を削除するか
これはそのままにしておいて
.entry{
width:390px;
border:3px solid #00ff00;
}
と、余裕を持つようもっと小さくします
width:97%;
でもOK・・・実際には見ながら数値を変更してください
※IEと他のブラウザーで違って見える場合があります
他のブラウザーではよくてもIEでは×の場合がありますので確認ください
うまく表示ができたら前回同様に記事に余裕をもたせます
.entry .title{/*タイトルの位置*/
padding:10px 10px 0;/*上に10px、左右に10px、下は0 の余裕*/
}
.entry span.theme,
.entry .contents{/*テーマ・記事の位置*/
padding:0 10px;/*上下は0、左右は10pxの余裕*/
}
線の幅、線種、線色 を自分の好みに変更して完成です
次回はこの中に1ポイントの背景画像を入れてみます
その後は記事枠に画像を使った場合を予定しています
++++++++++++++++++++++++++++++++++++++++++
border:3px solid #00ff00;
3px は線の太さです・・1pxから好きな太さにしてください
solidは直線です
記事は違いますが線種の例がありますので参考に
http://ameblo.jp/exlink/entry-10087359110.html
波線なら dashed とか・・
#00ff00は色です
http://ameblo.jp/exlink/entry-10153038276.html