« ブログをはじめる | トップページ | ココログのカスタムCSSの編集~タイトルの飾りつけ~ »

2008年1月21日 (月)

ココログのカスタムCSSの編集

ココログではカスタムCSS(Cascading Style Sheets)の編集ができます。スタイルシートをカスタマイズして、ブログ記事に飾り付けをしたいと思います。

  • CSS編集手順
    1. ココログ編集画面のデザインタブを選択
    2. "カスタムCSSを編集"をクリック
    3. 編集画面でCSSを記述
  • CSSの記述例
      span.ltitle{border-width:0 0 1px 0.6em;
                  border-color:#006600;
                  border-style:solid;
                  background-color:#CCCC99;
                  margin-left:-1em}
    • 1行目:span.ltitleは"セレクタ"といい、後に続く"{}"で囲まれた部分を"宣言"といいます。宣言はスタイルの定義で、セレクタはその定義の名前のようなものです。HTML内でセレクタを指定するとそのスタイルが適用されることになります。border-widthは文字列を囲む箱の太さで、上、右、下、左の順に指定します。px,emは太さの単位です。pxはピクセル(1px=1ドット)、emは文字幅(1em=半角1文字分の幅)です。
    • 2行目:border-colorは文字列を囲む箱の線の色です。#rrggbb(rr=赤の明るさ、gg=緑の明るさ、bb=青の明るさ)で16進数で00-FFの間で指定します。
    • 3行目:border-styleは線のスタイル指定です。solidのほかにdotted, dashed, doubleなどがあります。
    • 4行目:background-colorは文字列の背景色です。
    • 5行目:margin-leftは、文字列の左位置です。-1emを指定することで文字列を1文字分左にずらします。
  • HTMLにCSSを適用
    1. ココログの記事編集画面に行き、記事を書きます。
    2. "HTMLの編集"タブをクリックし、HTMLを表示します。
    3. CSSを適用したい文字列の前後に<span class="ltitle">、</span>を追加します。↓例
      <span class="ltitle">文字列</span>

ここで作成したCSSを各パラグラフのタイトルに適用しています。工夫次第でさまざまなスタイルが作成できます。

« ブログをはじめる | トップページ | ココログのカスタムCSSの編集~タイトルの飾りつけ~ »

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: ココログのカスタムCSSの編集:

« ブログをはじめる | トップページ | ココログのカスタムCSSの編集~タイトルの飾りつけ~ »