blockquoteタグにCSSだけで引用符つけたりオシャレにしたい

blockquoteタグを使った外部テキストの引用をCSSだけで装飾するサンプルソース5種です。

blockquoteタグにCSSだけで引用符つけたりオシャレにしたい

文中で他の文書を引用するときに使うblockquoteタグにダブルクォーテーションなどを足すCSSです。

引用文であることを強調すると地の文がとても読みやすくなるので、きちんと区別することをオススメします。

blockquoteタグにCSSだけで引用符をつけたい

【HTML】
<blockquote>これは引用文です</blockquote>

blockquoteタグにCSSだけでダブルクォーテーションを付けます。

まずは表示用のHTMLを用意しておきましょう。

左マージンを取って英文サイト風

これは引用文です。

ブラウザにプリセットされているblockquoteのデフォルトスタイルは、ほとんど左マージンが大きめにとってあると思います。

このイメージを崩さず英語圏でよく見るニュースサイト風のスタイルに仕立てます。

【CSS】
blockquote {
position: relative;
margin: 2em 0;
padding: 1em 1em 1em 2.6em;
font-size: .9em;
border-left: 5px solid #CCC;
border-radius: 2px;
}
blockquote:after{
position: absolute;
bottom: 0;
right: 0;
content: '”';
font-family: sans-serif;
font-size: 6em;
opacity: .1;
}

引用部をちょっと浮かせる

これは引用文です。

引用したブロックに影を付けてちょっと浮かせてみます。

視覚的に地のレイヤーから切り離された感じになるので、本文とは違うことが伝わりやすい。ユーザに対しても親切なデザインだと思います。

【CSS】
blockquote {
position: relative;
margin: 2em 0;
padding: 1.2em;
font-size: .9em;
border: 1px solid #CCC;
border-radius: 2px;
background: #FFF;
box-shadow: 0px 1px 3px rgba(0,0,0,.2);
}
blockquote:before{
position: absolute;
top: 15px;
left: 20px;
font-family: 'お好きなフォント';
content: '“';
font-size: 4em;
opacity: .1;
}

引用部に色を付けて引用符は白抜き

これは引用文です。

引用部分に色を付けて、引用符を白抜きにしてみます。地の色が濃いサイトにも良いですね。

背景色はグレー以外の色を指定することも出来ますが、あんまりガチャガチャにすると視認性が下がります。コントラストは地色と大きく変えないのがオススメ。

【CSS】
blockquote {
position: relative;
margin: 2em 0;
padding: 1.2em;
font-size: .9em;
background: #DFDFDF;
}
blockquote:before{
position: absolute;
top: 15px;
left: 20px;
content: '“';
font-size: 4em;
color: #FFF;
font-family:"ＭＳ Ｐゴシック",sans-serif;
}

左上・右下に引用符（ノーマル）

これは引用文です。

引用符を左上と右下に付けるCSSです。指定フォントは引用文と別のフォントを指定出来ます。

【CSS】
blockquote {
position: relative;
margin: 2em 0;
padding: 1.2em;
font-size: .9em;
border: 1px solid #CCC;
border-radius: 6px;
}
blockquote:before,
blockquote:after{
position: absolute;
font-size: 4em;
opacity: .1;
font-family:'お好きなフォント';
}
blockquote:before{
top: 15px;
left: 20px;
content: '“';
}
blockquote:after{
bottom: 0px;
right: 20px;
content: '”';
}

左上・右下に引用符（回転版）

これは引用文です。

左上の開始引用符を180度回転して閉じ引用符の代用とする方法。基本的な記述は前章のノーマル版と変わりませんが、最後でフォントを180度ひっくり返しています。

フリーフォントなど、文字数が限られていて閉じ引用符が収録されてないフォントを使うときに便利です。

【CSS】
blockquote {
position: relative;
margin: 2em 0;
padding: 1.2em;
font-size: .9em;
border: 1px solid #CCC;
border-radius: 6px;
}
blockquote:before,
blockquote:after{
position: absolute;
font-size: 4em;
opacity: .1;
font-family: 'お好きなフォント';
content: '“';
}
.blockquote:before{
top: 15px;
left: 20px;
}
.blockquote:after{
bottom: 15px;
right: 20px;
transform: rotateY(180deg);
}

Twitterの埋め込みツイートを回避する

おまけとして、他のスタイルと被らないようにするためのTipsも載せておきます。

Twitter に限らないのですが、blockquote に希望のCSSスタイルを直接指定すると SNS の埋め込み投稿とバッティングすることがあります。

例えばTwitterの場合は twitter-tweet というクラスが指定されているので、これを除外すれば各CSSの独立性が保てるという考え方。他のSNS埋め込みにも対応したいときは、それぞれカンマ区切りなどで対応して下さい。

【CSS】
<style>
blockquote:not([class="twitter-tweet"]) {
  // お好みの装飾
}
</style>

【 関連記事 】

ダメ！Twitter埋め込みツイートの表示崩れをCSSセレクタで回避する

動作の解説です。

おわりに

自サイトで使ってるblockquoteのデザインを変えるにあたって、あれこれ試行錯誤してみた経過でした。中間生成コードを上書き消去するのも もったいない気がしたので、作業録・備忘録として置いときます。

なお、WordPressなど自動で <P></P> タグが挿入されるCMSを使っているとマージンなどの設定が狂いがちです。フォントを変えても好みの隙間などあると思うので微調整してみて下さい。

それではまた。(・∀・)