突然ですが、ブログデザインをリニューアルしました。
仕事でCSSを書く機会があるのにも関わらず*1、自分のブログは全くメンテナンスしていなかったのはマズいと思ったので、リニューアルを決意。
参考：これまでのブログデザイン
今回も、はてな純正のCSSテンプレート「Boilerplate」をベースに制作しました。
リニューアルしたポイント
レスポンシブデザイン対応。
かなり今更ながらレスポンシブデザインにしました。
読みやすさ重視で、PC版でも1カラム表示に。
画像がドカーンと大きく表示されるため、写真系ブログっぽい感じになりましたね...笑
ニューモーフィズムっぽいデザインに。
最近、ちょいちょい見かけるニューモーフィズムデザインですが、それっぽいデザインも取り入れました。
まだボタンぐらいしか使っていませんが、今後、別の箇所でも使っていきたいところ。
Webフォントをやめてみた（実験段階）
これまでは、Googleの「Noto Sans」というWebフォント*2を採用していました。
筆者はNoto Sansを使えば、「何となく見栄えがいいよなー」という理由で使っていました。もちろん、外部から読み込むため、ページを開く際には処理時間が掛かってしまいます。
Noto Sansは美しいし、Webフォントという技術自体すばらしいですが、今回のリニューアルでは、ページの読み込み時間を短縮させたかったので、思い切ってやめてみました。
ロゴのフォントを変えた
Noto SansからSF Pro Displayにリニューアル。
Apple製のフォントで、Apple Watchから使われています。
NotoからSF Pro、よく見るとGoogleからAppleだ...笑
まだまだ改善中...
リニューアルはしたものの、まだまだ未完成なので、崩れている箇所などがあればご指摘お願いします。
今後の追加機能
・ダークモード対応
・ブログパーツ配置箇所の微調整
・できたらテンプレート公開？
