@yuichico_です。今回はStinger7でメニューバーの文字左にFontawesomeのiconを入れるカスタマイズを紹介します。Fontawesomeをメニューバーへ入れることでデザイン性がグッと増しますし、なにより画像のjpgやpngよりも軽いです。プラグインで簡単にできますので、ぜひ実践してみてください。
子テーマのインストール
リンク Stinger7親テーマと子テーマのダウンロードとインストールのやり方
プラグインのインストール
プラグイン→新規追加
右上検索バーで Font Awesome 4 Menus を入力してEnter
今すぐインストール
プラグインを有効化
これでプラグインが有効になりました。続いてFont Awesome のアイコンを入れましょう。
アイコンを入れる
種類が豊富ですので、ご自身のメニューにあったアイコンを入れましょう。
アイコンをコピー
例では home で実装いたします。
<i class=”fa fa-home”></i>の中の fa fa-home をコピーします。ダブルクォーテーションはコピーしないでください。
メニュー文字左へ追加させる
例としてカスタムリンクに挿入させます。カスタムリンクの右の▼は階層になっていてクリックすると、URLとリンク文字列が入力するところがでてきて、その下にメニューに追加ボタンがあります。まず、ご自身のブログのURLを入力してその次にリンク文字列を入力してから メニューに追加 をクリックします。
するとメニュー構造の一番下に反映されているのがわかります。Home左 カスタムリンク ▼をクリック
CSS class（オプション）の下に fa fa-home をペーストします。
Home左 カスタムリンク ▼をクリックをクリックすると階層が閉じます。Homeをドラッグ&ドロップして一番上にもってきましょう。
メニューの一番上にきました。
メニュー構造下のメニュー設定
今後の為ですので、チェックを入れてください。
トップレベルページを自動的に追加
固定ページの記事を書いて投稿した場合自動的に反映されます。
トップ用メニュー
文字通り、トップヘッダーの下へメニューバーとして反映されます。
フッター用メニュー
フッターにメニューを追加します。チェックを入れるとブログ一番下にもメニューが反映されます。
メニュー保存をクリック
追加されました。クリックすると 自分のブログへ飛ばされるように設定しました。他の設定も同じようにやってみてください。
こちらがPC
スマホです。
まとめ
Font awesomeは手軽に実装できて、非常に軽いのが特徴です。サイトページが軽いとGoogleから受ける評価も高いですので、参考にしてください。
コメント