はてなブログPROに、グローバルナビを追加する方法。

f:id:affmk253:20210305101151p:plain


今回、サイト上部に固定表示される「グローバルナビ」を追加してみました。

色々調べましたが、以下の記事がわかりやすく助けられました。そのままコピペでいけます。CSSとかわからないので、本当に助かりました。。

※このブログの環境について:

  • はてなブログの有料版(PRO)です。
  • Minimalism(ミニマリズム)のテーマを利用中。

www.ahiru-nonnbiri-blog.work

 

実際に行う必須の作業は、2アクションだけでした。

  • グロナビのアイコン画像を、"Font Awesome" から読み込むようcss設定。
  • グロナビ部分を記述するサンプルコードのURL、font Awesome部分を書き替え。


また、必須ではないですが、グロナビの背景を変えたい場合は、追加でCSSを追加します。参考サイト内のコードをそのままコピペで「薄いグレー背景」になるのですが、気に入ったのでそのまま使ってます。


また、グロナビのアイコン画像("ホーム"なら家のマーク、など)をfont Awesomeというサイトから探して自由に設定できるのは面白いですね。


例えば、"marketing" など英語で検索すると、それっぽいアイコンがあるので、

コード内のfa fa- 以降の赤文字部分を打ち換えるだけで簡単に変更ができました。

※<i class="fa fa-home"~ 

 

fontawesome.com


他にもブログを改修していきたいと思います。

おしまい。