引用のデザインとwebfont

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

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

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

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

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

左側に線を表示する

これは説明するまでもない。

blockquote {
	color: #767676;
	font-style: normal;
	border-left-color: #767676;
	border-left-style: solid;
	border-left-width: 8px;
	padding-left: 8px;
}

アイコン的なものを表示する

htmlにおけるelementの前に何かを行う場合は擬似要素であるbeforeを使用する。で、アイコン部分はwebfontで行うのでwebfontを読み込む設定をcssに書き込む。

このサイトのThemeはWordPressに標準で入っているTwenty Fourteenをベースにしているのですが、Twenty Fourteenはアイコン用のwebfontとしてGenericonsを取り込んでいる。ただ、GenericonsのQuoteは終了のDoubleQuoteしかないため却下。今回はFont Awesomeを導入することにした。ちなみに、GitLabもFont Awesomeを使用している。

ダウンロードとファイルのコピー

Font Awesomeからファイルをダウンロードして展開。cssとfontsのディレクトリをコピーする。このサイトの場合は以下のようなディレクトリツリーにした。

<<使用Themeのroot directory>>
├ font-awesome
│ ├css
│ └fonts
(以下略)

font-awesomeは新規に作成し、cssとfontsディレクトリはFont Awesomeから取得したものをそのままコピーした。

WebFont仕様の準備(css import)

cssにはfont-awesome.cssとfont-awesome.min.cssがある。これを既存のcssでimportすればFont awesomeのフォントを使用できるようになる。 importするcssはimport文を書くcssからの相対パスを書く。

@import url("font-awesome/css/font-awesome.min.css");

このサイトの場合はThemeのroot directory直下にstyle.cssがあり、そのstyle.cssにimport文を追加した。

font-awesome.cssを見るとわかるが、Font Awesomeを使用するときのフォント名は”FontAwesome”になっている。

blockquote:beforeの追加

doublequoteの前にアイコン的なものを表示する。実際に表示するのはアイコン画像ではなくFont Awesomeの文字である。表示する文字はfa-quote-leftにした。cssとしては以下のようになる。

blockquote:before {
	content: "\f10d";
	font-family: FontAwesome;
}

contentsの部分は表示したい文字を指定する。fa-quote-leftはunicodeの\f10dなのでそれを指定している。

以上で修正は終わり。今回はGenericonsとFont Awesomeが候補になったわけだけれど、各々比較するとこんな感じ。上がGenericons、下がFont Awesome。Genericonsもいいんだけれど、今回は。

31_blockquote_style_genericicons 32_blockquote_style_fontawesome

Double Quoteを見続けていると目に見えてくる。では。

No related posts.