8日目の活動記録です。
今回はメニューの見にくさを改善するために、
メニューのデザイン変更 ～境界線の追加～
を目標に作業を進めていきたいと思います！
やったこと
目標を達成するために、やったことを下にまとめました。
目標で境界線の追加のみを書いていましたが、変更する際に気になった箇所も合わせて変更してみました！
やったこと
①アイコンの追加
②メニュー幅と文字位置の変更
③サブメニューの境界線を追加
④ホバー時の表示設定の変更
①アイコンの追加
【具体的な内容】
メニュー名の横にアイコンを追加しました。
アイコンは「ホーム」と「記事関連」の2つで分けています。
ホーム ：家のアイコン
記事関連：ペンのアイコン
アイコンは「Font Awesome」で無料提供されているものを使用しました！
多くのアイコンが無料で使えて、とても便利なツールです！
クラシックアイコンパック |フォント Awesome
▼Before / After
【感想】
アイコンが添えてあるとメニューらしさが出ていいですね～
テキストだけだとクリックする物なのかが伝わりずらいように感じていたので、追加して良かったです。
ただ、アイコンを設定する際に1つつまずいたことがありました。
それは、公式サイトのコードを貼ったのにアイコンが出ないといった問題でした。。。
原因は「公式サイト」と「ブログ内で適用できる」Font Awesomeのバージョンの違いでした。
これは初心者なら結構はまる人がいるんじゃないでしょうか。
バージョンの違いでコードの書き方に違いがあるようなので要注意です！
②メニュー幅と文字位置の変更
【具体的な内容】
メニュー幅と文字位置を変更しました。
画像だとわからないですが、親メニュー（ブログについて）とサブメニュー（テンプレート / 設定メモ / 活動記録）のメニュー幅が違ったんです！地味ですが、気になったので幅を揃えました。
文字位置に関しては中央揃えではなく、先頭を揃えた表示にしたところがポイントです！
中央揃えにするとアイコンがあるためガタガタして気になったので、先頭揃えにしています。
▼Before / After
【感想】
メニュー幅や文字位置のような些細な変更でも大きくイメージが変わるなと改めて感じました。
また、文字位置に関してはアイコンの有無によっても、受けるイメージが変わるのがやっていて面白いと感じた点です。
③サブメニューの境界線を追加
さぁ、今回の大本命である境界線の追加です。
サブメニューの各メニュー名の間に境界線を追加しました。
サブメニューを実装した当時から境界線欲しいなと考えていましたが、ついに境界線を追加しました！
▼Before / After
【感想】
ホバー時に背景色を変更しているのですが、通常時もメニュー名の境界線は欲しかったので、
とても満足です！ただ、「ブログについて」と「テンプレート」の間に線がうまく表示できなかったので、そこを解決するために、④を行っていきます！
④ホバー時の表示設定の変更
【具体的な内容】
ホバー時の背景色が明るく、白文字と相性が悪いように感じたため変更しました。
また、サブメニューを表示している時に親メニュー（ブログについて）の背景色を変更するように変更しています。
③の感想でもあった通り、「ブログについて」と「テンプレート」の間に境界線がうまく追加できなかったので、この方法で疑似的に境界線を表現することにしました！
▼Before / After
【感想】
ホバー時に元の色より明るくと文字色が白なので、見にくいかなと感じていたので、その点も改善出来て良かったです！
サブメニューが表示されている時に親メニューもホバー時の表示にするのも何回も躓きました。
テーマ側の設定とCSSコード側の設定の優先度の問題や設定範囲の指定など何回もトライ&エラーを繰り返しました。こういった内容は「設定メモ」の記事にて書いていこうと思います。
まとめ
【満足度】
満足度は「5.0」です！
メニューデザインにて変更したと考えていたところは概ね実装できたので、とても満足です！
今後親メニューを増やす際も同様の設定をしていこうと思います。
【気づき】
今回のメニューのデザイン変更ではCSSコードを頻繁に触っていたのですが、同じ項目に対して設定がバッティングした時に、コードの書き方によって変更が反映がされないことがあるということに気づきました。また、設定範囲も指定できることが分かったので、CSSコードにて設定する際はどの範囲に対して変更したいのかを意識して行っていかなければと感じました。
【次回やりたいこと】
次回は今までの設定を記録しておきたいので、
【設定メモ】の更新
をしていきたいと思います！
コメント