QooQのカスタマイズ；blockquoteのスタイルシートを修正-些事日誌

bloggerのテーマQooQデフォルトのスタイルシートではblockquoteで囲まれた引用部分と他の部分の境が分かりづらい印象（下図）です。そこでスタイルシートを修正して引用部分のデザインを誇張することにしました。

blockquoteのスタイルシートをカスタマイズ

blockquoteのスタイルシート修正にあたり、以下の記事を参考にさせていただきました。

引用符「"」用にフリーのWEBアイコンフォントを導入

WebアイコンフォントはWEBページ上であれば文字と同じように表示できるアイコンのことで、画像のアイコンをと違い、拡大してもぼやけず色もサイズも簡単に変えることができるためデザインへの汎用性が高いのです。今回、参考にさせていただいた記事でもデザインに柔軟に対応できるWEBアイコンフォントを導入することを進めています。

具体的にはWEBアイコンフォントを提供するFontAwesomeさんへのリンクをQooQのHTMLに加筆するだけです。

blockquoteのスタイルシートを修正する

続いて、blockquoteのスタイルを変更（下図）しました。今回は「FIRE日和」さんの紹介したデザインをそのまま使用しています。この部分、「FIRE日和」さんも紹介されている「サルワカ」さんの「CSSで作る！魅力的な引用デザインのサンプル30（blockquote）」で紹介されているようにCSSをいじればいろいろなデザイン上の遊びが可能です。今後、参考に変更することも考えたいと思います。