引用箇所をcssで装飾する
2009-06-17 (Wed)
他のサイトの記事なんかを引用するときに、引用した事を示すblockquoteタグ。
ドノーマルのままだと、何処から何処までが引用なのか分かりづらい。
というわけで、ぱっと見ただけでも引用文だと分かるようにCSSで装飾して目立たせる。
背景画像を使う
引用符を背景画像として表示させる方法。
シングルクォーテーション（‘ ’）でもダブルクォーテーション（“ ”）でもお好きな方をどうぞ。
ボクはダブルクォーテーション（“ ”）派。
とりあえずシンプルに
19：以下名無しに変わりましてVIPがお送りします：
ｶｯﾌﾟﾙ板から来ました
今週はりょーくんと東京湾華火大会見てー
それからお泊りするのー お風呂一緒に入ろうねって言われたｹﾄﾞ
ﾊｼﾞｶｼｰよね vipのみんなは彼女とお泊りの時は一緒にお風呂入るのかな？20：以下名無しに変わりましてVIPがお送りします：
＞＞19 パソコン持って風呂入ったらぶっ壊れるだろが 常識で考えろカス
以下、どのサンプルもHTMLは同じ。
違うのはblockquoteタグのidだけ。
<blockquote id="sample1">
<p>
19：以下名無しに変わりましてVIPがお送りします：<br />
ｶｯﾌﾟﾙ板から来ました<br />
今週はりょーくんと東京湾華火大会見てー<br />
それからお泊りするのー お風呂一緒に入ろうねって言われたｹﾄﾞ<br />
ﾊｼﾞｶｼｰよね vipのみんなは彼女とお泊りの時は一緒にお風呂入るのかな？
</p>
<p class="puo-end">
20：以下名無しに変わりましてVIPがお送りします：<br />
＞＞19 パソコン持って風呂入ったらぶっ壊れるだろが 常識で考えろカス
</p>
</blockquote>
CSS
blockquote#sample1 {
background: #000 url(img/blockquote_01.gif) no-repeat 0 0;
margin: 0 10px 20px;
border: 1px #b5b5b5 solid;
}
blockquote#sample1 p {
line-height: 1.3;
padding: 45px 45px 20px;
}
blockquote#sample1 p.puo-end {
background: url(img/blockquote_02.gif) no-repeat right bottom;
padding-top: 0px;
padding-bottom: 45px;
}
引用の範囲をわかりやすくするためにborderをblockquoteタグに指定。
pタグにpaddingで文字の表示開始位置を調整。
quo-endクラスでpaddingを上書きして、他のpタグで括った引用文との余白を調整する。
あとはblockquoteタグとpタグに背景画像を指定するだけ。
背景画像とcssの値を変えれば、いろんなパターンの装飾が出来きて楽しい。
例えばグラデーションを入れてみたり。
19：以下名無しに変わりましてVIPがお送りします：
ｶｯﾌﾟﾙ板から来ました
今週はりょーくんと東京湾華火大会見てー
それからお泊りするのー お風呂一緒に入ろうねって言われたｹﾄﾞ
ﾊｼﾞｶｼｰよね vipのみんなは彼女とお泊りの時は一緒にお風呂入るのかな？20：以下名無しに変わりましてVIPがお送りします：
＞＞19 パソコン持って風呂入ったらぶっ壊れるだろが 常識で考えろカス
メモ風とか。
19：以下名無しに変わりましてVIPがお送りします：
ｶｯﾌﾟﾙ板から来ました
今週はりょーくんと東京湾華火大会見てー
それからお泊りするのー お風呂一緒に入ろうねって言われたｹﾄﾞ
ﾊｼﾞｶｼｰよね vipのみんなは彼女とお泊りの時は一緒にお風呂入るのかな？20：以下名無しに変わりましてVIPがお送りします：
＞＞19 パソコン持って風呂入ったらぶっ壊れるだろが 常識で考えろカス
CSS
blockquote#sample3 {
background: url(img/blockquote_04.gif) no-repeat 60px 0;
margin: 0 10px 20px;
}
blockquote#sample3 p {
color: #444444;
line-height: 1.5;
padding: 75px 120px 20px 100px;
}
blockquote#sample3 p.puo-end {
background: url(img/blockquote_05.gif) no-repeat 60px bottom;
padding-top: 0px;
padding-bottom: 50px;
}
blockquoteタグにメインの背景画像を表示させて、pタグのquo-endクラスでピンがある方の画像を表示させて蓋をする。
メインの背景画像はテキスト量によって高さが変わっても、画像がちゃんと表示されるようにしないといけない。
なのでメインの画像を作る時にある程度高さに余裕を持たせておかないと、テキスト量が多いときに途中でちょん切れて悲惨な事になる。
このメモ風の背景画像作るのめんどくさかった^o^
:before, :after 疑似要素を使う
:before, :after 疑似要素を使って引用文の前後に引用符を入れる方法。
※IE6.0, 7.0、IE for Mac 5.2は非対応
19：以下名無しに変わりましてVIPがお送りします：
ｶｯﾌﾟﾙ板から来ました
今週はりょーくんと東京湾華火大会見てー
それからお泊りするのー お風呂一緒に入ろうねって言われたｹﾄﾞ
ﾊｼﾞｶｼｰよね vipのみんなは彼女とお泊りの時は一緒にお風呂入るのかな？20：以下名無しに変わりましてVIPがお送りします：
＞＞19 パソコン持って風呂入ったらぶっ壊れるだろが 常識で考えろカス
CSS
blockquote#sample4 {
background: #222222;
margin: 0 10px 20px;
border: 1px #b5b5b5 solid;
}
blockquote#sample4 p:before {
color: #FF9900;
font-size: 123.1%;
font-weight: 800;
content: "“";
}
blockquote#sample4 p:after {
color: #FF9900;
font-size: 123.1%;
font-weight: 800;
content: "”";
}
blockquote#sample4 p {
padding: 10px 10px 20px;
line-height: 1.5;
}
blockquote#sample4 p.puo-end {
padding-top: 0px;
padding-bottom: 10px;
}
pタグの前後にダブルクォーテーション（“ ”）をテキストで入れてみた。
背景画像使ったサンプルと比べると地味だな。
contentの値変えてやればテキストだけじゃなく、画像の挿入も可能。
でも:before, :after 疑似要素が非対応のブラウザもあるし、まだまだ当分は背景画像使うほうがいいね。
IEとか消えてなくなればいいのに´・ω・｀
- Short cut