Re:「blockquote」を「“”」で囲ったようなデザインにする方法＠ネタフル

投稿日：2007年9月5日

ネタフルのエントリーでもやっていますが、「blockquote」つまり引用している部分を「引用符（“”）」で囲ったようなデザインにする方法が紹介されています。

via: [N] 「blockquote」を「“”」で囲ったようなデザインにする方法

いつも通り Livedoor Reader でRSS読んでたらいきなり自分のエントリーがでてるんだもん、そりゃ驚くっちゅー話で。
ネタフルさんのエントリーがUPされた13時過ぎくらいから急にアクセスがあがり、はてブもいつもより多め。
これが、噂に聞いたネタフル砲か（ネタフルキャノンと読んだ方が格好良いか？）
ああ、ありがたや、ありがたや。

ついでに、余計なお世話だと思いますがネタフルさんの引用（blockquote）を勝手に添削してみます（！）

HTMLは非常にシンプルにblockquoteで囲っているだけ。blockquoteの中にpタグとかは使っていません。
引用元の表記はciteタグは使わずにpタグのみ。以下の感じです。

<p><a href="http://creazy.net/2007/09/blockquote_css.html">第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法</a>というエントリーより。</p>
<blockquote>今回はそのblockquoteを、CSSと画像を使ってクリーンなHTMLを維持しつつ「引用符（“”）」で囲ったようなデザインにする方法を紹介します。</blockquote>

そしてCSSはこんな感じ、

.content blockquote {
color: #333333;
line-height: 160%;
font-size: 14px;
width: 340px;
background-image: url(image2/blockquote_bg.gif);
background-repeat: no-repeat;
padding-top: 20px;
padding-right: 5px;
padding-left: 5px;
background-color: #F5F5F5;
padding-bottom: 10px;
}

ここで気をつけたいのが前のエントリーでも書いたブラウザ依存の問題。

ポイントは横幅が固定じゃないとうまくいかないので注意が必要です。widthとpaddingの組み合わせはブラウザによって動作が異なりますのでHackが必要になるケースがあります。

via: 第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法

どういうことかというと、同じblock要素にwidthとpadding-left（padding-right）を指定した場合に、FirefoxやSafariなどではwidth＋padding-left（padding-right）が横幅になるのに、IEではpaddingの幅が無視されwidthが横幅になってしまうという事です。

CSS1/CSS2ではボックスの幅を算出するときにパディングやボーダーのサイズは除外される。しかしWinIEではこれらを含めて幅や高さを算出する。

via: Internet Explorer (Windows) CSSバグリスト

なのでネタフルさんのblockquoteの場合、Firefoxでみると350px、IEでみると340pxになります。
10pxくらいの差なので全然気にならないんですが、無理矢理CSS Hackとかで対応するとこんな感じかと。

.content blockquote {
color: #333333;
line-height: 160%;
font-size: 14px;
width: 340px;
background-image: url(image2/blockquote_bg.gif);
background-repeat: no-repeat;
padding-top: 20px;
padding-right: 5px;
padding-left: 5px;
background-color: #F5F5F5;
padding-bottom: 10px;
}
* html body .content blockquote {
width: 350px;
}

いわゆるスターハックってやつですね。

まとめ

ソースを含む長文エントリーを書いていると本題を忘れる傾向があります。
え〜と、つまりは、ネタフル最高！ってことで。
本当にあざーす。

クチコミの技術広告に頼らない共感型マーケティング
コグレマサトいしたにまさき
日経BP社 2007-03-29

by G-Tools