[デザイン]この記事は約5分で読めます。引用タグ(blockquote)をブログで使う機会は結構あると思いますが、デザインがデフォルトのままというブログが多いです。画像を使ってまで引用タグをデザインするかと言われると...正直、私はそこまで凝った画像を作れないのでCSSでなんとかしたい派です。そこで、今回はCSSのみで引用タグをデザインする方法を紹介します。引用ボックスを浮かせる賢威6.1の引用タグ賢威6.1の引用タグはこれです。HTMLおよびCSSはこんな感じです。頭の「”(引用符)」は画像で表示されています。プラットフォームです。標準、ユーザビリティなどを意識して開発されており、無料でダウンロードして使うことができます。#444;}WordPressの初期設定(だったはず)で、引用タグ内でも「<p>(段落タグ)」が入ります。この段落タグは特にスタイルも設定していないので、他の文章と同様のスタイルになります。引用タグ下の隙間も結構あいているので、この辺も修正したい部分です。賢威の画像をやめてCSSで同様のスタイルを実現する画像のようにほぼ同じ形で実現できました。CSSは以下のようになっています。2;}CSSの「:before擬似要素」を使うことで、引用タグの最初に引用符を表示できます。「:before、:after擬似要素」を利用してさらに装飾する「:before、:after擬似要素」は、使い勝手がよく他にも使える場面が多いので簡単な引用タグで使いかたを覚えてしまいましょう。引用タグの最後にも引用符をつける引用タグの後ろにも「”(引用符)」を付ける場合は「:after擬似要素」を使います。使い方は、「:before擬似要素」と同様です、以下のCSSを追加します。2;}引用符の色を変え、文字とかぶらないようにする引用符の色を背景より濃くし、中の文字とかぶらないようにしました。ポジション(マージンやパディング)は、微妙な調整が必要だと思います。それぞれのWebサイトやブログに合った数値に変更してくだささい。0;}背景色などにもよりますが、これぐらいが引用とわかりやすくて個人的には好きです。引用ボックスを浮かせる引用ボックスに影を付け、浮き上がらせることもできます。引用タグに以下のスタイルを追加します。rgba(50,50,50,.5);}他のスタイルは省略しています。引用は引用であることをきっちりとHTMLでも表し(blockquoteで囲む)、ユーザー目線でも引用であることがすぐわかる(CSSでデザインする)ようにするべきだと思います。それほど拘る必要はありませんが、しっかり引用であることがわかりやすいデザインにしましょう。