【CSS】blockquoteタグのデザインを見栄えよくしてみる

ポスト内容に参照元のテキストを引用する場合に使う「blockquote」タグですが、デフォルトの見た目がイマイチだったので見やすさ、分かりやすさ、自己満足度を高めるためにデザインを編集してみました。

まず、blockquoteとは？

基本的なことから。
<blockquote>?</blockquote>で囲まれた部分が引用・転載であることを表します。
<blockquote>タグは、比較的長めの文章を引用・転載する際に使用します。 改行を必要としない程度の短い文章を引用・抜粋する際には、<Q>タグ を使用します。

例えば、少し前のポスト「あまおう」を調べた際の結果を書く場合、この部分が引用ですよ、と分かるように blockquoteタグ を使用しました。
実例はこんな感じ。

「あかい・まるい・おおきい・うまい」の頭文字をとって名付けられた、県内だけで生産されているイチゴ。県農業総合試験場が開発し、2001年に品種登録された。
県内のJAに卸しているイチゴ農家はすべてあまおうを栽培。収穫期は11月?6月で、10年の販売量は1万3141トン。11年10月現在、1749戸の農家が栽培している。
( 2012-04-02 朝日新聞 朝刊 福岡 １地方 )

既にデザインされているので、IE以外のブラウザでは、少し太くてグレイの角丸ボーダーを使用したものが表示されます。

ちなみに、出典元等を記述の際は、citeタグ を使用します。この場合「2012-04-02 朝日新聞 朝刊 福岡 １地方」ですね。
<CITE>とは Citation の略で、出典・参照先を表します。 文章自体を引用するのではなく、書名・規格名・作者名などを引用する際に使用します。
Internet ExplorerやNetscape Navigator等の一般的なブラウザではイタリック体で表示されます。

citeタグに出典元へリンクさせるかどうかは自身の判断でいいと思います。

blockquoteのデザインを変えてみる

デザイン前後の比較をしてみます。

デフォルト時の見栄え

では最初に、このブログで使っているテーマ「CatchBox」のデフォルトでのblockquoteの見た目。

わかっている人にはそれでいいと思いますが、正直、見た目はあまり美しくないですね。

CSSはこうなっています。

デフォルトでは、フォントが「Georgia, "Bitstream Charter", serif」、字体が「イタリック(斜体)」というのが主だったデザインとなっています。
フォントが無いために明朝体が当たり、斜体なので、やたらガタガタしています。

CITEタグはまた違ったフォント（"Helvetica Neue", Helvetica, Arial, sans-serif）が当たっており、統一性がありません。

CSSで見た目を整える

では、デフォルト設定を変更してみます。
以下のように、 blockquote 部分のスタイルを編集します。

見た目はこうなります。

角丸のボーダーで囲い、周囲にインデント。
若干、文字色を変え、文字サイズも相対で90％とします。
参照元を書くciteタグも同じく右寄せで指定。
背景にポイントとして「”」をデザインした記号を画像で作成し配置しています。

さほど凝ったことはしていませんが、デフォルトと比べてかなり見やすく、分かりやすくなったのではないでしょうか。

toogieと同じように、見た目を揃えたいなって方がいましたら、何かの参考になれば幸いです。

[tgAmazonItemLookup asin="B00AXZZ034" related="1"]

-HTML,CSS
-blockquote, css, html