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

こんにちは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などの入門/解説記事のコンテンツの構造はメニューの親子関係と対になっています。

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

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

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

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

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

iOS、Android、Web、APIサーバーなどのフロントエンド・バックエンドを開発するソフトウェアエンジニアです。 UI/UXが好きです。かっこいいUIやWebデザインを眺めるのが趣味です。 このブログはソフトウェア開発関係の内容を記事にしています。
web service:
GitHubQiitaTwitterはてなブログ
handle name:
nasust
real name:
hideki mori
job:
ソフトウェアエンジニア
develop:
target: ios, android, web page, single page application, api server, system service, cli tool, linux embedded device

lang: c/c++, go, swift, objective-c, java, kotlin, typescript, dart, javascript, ruby, python, php

tool: vscode, xcode, android studio, photoshop, vim, docker