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

前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介しました。

ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。

via: 第11回：引用（blockquote）を簡単にするブックマークレット

今回はそのblockquoteを、CSSと画像を使ってクリーンなHTMLを維持しつつ「引用符（“”）」で囲ったようなデザインにする方法を紹介します。
最近は良く見かけるデザインだし、方法も色々あるんだろうけど何パターンか作ってみようと思います。

１）左上に「“」を表示させる

まずは一番簡単そうな左上コーナー１カ所に引用符を表示してみます。
使用した画像はこちら。
guote
完成したのがコチラ。
引用１
HTML例

<blockquote cite="http://creazy.net/" title="creazy photograph">
<p>写真と、WEBと、流行のネタを少々…。yagerは大体ここにいます。</p>
</blockquote>

CSS例

blockquote {
width: 400px;
border: 1px solid #666666;
background: url(http://labs.creazy.net/img/quote_start.gif) no-repeat scroll top left;
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 30px;
}
blockquote p {
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 30px;
margin: 0px;
}

ポイントは左上に背景画像として引用符を表示する事と、引用符とかぶらないようにpadding-leftしているところですね。

２）左上に「“」、右上に「”」を表示させる

次に左右２カ所に引用符を表示してみます。
使用した画像はこちら。
guote 、 guote
完成したのがコチラ。
引用２
HTML例

<blockquote cite="http://creazy.net/" title="creazy photograph">
<p>写真と、WEBと、流行のネタを少々…。yagerは大体ここにいます。</p>
</blockquote>

CSS例

blockquote {
width: 400px;
border: 1px solid #666666;
background: url(http://labs.creazy.net/img/quote_start.gif) no-repeat scroll top left;
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 30px;
}
blockquote p {
background: url(http://labs.creazy.net/img/quote_end.gif) no-repeat scroll top right;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
margin: 0px;
}

ポイントはblockquoteとpが２重構造になっている事を利用して左右に引用符を表示している点です。もちろんpaddingも左右に必要です。

３）左上に「“」、右上に「”」を表示させる（幅固定で画像一つバージョン）

次は２の簡単バージョンで、左右２カ所の引用符を一つの画像で表示してみます。
ちなみにこの方法はネタフルさんが使っています。
使用した画像はこちら。
guote
完成したのがコチラ。
引用３
HTML例

<blockquote cite="http://creazy.net/" title="creazy photograph">
<p>写真と、WEBと、流行のネタを少々…。yagerは大体ここにいます。</p>
</blockquote>

CSS例

blockquote {
width: 400px;
border: 1px solid #666666;
background: url(http://labs.creazy.net/img/quote_both.gif) no-repeat scroll top center;
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 30px;
}
blockquote p {
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
margin: 0px;
}

２）と比べると背景画像が一つでいいので、２重構造になっている必要はありません。ここではpタグがなくても実現可能ですが、HTML的にpタグを入れておきたかったのでHTMLは他と一緒です。
ポイントは横幅が固定じゃないとうまくいかないので注意が必要です。widthとpaddingの組み合わせはブラウザによって動作が異なりますのでHackが必要になるケースがあります。

４）左上に「“」、右下に「”」を表示させる

こちらも左右２カ所の引用符なのですが、上下に配置する事でさらに囲んでいる感を出しています。
使用した画像はこちら。
guote 、 guote
完成したのがコチラ。
引用４
HTML例

<blockquote cite="http://creazy.net/" title="creazy photograph">
<p>写真と、WEBと、流行のネタを少々…。yagerは大体ここにいます。</p>
</blockquote>

CSS例

blockquote {
width: 400px;
border: 1px solid #666666;
background: url(http://labs.creazy.net/img/quote_start.gif) no-repeat scroll top left;
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 30px;
}
blockquote p {
background: url(http://labs.creazy.net/img/quote_end.gif) no-repeat scroll bottom right;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
margin: 0px;
}

２）のpタグの背景画像を下付きにしただけです。が、いままでで、一番囲っている感じがでていると思います。

５）左上に「“」、右下に「”」を表示させる（citeタグも絡めたHTML）

いよいよ自分で使っている本番用のスタイルです。
基本的に４）と一緒ですが、HTMLタグ構成が前回のTipsで作ったようなciteタグをふくめたものになっています。
使用した画像はこちら。
guote 、 guote
完成したのがコチラ。
引用５
HTML例

<blockquote id="b5" cite="http://creazy.net/" title="creazy photograph">
<p>写真と、WEBと、流行のネタを少々…。yagerは大体ここにいます。</p>
<cite>via: <a href="http://creazy.net/" target="_blank">creazy photograph</a></cite>
</blockquote>

CSS例

blockquote {
width: 400px;
border: 1px solid #666666;
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 30px;
}
blockquote p {
display: block;
background: url(http://labs.creazy.net/img/quote_start.gif) no-repeat scroll top left;
margin: 0px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 30px;
}
blockquote cite {
display: block;
background: url(http://labs.creazy.net/img/quote_end.gif) no-repeat scroll bottom right;
padding-top: 0px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 10px;
margin: 0px;
}

blockquoteの中にpとciteの二つの要素があるのでそれぞれ上辺用と下辺用のスタイルを担当させています。もともとciteタグはinline要素なのでdisplay:blockしています。あとは、ほとんど４）と一緒です。

その他の方法！？

今回、backgroundとpaddingで簡単に作ってしまいましたが、引用のスタイリングは様々な方法があります。
見た目は似ていますがpaddingではなくtext-indentとinline要素のbackgroundを使う事でより文章に馴染んだ引用符を付ける事ができます。（ブラウザにより微妙に動きが違いそうなのでオレはやめたけど）

blockquoteでの引用を美しく表示するCSS。

via: blockquoteでの引用を美しく表示するCSSサンプル:phpspot開発日誌

引用を画像ではなくてspanで囲んだ実際の文字を使うという手もあります。

イメージ無しでのblockquoteでの引用を二重引用符で表示するCSSサンプルを紹介してみることに。

via: イメージ無しのblockquoteで引用を表示するCSSサンプル – WEBデザイン　BLOG

引用を引用符じゃなくてバブルタイプの吹き出しで表現する方法もある。

このサイトでは、CSSでレイアウトされた、バブルタイプのblockquoteデザインを配布している。zipでダウンロードが可能だ。

via: CSSでバブルタイプのblockquoteデザイン『CSS Speach Bubbles』 | CREAMU

画像は引用符じゃなくてキラキラした素材とかでもいいんだね。
ってか角丸と要領一緒だしな。

上の素敵ページのアイデアをもとに、ちょっぴりがんばって、blockquote（引用文）のスタイル指定をしてみた。

via: kakkin blog blockquote（引用文）のスタイル指定してみた

まとめと注意事項

このエントリー中のサンプルCSSでは分かりやすいようにborderとか付けてたけど適当に変更してみて下さい。それから、引用符画像は配布している訳ではないけど、別に大したもんじゃないので自由に使ってもらってOKです。引用符以外でも「角丸」とか「めくり効果」みたいな画像を使っても面白いかもね。
（2007/09/05追記）
ネタフルさんにこのエントリーがとりあげられました。
・Re:「blockquote」を「“”」で囲ったようなデザインにする方法＠ネタフル

実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
	市瀬裕哉福島英児望月真琴九天社 2007-02 売り上げランキング : 1702 Amazonで詳しく見るby G-Tools