引用のデザインとwebfont

このサイトのblockquoteのデザインが視認性によくなかったので修正しました。デザイン変更で行ったことをまとめます。

変更前のデザインは文字が斜体で文字色が薄くなっている程度のもの。これを以下のように修正する。

  • blockquoteの範囲がわかるようにblockquoteの左側に線を表示する。
  • その線の範囲がblockquoteであることがわかるようにblockquote先頭部分にアイコン的なものを表示する。
    • せっかくなのでアイコン的なものはWebFontを用いる。

最終的にはこうなります。

ここが引用部分です。
先頭部分にはここが引用と分かるようにDouble quoteの開始アイコンを表示するようにしました。

Continue reading “引用のデザインとwebfont”