他のブログや、ニュース記事からの引用を示すものとしてブログでは広く使われているblockquoteタグ。ブログを書いていてたらblockquoteタグは一度は使った事があるんじゃないかと思います。今日はそんな引用部分を彩ってくれるCSSサンプルが公開しているサイトを紹介したいと思います。



画像を使ったものからCSSのみで表現された物など様々ですが、ちょっと周りのブログとデザイン的に差を付けてみようと思った時にはいいかも知れません。

詳しくは以下

Blockquote Examples by CSS-Tricks

5つのblockquoteデザインサンプルが公開されています。デザインとともにCSSコードが記載してあり見やすくて分かりやすいです。シンプルな物からインパクトがある物まで色々揃っています。

Blockquote Examples by CSS-Tricks

Inline image quotes

画像を使っていますがとてもシンプルな引用です。スッキリと見せたいかた向けです。CSSもシンプルなのでそのまま使っても良し、ちょっとカスタマイズしても良しと使い勝手がいい感じです。

Inline image quotes

24 ways: Swooshy Curly Quotes Without Images

イメージ画像無しでの二重引用符で括ったblockquoteでの引用表示するHTML+CSSを紹介しています。要素で二重引用符を囲み、CSSでブロック・フロート設定で括ってあるように表示する方法をとっています。

24 ways: Swooshy Curly Quotes Without Images

CSS Speech Bubbles

バブルタイプのblockquoteデザインを配布しています。zip圧縮してサンプルを配布しています。設定の方法は「CREAMUさん」に詳しく載っていました。

CSS Speech Bubbles

その他

kakkin blog blockquote（引用文）のスタイル指定してみた
引用符意外の画像を使ったデザインサンプル

引用（blockquote）をCSSと画像でそれらしく見せる方法 ::: creazy photograph
綺麗にまとめられています。サンプルを元に自分でカスタマイズしようかなと思っている人見ておいて損は無いかと思います。

blockquoteの覚書と試行錯誤 | lush life*
blockquoteカスタマイズの覚書「blockquote試行錯誤とざっくりしたサンプル : lush life*」で表示されているもののカスタマイズの詳しい記録が書かれています。



まだまだあるとは思いますが今日はこの辺りで。今後も面白いblockquoteのデザインサンプルを見つけたら、こちらに追加していきたいと思っています。

関連記事

---

「ほぼ日手帳」のナイスな実例24
「キューピーたらこ」オリジナルウェブサイト
画像の見た目をなるべく保つ新技術搭載のオンラインリサイズサービス「resizr」
道を作って走ってコミニケーションするHONDAの「Avenue H」
100種類以上のベクターデータ素材がダウンロード・登録できる「freevectors.net」
美容専門雑誌やセミナー情報などを紹介するサイト「JOSEIMODE」

タグ：blog ブログ tips web