こんにちはです。あっちのそららです。
このたび、ブログデザインのリニューアルを行いました。
大きく変えた部分、細かく調整した部分などいろいろあるので、備忘録としてまとめておきます。
ヘッダー
Before
After
ヘッダーのデザインを一新し、賭けに近い大きな路線変更をしました。
縦幅が画面いっぱいになるよう設定。しかし、パソコンで一定以上ズームすると、中のイラストや文字が画面内に収まらなくなる問題が発生。なので、縦幅に最小値を設定し、ズームに応じて縦幅が広がるようにしました。
スクロールを促す線のアニメーションも加え、ファーストビューの印象がガラリと変わった気がします。
プロフィール
Before
After
ヘッダーに合わせた配色にし、後述のaboutページのバナーも加えたレイアウトにしました。
リニューアル前は、ヘッダー直下に配置していましたが、ページ下部に移動しました。
検索ボックス
検索ボックスを追加し、記事を探しやすくしました。
検索結果のページおよび、記事が見つからなかったときのページも、軽く整えてあります。
レイアウトのズレを修正
Before
After
記事下のページャーなど、文字数や行数の違いで、レイアウトがズレる場面がありました。
どんな条件でも、なるべく整って見えるよう修正しましたが、対応しきれていない部分もあるかもしれません。
aboutページ
自己紹介などに使われるaboutページ。これまでは記事と同じデザインにしていましたが、中身を見直し、専用のデザインを組みました。
長々と自分語りをするのも痛いと思ったので、情報をコンパクトにまとめて読みやすくしました。
aboutページはこちら
フッター
フッターのイラストもバージョンアップ。くるっと回るアホ毛はそのままで、まばたきのアニメーションを追加しました。
ページ最下部で元気に動いています。
ダークモード対応
デバイスのダークモードに対応しました。
白より黒の配色に慣れている方、暗い場所で閲覧する方におすすめです。お使いのデバイスの設定変更により、ブログの配色が切り替わります。
その他
変更点が多すぎて全部は書き切れませんが、パッと見で分かるのは以下のとおり。
- フォントを変更
- ハンバーガーメニューのデザイン変更
- スマホでのカードレイアウトを1列→2列に
- 記事下「シェアボタン」「にほんブログ村」のデザイン変更
- ホバー時のアニメーションはマウスでのみ有効に
- スマホなどの拡大縮小操作を有効に
おわりに
ブログ全体のチェックはしましたが、もしかしたら抜けがあったり、環境によってはレイアウト崩れがあるかもしれません。
ひとまずリニューアルは完了ということで、しばらく新鮮な気分で記事が書けそうです。
にほんブログ村の欄はなんかイマイチなので、また作り直す！
