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

2013/03/27 2018/04/09

ポスト内容に参照元のテキストを引用する場合に使う「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はこうなっています。

[css]
blockquote {
font-family: Georgia, "Bitstream Charter", serif;
font-style: italic;
font-weight: normal;
margin: 0 3em;
}
blockquote em, blockquote i, blockquote cite {
font-style: normal;
}
blockquote cite {
color: #666;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
text-transform: uppercase;
}
[/css]

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

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

CSSで見た目を整える

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

[css]
blockquote{
margin: 3em 10px;
padding: 1.5em 1em;
background: #fff;
background: url(./blockquote2.gif) no-repeat 1% 5%;
border: 5px solid #DBDBDB;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

blockquote em, blockquote i, blockquote cite {
font-style: normal;
}
blockquote cite {
color: #063b58;
font-weight: 300;
text-transform: uppercase;
text-align: right;
display: block;
}

blockquote p{
margin: 0;
line-height: 160%;
color: #063b58;
font-size: 90%;
}
[/css]

見た目はこうなります。