WordPress の Twenty Seventeen をカスタマイズ

このサイトは WordPress のデフォルトテーマの Twenty Seventeen を使用している。主な理由は他のテーマを探すのが面倒だからだ。素人が作ったテーマやプラグインで、雑なコードが混じっているとサイトのパフォーマンスに影響がでるので、見栄えよりも情報を記録する目的の場合、デフォルトテーマで十分だったりする。

しかし、 “情報を確認する”という観点から、見やすさ(読みやすさ)というのは大事で、特に見出し文字など、H2, H3, H4 がぱっと見で判別できるかどうかは記事のスキミングの効率に関わってくる。というわけで、Twenty Seventeen を少しだけいじってみようと思う。

見出し

記事内の見出し

Twenty Seventeen をそのまま使うと、見出しの種類の判別がつけにくい。特に H2 と H3。大きさが違うのだけど、スクリーンをまたぐような長文だと、ぶしつけにでてきた見出しが H2 か H3 か迷う。この思考負荷をなくしたい。

Dashboard -> Appearance -> Customize -> Additional CSS から以下を追加。

で、こんな感じになる。

ウィジェットの見出し

ついでにウィジェットの見出しも同じような感じにしておく。

引用

blockquote タグの表示がなんか雑で、文字の大きさも、通常の段落の文字サイズと比べ大きく、全体として整っていない印象を受ける。引用は多用していきたいので、これも整えておく。今回はインデント、マージン、文字サイズだけ。

インライン code タグ

インラインのコードタグで囲まれた文字も重要。これは太字にするほどでもない、操作方法などで紹介するメニューの表記ラベルや、プログラミングなどで出て来る関数などの固有名詞を、少し目立たせたい時に使う。

注意したいのが p タグ内の code に適用させる。 pre タグ内だと、複数のラインをまたぐコードを紹介する時に使うので、そちらはインライン処理ではなくブロック処理されたほうが良い。

記事内画像

記事中に挿入する画像だが、本サイトは本サイトのスクリーンショットなどを入れるため、白背景がダブって画像の境界が分かりづらい。ということで、薄い境界線を与える。

おまけで角を丸くしておいた。

ハイパーリンク

ハイパーリンクの下線がうるさいので、ホバー時のみ出てくれるようにしたい。パラグラフ内リンクは瞬時にわかるように、既存の形にしておく。

雑感

思い切って文字の色を反転させ背景色を与えることで、多少画面に締まりが出たかなとは思うけど、グラフィックデザインの専門家ではないので、よくわからん。もっと良いデザインはあるはず。またいじっていい感じになったら更新予定。