はてなブログPROに、グローバルナビを追加する方法。
今回、サイト上部に固定表示される「グローバルナビ」を追加してみました。
色々調べましたが、以下の記事がわかりやすく助けられました。そのままコピペでいけます。CSSとかわからないので、本当に助かりました。。
※このブログの環境について:
- はてなブログの有料版(PRO)です。
- Minimalism(ミニマリズム)のテーマを利用中。
実際に行う必須の作業は、2アクションだけでした。
- グロナビのアイコン画像を、"Font Awesome" から読み込むようcss設定。
- グロナビ部分を記述するサンプルコードのURL、font Awesome部分を書き替え。
また、必須ではないですが、グロナビの背景を変えたい場合は、追加でCSSを追加します。参考サイト内のコードをそのままコピペで「薄いグレー背景」になるのですが、気に入ったのでそのまま使ってます。
また、グロナビのアイコン画像("ホーム"なら家のマーク、など)をfont Awesomeというサイトから探して自由に設定できるのは面白いですね。
例えば、"marketing" など英語で検索すると、それっぽいアイコンがあるので、
コード内のfa fa- 以降の赤文字部分を打ち換えるだけで簡単に変更ができました。
※<i class="fa fa-home"~
他にもブログを改修していきたいと思います。
おしまい。