ココログのカスタムCSSの編集～文章を枠で飾りつけ その３～
画像の枠に色違いのバリエーションを増やしてみた。
青い枠
赤い枠
緑の枠
黄の枠
CSSとHTMLの書き方を説明します。
- カスタムCSS
div.bkb01a{
background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BKB01A.JPG");
width:450px;
height:20px;
margin:0px;
}
div.bkb01b{
background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BKB01B.JPG");
width:390px;
padding:2px 40px 10px 20px;
margin:0px;
color:#607090;
}
div.bkb01c{
background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BKB01C.JPG");
width:450px;
height:18px;
margin:0px;
} - HTML
<div class="bkb01a"></div><div class="bkb01b">
ここに文章を書く
</div><div class="bkb01c"></div>
- カスタムCSS
div.bkr01a{
background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BKR01A.JPG");
width:450px;
height:20px;
margin:0px;
}
div.bkr01b{
background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BKR01B.JPG");
width:390px;
padding:2px 40px 10px 20px;
margin:0px;
color:#906070;
}
div.bkr01c{
background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BKR01C.JPG");
width:450px;
height:18px;
margin:0px;
} - HTML
<div class="bkr01a"></div><div class="bkr01b">
ここに文章を書く
</div><div class="bkr01c"></div>
- カスタムCSS
div.bkg01a{
background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BKG01A.JPG");
width:450px;
height:20px;
margin:0px;
}
div.bkg01b{
background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BKG01B.JPG");
width:390px;
padding:2px 40px 10px 20px;
margin:0px;
color:#709060;
}
div.bkg01c{
background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BKG01C.JPG");
width:450px;
height:18px;
margin:0px;
} - HTML
<div class="bkg01a"></div><div class="bkg01b">
ここに文章を書く
</div><div class="bkg01c"></div>
- カスタムCSS
div.bky01a{
background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BKY01A.JPG");
width:450px;
height:20px;
margin:0px;
}
div.bky01b{
background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BKY01B.JPG");
width:390px;
padding:2px 40px 10px 20px;
margin:0px;
color:#909060;
}
div.bky01c{
background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BKY01C.JPG");
width:450px;
height:18px;
margin:0px;
} - HTML
<div class="bky01a"></div><div class="bky01b">
ここに文章を書く
</div><div class="bky01c"></div>
コメント