皆さま、お盆休みはどのように過ごされましたか？
わたしは、鳥取の氷ノ山までキャンプに行ったのが唯一の活動で、あとはウチでゴロゴロと過ごしておりました。
やらなきゃならないことも色々あるのですが、「これはこれでまあいいか」と思えたりして…
今回は久しぶりにWordpressのお話です。
先日このブログのメニューに「Font Awesome」のアイコンを表示するようカスタマイズしたので、その方法を紹介したいと思います。
オヤジのこんなブログでも、こうした装飾を使うと、少し華やいだ感じになると思いませんか！？
Font Awesome 4 Menusのインストール
WordPressのプラグイン「Font Awesome 4 Menus」をインストールすると、簡単に「Font Awesome」のアイコンをメニューに表示できます。インストールは、いつも通り、プラグイン > 新規追加 から実行できます。
準備として必要なのは、これだけです。
Font Awesomeでアイコンを検索
「Font Awesome」のサイトで、メニューに表示したいアイコンを探します。
メニューにある「Icons」をクリックして、検索ボックスに使いたいアイコンと関連が深そうなキーワードを(もちろん英語で)入力します。
今回はメニューのホームに使えそうなアイコンを探す想定で、とりあえず「home」と入力してみました。下に検索結果が表示されます。
気に入ったアイコンをクリックすると名前が表示されるので、表示された名前をコピーしておきます。打ち間違える心配がなければ、もちろん覚えておくだけでOKです。
この例では「fa-home」がアイコンの名前です。
メニューアイテムへの設定
外観 > メニューを表示して、アイコンを表示したいメニューアイテムの「CSS Class (オプション)」に、さきほどの名前「fa-home」を入力するだけです。
他にもアイコンを表示したいメニュアイテムがあれば、この「検索」と「設定」を繰り返し実施してください。
サブメニューにも設定できます。
アイコンが表示されているか確認
メニューの変更を保存すると、ブログのメニューに設定したアイコンが表示されます。
表示されているアイコンをインスペクタというツールで見てみると、「Font Awesome」のサイトにあったのとは少し違いますが、<i class=”fa fa-home”></i> で表示されていることがわかります。
このように、プラグインを使えば、簡単にFont Awesomeのアイコンをメニューに表示することができます。
コメント