« ココログのカスタムCSSの編集~文章を枠で飾りつけ その2~ | トップページ | Firefoxで連続した半角文字が折り返されない »

2008年1月28日 (月)

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

画像の枠に色違いのバリエーションを増やしてみた。

青い枠

赤い枠

緑の枠

黄の枠

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>

« ココログのカスタムCSSの編集~文章を枠で飾りつけ その2~ | トップページ | Firefoxで連続した半角文字が折り返されない »

コメント

コメントを書く

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

トラックバック

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

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

« ココログのカスタムCSSの編集~文章を枠で飾りつけ その2~ | トップページ | Firefoxで連続した半角文字が折り返されない »