デザインパフォーマンスなどのブログのちょっとした改善

こんにちはnasustです。

このブログをちょっとだけ改善しました。 デザインやパフォーマンスなど。

デザイン

box-shadow

このブログのデザインで色々box-shadowを利用しています。 通常のbox-shadowであるとイマイチ引き締まった感じがしないですが、 以下の記事を参考に修正しました。

物体に近いほど影が強くなるようにパラメーターを修正して、引き締まった感じにしました。

テキストリンク

以前は下線無しで、アイコンを使用してリンクであると表現していましたが、分かりにくいので下線ありにしました。ただしtext-decorationはnoneで、border-bottomで下線を引きました。 border-bottomのほうがテキスト読みやすそうだからです。

パフォーマンス

全ての画像をamp-imgに変更しました。PageSpeed Insightsでlazy imageに変更してと警告が在りましたが放置していたので対応しました。 ちょっとだけ点数が上がりました。

修正する際にちょっとだけ困ったのが、background-size:cover;で表示しているところを、同じようにamp-imgで表示させることです。

以下のページで解決方法が解説されていました。

amp-imgでもcssのobject-fit: contain;で対応できました。

コンテンツの構造

パンくずリストが、コンテンツの構造と合っていないのを修正しました。 FlutterやGoなどの入門/解説記事のコンテンツの構造はメニューの親子関係と対になっています。

このブログのパンくずリストのテンプレートは、セクションというディレクトリ構造で表現していました。

それでは合っていないので、メニューの構造に合わせてパンくずリストを表示するようにしました。

パンくずリストで各項目の親のリンクは概要ページを指すようにしました。

概要ページは無かったので新たに作成しました。 その内容の中に目次が在ります。目次はショートコードでメニューの各コンテンツのリンクから作成するようにしました。

目次を作成するとコンテンツが増えてきたなと感じますね。

older