2011年01月12日

【第31回】引用(blockquote)の書式を変更する

今回は、引用などで使用されるblockquoteの書式を変更してみましょう。

これです。

これが引用(blockquote)です。


このデフォルトの引用を、引用領域内をオレンジ色、引用文は白文字にしてみます。

★引用(blockquote)の書式を変更する方法★

.text blockquoteの背景(background)と文字色(color)プロパティを修正する。

▼▼▼ 変更前 ▼▼▼
.text blockquote{
border:0 solid #E5E5E6;
margin:10px;
padding:8px 12px;
background:#FFF0DA;
color:#A07C61;

}

▼▼▼ 変更後 ▼▼▼
.text blockquote{
border:0 solid #E5E5E6;
margin:10px;
padding:8px 12px;
background:#FF9900;
color:#FFFFFF;

}

この修正を行うと、引用箇所がご覧のように変更されます。

▼▼▼ 変更前 ▼▼▼
SD_031_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_031_02.JPG

見やすいかどうかはさておき、これで引用(blockquote)の書式を変更できるのがお分かりになるでしょうか。

今回の修正は、以上となります。


さて、以下は少し余談です。

今回修正したのは、.text blockquote要素でした。

ご存知の通り、引用は<blockquote></blockquote>というHTMLタグで囲む書式となります。

なぜ、今回の要素名には、その前に.textが付いているのでしょうか?

結論から言ってしまうと、これは子孫要素の定義書式になります。
.textという要素の中で記載されるblockquoteのみを定義している書式なのです。

.textは、第3回などでもお伝えした通り、ブログの記事本文の書式を定義しているクラスです。

この.textに半角スペースを空けて記載されたblockquoteの書式は、ブログの記事本文にblockquoteが記載された場合はその書式を使用するという意味を持ちます。
他の場所にblockquoteが記載されても、この書式は適用されません。

このようにCSSでは、セレクタを半角スペースでつなぐと、後ろのセレクタは前のセレクタの子要素となっていきます。

別の例では、第1回でご紹介した#banner h1 aも同様です。
これは、#banner要素の中のh1要素の中のa(リンク)に関する書式設定となります。

ブログのテンプレートのCSSを読み解く際、参考にしてみてください。

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

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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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