2011年01月13日

【第32回】新しい引用(blockquote)書式を追加する

前回は既存のblockquoteの書式を変更してみました。

でも、複数の引用書式を使えた方が良いと思いませんか?

例えば、こんな感じです。

デフォルトの引用書式です。

新しい引用書式です。

こんな時どうすれば良いかというと、既存のblockquoteの書式を修正するのではなく、新しく書式を定義してしまえば良いのです。

今回は、その方法をご紹介したいと思います。

★新しい引用(blockquote)書式を追加する方法★

CSS上で新しいblockquoteの書式クラスを定義し、それをHTMLで使用する。

<手順1>
CSSに新しい引用のクラス定義を追加する。
ここでは、既存のblockquoteの書式をコピーして新しいクラスを定義します。
既存のCSSと異なる点は、赤字の箇所です。

.text blockquote.type2{
border:0 solid #E5E5E6;
margin:10px;
padding:8px 12px;
background:#CBFFFF;
color:#A07C61;
}


<手順2>
ブログの記事中でblockquoteを使用する際、その後ろにclass="type2"を付ける。

<blockquote class="type2"></blockquote>

このようにすると、追加したクラスでblockquoteを表示させることができます。

同様に、別のクラス定義を行えば、書式はどんどん追加できます。

デフォルトの引用書式です。

上記で追加した引用書式です。

試しに追加してみた引用書式です。

試しに追加してみた引用書式です。

このように、自分が使いたい書式がなければ、CSSの中に新たにクラスを追加することができるのです。

試してみてください。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
ラベル:CSS 引用 blockquote
posted by o(^0^)o ほくほく at 19:36| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。