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

2008年1月24日 (木)

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

ココログのカスタムCSS編集機能を使って、簡単に文章を枠で飾りつけしてみます。たとえば次のような目立つ枠が作れます。

これで人目を引くことができるでしょう。
目立ちすぎでしょうか。。。

設定方法を説明します。

  • カスタムCSSの設定
    カスタムCSSの編集で、次の設定を追加しました。
      div.warning{
         border-width:1px;
         border-color:#FF0000;
         border-style:solid;
         background-color:#FFBBBB;
         width:70%;
      }
      div.warning#head{
         border-style:none;
         background-color:#FF9999;
         font-weight:bold;
         color:#FF0000;
         width:100%;
      }
    • 2種類のセレクタを定義して、それぞれにスタイルを設定します。
    • HTMLで<div class="warning">~</div>という感じで文章を挟むと1つ目のスタイルが適用されます。
    • HTMLで<div class="warning" id="head">~</div>とすると2つ目のスタイルが適用されます。
  • HTMLの編集
    ブログ本文はHTML編集で次のように書きました。
      <div class="warning"><div class="warning" id="head">注目!</div>これで人目を引くことができるでしょう。</div>

一度カスタムCSSを書いてしまえば、今後は注目させたい文章をこのdivタグで挟むだけで簡単に目立つ枠をつけることができます。線の種類や色を変えるといろいろな枠を作れます。工夫次第でいろいろできそうです。

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

コメント

コメントを書く

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

トラックバック

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

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

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