ココログのカスタムCSSの編集～文章を枠で飾りつけ その２～

ココログのカスタムCSS編集機能を使って、文章の行数に応じて長さが変わる画像の枠を作って飾りつけしてみます。

このような一行の枠

このように
数行にわたる枠などが
簡単に作れます
作り方を説明します

• 画像を用意する
  枠の上部、中部、下部に表示する画像を用意します。中部の画像が繰り返し表示されて枠の長さが変わることになります。ここでは次の３枚の画像を使いました。
• 上部 (BK001A.JPG)
  
• 中部 (BK001B.JPG)
  
• 下部 (BK001C.JPG)
  
• カスタムCSSの編集
  次のCSSを追加しました。
  
  div.bk001a{
  background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BK001A.JPG");
  width:316px;
  height:23px;
  margin:0px;
}
div.bk001b{
  background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BK001B.JPG");
  width:256px;
  padding:0px 40px 10px 20px ;
  margin:0px;
  color:#607090;
}
div.bk001c{
  background-image:url("http://shirabemono.cocolog-nifty.com/blog/img/BK001C.JPG");
  width:316px;
  height:19px;
  margin:0px;
}
  • div.bk001a, div.bk001b, div.bk001cは、それぞれ上部、中部、下部の画像と枠の幅、マージン、パディング、フォントの色を設定しています。
• HTMLの編集

HTMLは次のようにタグを書きます。


<div class="bk001a"></div>
<div class="bk001b">ここに文章を書きます</div>
<div class="bk001c"></div>

画像はGIMPを使って描きました。
GIMPの使い方は、次のサイトのチュートリアルを参考にしました。
GIMP2を使おう(http://www.geocities.jp/gimproject/gimp2.0.html)