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

第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法というエントリーより。

今回はそのblockquoteを、CSSと画像を使ってクリーンなHTMLを維持しつつ「引用符(“”)」で囲ったようなデザインにする方法を紹介します。

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

↓こんな感じです。

Netafull Blockquote2

1)左上に「“」を表示させる
2)左上に「“」、右上に「”」を表示させる
3)左上に「“」、右上に「”」を表示させる(幅固定で画像一つバージョン)
4)左上に「“」、右下に「”」を表示させる
5)左上に「“」、右下に「”」を表示させる(citeタグも絡めたHTML)

画像とHTMLとCSSがありますので、自分のブログに適用するのも難しくないでしょう。

ちなみにネタフルは背景画像1枚で実現する3)の方法です。