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

前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介しました。 ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。 via: 第11回：引用（blockquote）を簡単にするブックマークレット 今回はそのblockquoteを、CSSと画像を使ってクリーンなHTMLを維持しつつ「引用符（“”）」で囲ったようなデザインにする方法を紹介します。 最近は良く見かけるデザインだし、方法も色々あるんだろうけど何パターンか作ってみようと思います。 １）左上に「“」を表示させる まずは一番簡単そうな左上コーナー１カ所に引用符を表示してみます。 使用した画像はこちら。 完成したのがコチラ。 HTML例 <blockquote cite="http://creazy.net/" title="creazy photograph"> <p

[typista]

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

[unyuunyuho]

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

[webmarksjp]

html

[kits]

引用元情報をblockquote内に入れるのは「スタイルとの兼ね合い」であり、cleanとは言えないのでは。

[kurobuchi]

使用するhtmlも参考に．出典はciteを使用．

[shidho]

使えるものなのかどうかちょっと調べる。でもこのでかい引用符はあまり見ていて気持ちいいものではないんだよなあ。