Palleteにはスマホ表示時に画面の下に固定表示されるナビゲーションを設置できます。
オシャレなメニューですが、使用されているはてなブログのアイコンフォントではアイコンの種類が物足りないという方向けの記事です。
HTMLとCSSが公開されているのでPallete以外のテーマでも使用可能ですが、当記事はPalleteで使用されている方を対象としています。
Font Awesomeとは
アイコンのようなフォントをWEBサイトで使用できる素晴らしいサービスです。
年間60＄のPro版ではより多くのアイコンや機能が使えますが、無料版で使えるアイコンフォントだけでも十分すぎるボリュームがあります。
特に意味はないですがこんなパラソルも好きなところに表示できます。
Font Awesomeを読み込む
こちらのページに表示されているCSSをコピーします。オプションを設定できますがデフォルトで構いません。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
執筆時点ではこのようになっています。最新バージョンのアイコンを使いたい場合はサイトの方から最新のCSS読み込みコードをコピーしてください。
コピーしたコードを、はてなブログの［デザイン］＞［カスタマイズ］＞［ヘッダ］＞［タイトル下］の一番下に記述します。
これでFont Awesomeのアイコンを好きなところに表示できるようになりました。
Font Awesomeの基本的な使い方
ここで少しFont Awesomeの基本的な使い方を紹介します。を表示したいとき、HTMLでは
<i class="fas fa-umbrella-beach"></i>
と記述しています。fa-umbrella-beachがアイコンの名前にあたる部分で、fasはFont Awesomeのアイコンの分類コードみたいなもので、他にもfabやfarなどがあります。
アイコンはIcons | Font Awesomeで探したり上部検索バーから探したりして見つけます。英語でしか検索できないことに注意してください。
アイコンページ（例：umbrella-beach）を開くと、貼り付けに必要なタグが掲載されているのでコピーペーストすれば貼り付け完了です。
Palleteのスマホ用ボトムナビゲーションのアイコンをFont Awesomeのものに書き換えてみる
こちらの導入記事に従い、スマホ用ボトムナビゲーションのHTMLの下部に貼り付け、PC表示の際はボトムメニューを表示しない、（表示するのであれば）はてなブログのフッターの底上げ、ボトムナビゲーションがiPhoneXのホームバーと被らないようにするところまでを終えます。
そしてスマホ用ボトムナビゲーションのHTMLタグのアイコン部分を書き換えます。
<i class="blogicon-hatenablog"></i>
このiタグで囲まれている部分がアイコンを表示するタグです。これをFont Awesomeのアイコンに書き換えます。
<i class="fas fa-umbrella-beach bottom-fa"></i>
fas fa-umbrella-beachの部分がFont Awesomeのアイコン部分です。bottom-faは後ほどデザインを調節するのに使います。リセットに使うので必ず最後に記述してください。ここまで変更すると表示がこう変わります。
パラソルのアイコンが表示されたのは良いですが、表示が崩れてしまいました。これはfasでline-height:1;が適用されることが原因なので、先ほど追加したbottom-faをいじってデザインをリセットします。
i.bottom-fa-i {
line-height: 10px;
font-size: 20px;
}
これをデザインCSSに書き加えるとこうなります。書き加える場所は、Palleteのカラースキンを適用している方は/=== bottom-menu ===/の下あたりが良いでしょう。
margin-bottomを追記することでアイコンと文字とのスペースは離せますが、すると今度は他のメニューの文字の高さと合わなくなってしまいます。
はてなブログのアイコンフォントと、Font Awesomeのアイコンフォントのデザインを綺麗に合わせるのは割と手間なので、アイコンの上下のスペースのバランスの整っていない感じがどうしても気になる場合は、全部Font Awesomeのアイコンを使うか、もう少しだけカスタマイズを頑張る必要があります。
Font Awesomeのアイコンとはてなブログのアイコンのデザインを合わせる
Font Awesomeを表示したい場所のiタグの、１つ手前のaタグにclassを適用します。
<a class="bottom-fa-a" href="#">
<i class="fas fa-umbrella-beach bottom-fa"></i><br><span class="mini-text">読者登録</span></a>
</li>
このbottom-fa-aに要素を書き加えます。ついでに、先ほど作ったbottom-faも修正します。
ul.bottom-menu li a.bottom-fa-a {
padding-top:3px;
line-height:5px;
}
i.bottom-fa {
font-size:20px;
}
padding-topでアイコンの表示位置を、line-heightでアイコンと文字との間隔を微調整してください。セレクタがやたら長いのは優先度を上げるためです。
先ほど.bottom-faに記述していたline-heightは.bottom-fa-aに移動させました。また、font-sizeを変更することでアイコンの大きさを微調整できます。
最後に
ちなみに当ブログはデザインを合わせるのが面倒だったので、全部Font Awesomeのアイコンを使っています。
ボトムナビゲーションのデザイン自体を変更したい場合は、.bottom-menuをいじると色々と変更できます。
Palleteのカスタマイズは記事は下記ページにまとめてありますので是非ご覧ください。