« ココログのカスタムCSSの編集~背景画像で文章を飾る~ | トップページ | ココログのカスタムCSSの編集~文章を枠で飾りつけ その3~ »

2008年1月27日 (日)

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

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

このような一行の枠

このように
数行にわたる枠などが
簡単に作れます
作り方を説明します
  • 画像を用意する
    枠の上部、中部、下部に表示する画像を用意します。中部の画像が繰り返し表示されて枠の長さが変わることになります。ここでは次の3枚の画像を使いました。
    • 上部 (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)

« ココログのカスタムCSSの編集~背景画像で文章を飾る~ | トップページ | ココログのカスタムCSSの編集~文章を枠で飾りつけ その3~ »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/506297/17862232

この記事へのトラックバック一覧です: ココログのカスタムCSSの編集~文章を枠で飾りつけ その2~:

« ココログのカスタムCSSの編集~背景画像で文章を飾る~ | トップページ | ココログのカスタムCSSの編集~文章を枠で飾りつけ その3~ »