その後も色々気になったところに手を入れてました。
まずはテーマ
変えました。他のサイトで見たシンプルなものがとても気に入ったのでそのイメージで。テーマ探しはなかなか手間が掛かります。30くらいダウンロードしてきてライブビューしながらああでも無い、こうでも無いとトライしていきます。
選んだのは、
h1タグを使ってなかったり、blockquoteがちょっと変だったり、不要な項目を見えなくしたり、スマホの表示でもう少しマージン入れたり、と何箇所かはあとで手を入れていきます。style.cssなどをチョコチョコと。これがまたどこまでやるかも難しいですが時間が掛かる作業です。
でも、全体的に余白多めなのとアイキャッチ画像のレイアウトが気に入りました。あと見出し周りがserif（明朝）フォントなとことか。
また、テーマを変えたことでシンプルになったおかげかPageSpeed Insightsのモバイルのスコアも伸びて80を超えてきました。
serifフォント
好きなのでもっと使いたいのですが日本語のserifフォントってちょっと大変です。Androidには入っていないし、Windowsはフォントがあまり綺麗じゃ無かったり。MacとiPhoneで綺麗に見えればいいと割り切るのもありですが、なんか気持ち悪かったので、GoogleのWebフォントで日本語も提供が始まっていたので使ってみました。
Adobeと共同開発した「Noto」という綺麗なフォントです。ゴシックと明朝の2つが提供されています。Webフォントはすでに非同期でロードするように設定出来ていたので表示スピードに影響は無いと思います。が、もちろんWebから読み込むのでトラフィックは増えます。MacとiPhoneは日本語フォントについてはOSに用意されているフォントを使います。そのほか（WindowsやAndroid）の場合にはWebフォントを見るようにしています。
【追記：2018/12/30】
手近にWindows 7があったので表示テストをしてみましたがレンダリングの問題なのか、Webフォントにしようが絶望するような表示品質だったので、日本語についてはゴシック、明朝ともにWindows標準のフォントに指定し直しました。Windows 10では試せてません。合わせてAndroidのゴシックもWebフォントをやめました。
font-familyについて
いろいろ動作確認していたら、MacのSafariでYuGothicになっていないのに気がつきました。
よくあるfont-familyの例では
- -apple-system と YuGothic
を冒頭に入れて、Mac、iPhoneなどのシステムフォントであるSan Franciscoを有効にしつつ日本語はYuGothicに、ということになっていますが、Chromeではうまく動いても今のバージョンのSafariやiPhoneだと、-apple-systemを使ってしまうと日本語も含めてデフォルトのフォントを強制的に効かせてしまうようです。
とりあえず-apple-systemを削除し、Mac Safari向けにSan Fransiscoを明示しました。iPhoneはそれでは反映されないので以前のシステムフォントであるHelvetica Neueを指定してみました。
この辺はブラウザでの動きがそれぞれ違うので難しいというか、san-serifとserifだけ使ってそれぞれの環境にお任せという割り切りも必要かもといつも悩むとこです。
画像のライトボックス対応
画像をLazy loadするようにしたために使えなくなっていましたが、
というプラグインで動くようになりました。細かな設定が出来るプラグインで、「独自の jQuery イベントをトリガーにした lightbox 表示を有効にする。」をオンにすることでクリアできました。
まとめ
とりあえず満足しました。また気になるところが見つかればときどき直していきます。