【Stinger7】メニューバーにFontawesomeを入れる簡単な方法

   

Stinger7 メニューバーにFontawesome

@yuichico_です。今回はStinger7でメニューバーの文字左にFontawesomeのiconを入れるカスタマイズを紹介します。Fontawesomeをメニューバーへ入れることでデザイン性がグッと増しますし、なにより画像のjpgやpngよりも軽いです。プラグインで簡単にできますので、ぜひ実践してみてください。

スポンサードリンク

子テーマのインストール

リンク  Stinger7親テーマと子テーマのダウンロードとインストールのやり方

プラグインのインストール

プラグイン→新規追加

【Stinger7】プラグインfontawesome新規追加

右上検索バーで Font Awesome 4 Menus を入力してEnter

【Stinger7】プラグインfontawesome検索

今すぐインストール

【Stinger7】プラグインfontawesomeインストール

プラグインを有効化

【Stinger7】プラグインfontawesome有効化

これでプラグインが有効になりました。続いてFont Awesome のアイコンを入れましょう。

アイコンを入れる

リンク Fontawesome io icons

種類が豊富ですので、ご自身のメニューにあったアイコンを入れましょう。

アイコンをコピー

例では home で実装いたします。

【Stinger7】fontawesome home クリック

<i class="fa fa-home"></i>の中の fa fa-home をコピーします。ダブルクォーテーションはコピーしないでください。

【Stinger7】fontawesome user fa fa-homeコピー

メニュー文字左へ追加させる

例としてカスタムリンクに挿入させます。カスタムリンクの右の▼は階層になっていてクリックすると、URLとリンク文字列が入力するところがでてきて、その下にメニューに追加ボタンがあります。まず、ご自身のブログのURLを入力してその次にリンク文字列を入力してから メニューに追加 をクリックします。

【Stinger7】fontawesomeプラグインメニュー追加

するとメニュー構造の一番下に反映されているのがわかります。Home左 カスタムリンク ▼をクリック

【Stinger7】カスタムリンク クリック

CSS class(オプション)の下に fa fa-home をペーストします。

【Stinger7】fontawesomeメニューCSS挿入

Home左 カスタムリンク ▼をクリックをクリックすると階層が閉じます。Homeをドラッグ&ドロップして一番上にもってきましょう。

【Stinger7】fontawesomeプラグインメニュー ドラッグ&ドロップで追加

メニューの一番上にきました。

【Stinger7】fontawesomeプラグインメニュー ドラッグ&ドロップで追加された

メニュー構造下のメニュー設定

今後の為ですので、チェックを入れてください。

トップレベルページを自動的に追加

固定ページの記事を書いて投稿した場合自動的に反映されます。

トップ用メニュー

文字通り、トップヘッダーの下へメニューバーとして反映されます。

フッター用メニュー

フッターにメニューを追加します。チェックを入れるとブログ一番下にもメニューが反映されます。

 

【Stinger7】fontawesomeメニュー チェックを入れる

メニュー保存をクリック

【Stinger7】fontawesomeメニュー 保存

追加されました。クリックすると 自分のブログへ飛ばされるように設定しました。他の設定も同じようにやってみてください。

こちらがPC

 

【Stinger7】fontawesomeメニュー 追加された

スマホです。

【Stinger7】fontawesomeスマホメニュー 追加された

 

まとめ

Font awesomeは手軽に実装できて、非常に軽いのが特徴です。サイトページが軽いとGoogleから受ける評価も高いですので、参考にしてください。

シェアしていただけると助かります。

 - Stinger7, カスタマイズ