みやもとブログ

好きなものの感想などを書いています。読書、ラジオ、資格、Notionなど。

目次
目次

【はてなブログ-カスタマイズ】スマホ版グローバルナビゲーションのデザインを変更してみる

この記事をシェアする

数日前から適用していますが、スマホ版のグローバルナビゲーションのデザインを少し変更してみました。
スマホ版のグローバルナビゲーションに関しては、以下記事で詳しく書いています。

miya-moto-blog.hatenablog.com

直近のブログカスタマイズはアイコン関連のものが多く、今回の記事もその流れです(直近のアイコン関連の対応は以下リンクにて)。

せっかくFont Awesomeのアイコンが使えるというのと、スマホ版にもアイコンを使える余地があったなということで、変更してみた次第です。

それではサクッと本題へ。

変更内容(画像)

まずは変更前後の画像を載せます。

左が変更前、右が変更後です。

各カテゴリーのリンクにアイコンを追加してみました。
アイコンはPC版のグローバルナビゲーションと同じものを選びました。

また、各カテゴリーの間に薄いグレーのボーダーを入れてみました。
好みは人それぞれですが、各カテゴリーを見分けやすくなり、見やすくなったかなと思います。

参考サイト

web-manabu.com

こちらのサイトにFont Awesomeの対象バージョンのアイコン一覧が載っていました。
こちらを見ながらそれっぽいアイコンを探しました(前回の記事と同様)。

大変参考になりました。ありがとうございます。

適用したコード

いつもコードを載せているのですが、今回は割愛します。

「Font Awesome」の導入に関しては、以下のサイトが参考になるかなと思います。

theme-silence.hateblo.jp

 

アイコンの設定方法に関しては、以下のサイトが参考になるかなと思います。

web-manabu.com

おわりに

ということで、「スマホ版グローバルナビゲーションのデザイン変更」に関してアレコレ書いてみました。

ここ数回、ブログカスタマイズはアイコン変更に関する内容が多くなりました。

自分のブログ全体を見渡して、アイコンを使っている箇所、追加すると良さそうな箇所を探していき、見つけたところから随時対応して、随時記事にしていきました。

今回の記事で、アイコンに関する対応は最後になるかなと思います。

またなにかブログカスタマイズしたら記事にします。

関連記事

グローバルナビゲーション関連

グローバルナビゲーションの関連記事をまとめました。
気になる記事があればぜひ。

デザインテーマって意外と簡単にカスタマイズできるんですね

目次のリンク先とグローバルナビゲーションが被るので対策

スマホ版のグローバルナビゲーションを変更してみる

グローバルナビゲーションのデザインを変更してみる

グローバルナビゲーションのアイコンを変更してみる(Font Awesome)

スマホ版グローバルナビゲーションのデザインを変更してみる

グローバルナビゲーションのデザインを大幅に変更してみる

グローバルナビゲーションの不具合対応(z-index)

スマホ関連

スマホ関連の記事は他にも書いています。 気になる記事があればぜひ。

スマホ版のグローバルナビゲーションを変更してみる

スマホ版で追従する目次を表示する

アイコン関連

アイコン関連の記事は他にも書いています。
気になる記事があればぜひ。

サイドバーの各項目にアイコンを設定してみる

グローバルナビゲーションのデザインを変更してみる

グローバルナビゲーションのアイコンを変更してみる(Font Awesome)

サイドバーのアイコンを変更してみる(Font Awesome)

スマホ版グローバルナビゲーションのデザインを変更してみる

TOP HOME