iiie.nagoya

物づくりと生活、"経験"を記事へ

フッターデザインとブログタイトルを一部変更しました

f:id:gorislog:20190407194632p:plain




 

新年が明けて、すでに半ばです。早い。

 

最近、旧年中に行いたかった、ブログ軽量化に向けて作業をしています。

 

www.iiie.nagoya

 

僕のブログの読み込み速度が遅いのは大方、“画像サイズ”の問題なので、画像処理や圧縮、スクリプトを使用した読み込み遅延など、検討しています。

 

はてなブログの画像投稿設定で、画像の圧縮処理が自動で行えることが分かりました。

 

www.mochi-mochi-kun.com

はてなフォトライフより、画像投稿時に画像を圧縮処理してくれるらしく、画像データによっては1割ほどになるみたい。閲覧デバイスによりますが、見た目がほぼ変わらずに軽量化できるとのこと。

 

今後投稿する記事は画像圧縮したものになりますので、ある程度読み込み速度の改善を感じられるかと思います。

 

それと並行して効果は少ないですがCSSの無駄や高負荷の可能性があるjQuaryの見直しも行なっています。

 

今回の投稿はCSSの軽量化。重複していた内容や、無駄な表現の削除を進めています。

 

f:id:gorislog:20181128190435p:plain

旧フッターデザインのメニューボタン

 

フッターデザインのCSSアニメーションボタンを削除しました。デザイン性が高く気に入っていたのですが、スマートフォンの場合は指でタップする為、画面上ではモーションが動きますが視覚的には指が邪魔してモーションが見えない状態でした。レスポンシブデザインなので、@media 指定してPCのみモーションのあるボタンにすることも考えましたが、ボタンデザインだと”伝わりづらい”こともあるので、メニューは文字表記へ変更しました。

それと合わせて、フッターのSNSリンクの画像もモーションも削除。また、画像リンクである必要も感じられなかったので、メニューと同様、文字表記にしました。

 

f:id:gorislog:20190113101239p:plain

変更後のフッターデザイン

 

フッターのコンテンツリンクにモーションを減らし、画像ではなく“はてなブログ”で使えるアイコンフォントと文字表記で統一。今までよりも若干軽量化でき、ボタン式よりも「わかりやすい」デザインになったと思います。

 

f:id:gorislog:20190113101314p:plain

jQuery, bxSliderによる自動スクロールの画像リンク表示

 

現在“おすすめ記事”を表示している、自動画像スクロールリンクのbxSliderはサイト内でも高負荷な表現ですので代替案を模索中。単なる画像リンクも考えましたが、リンク数の増加によって、ブログデザインがガチャガチャする可能性があるので、慎重に決めます。

試しに、はてなブログの機能にあるサイドバー(表示位置はフッターですが、サイドバーを記事部の下へもってきているので、実際はサイドバーです)より、注目記事の”最近のアクセス数”の上位より表示する”モジュールを使用しましたが、どうやら高負荷のようでbxSliderよりもページ読み込み速度が遅かったです。

 

効果的な改善には至っていませんですが、少しづつ改善を進めていきたいと思います。

 

ブログタイトルを変更しました

f:id:gorislog:20190113101738p:plain

”iiie@diy”→"iiie"に変更しました。

 

変わらず"DIY"カテゴリーの投稿がメインですが、その他の投稿も増えてきましたのでタイトルの"diy"を取ることにしました。

 

今後ともよろしくお願いします。