綺麗だなぁ…と思うサイトを見ているとだいたい共通していることがあります。もちろんフォントがとか、色がとかそういうのもあるんですが、それよりも共通しているのがレイアウトがシンプルであることだと思います。とにかく不要な情報がそぎ落とされて、必要な情報のみ記載されている。その上でフォントや色が綺麗。

職業柄か、デザイナーさんとかフロントエンドエンジニアの人のサイトが多いのですが、せめて少しでも近づけるように真似てみようと記事一覧ページから不要と思った情報をとっぱらったりしました。

前後比較


変更前

変更後

どうでしょうか…???

まず、記事のカテゴリーを消しました。個人的にですが、他のサイトさんでこう言った情報が載っているからといって実際にその情報を使って何かしたことがないということもあって、不必要ではないかという判断です。

次にContinue reading...の表記を消しました。最近はタイトルがリンクになっているのが暗黙の了解的なのでみんなわかっているとおもうのでいらないのでは?と思いました。ただ、念のために記事の導入部を丸ごとリンクにしました。導入部の文言に他記事などのリンクが含まれているとバグるんですが、一旦これで行くことにしました。

最後に、背景色を変えてカードっぽい感じで表示していたものをやめました。代わりにそれぞれの記事の前後のマージンを多めにとるようにしました。余白を多く設けることで見えない線が出来上がり、それが境界を作り出す。みたいなことをエライ人も言っていた…ような気がします。

インラインシンタックスの変更など


インラインのシンタックスハイライトの色も変更したりしました。ほぼわからないレベルだとは思いますが…

見出しについて


実のところ太字があんまりすきでなくて、h1~h6の太字を辞めたいです。さらにいうと、日本語(というよりは英数字以外)はフォントが大きくなると、見た目が汚くなると思っていて、そういうのもあってできれば見出しのフォントもサイズを下げたいのですが、サイズを下げてしまうと本文と見分けがつかなくなってしまうので大変厳しい。

CSSの分割と配信時のサイズ


かねてより、記事に不要なCSSを分割してみようかな…という気持ちがあったのでやってみました。

今まで書いたことはないですが、このサイトでは速度を重視して[1]います。ただし、トップページと各記事の速度のみです。ですので、とりあえずトップと各記事ページで使用しているCSSは1ファイルとしてそれ以外は分割するようにしてみました。トップや各記事は1つのCSSのみ読み込んでいますが、例えばArchivesページをブラウザの開発者ツールで確認すると複数のCSSを読み込んでいるのがわかると思います。

webpackとHtmlWebpackPluginを用いてやりました。正直この辺のフロントエンド周りのツールにたいしてはHha~~~~~~~nnnというお気持ちがあるのですが、なんだかんだ言ってそれらのおかげでできました。ありがとうwebpackとHtmlWebpackPlugin

いよいよ配信時(gzip)のCSSが7KB切りそうになってきた。頑張りたい。


  1. 本当に重視しているのであれば広告をやめるべきなんですが… ↩︎