JIN

「JIN」のメニューにアイコンを設定したい!Font Awesomeでの設定方法を詳しく解説

WordPress(ワードプレス)の「JIN」を使ってブログ書いてます、シロヤギ(@shiroyagi_blog)です。

JINは、とっても簡単にメニューにアイコンを追加することができます。

このブログだと、こんな感じ。

メニューにアイコンをつけることは他のテーマでもできますが、やり方は異なるようです

メニューにどうやってアイコンをつけるのかは、JINのマニュアルに書いてあります。

でも。

あれ?なんかうまくいかない?

 

シロヤギ
シロヤギ
マニュアルにはさらっと書いてあるけど、はて・・・?

Font Awesome(フォントオーサム)を使ってアイコンを入れるんですが、Font Awesomeは説明も英語だし、どこを読んでどうすれば良いのか、何だかよく分からない!

そもそも「アイコンのコード」って、どれ?

コードらしきものを貼り付けたけど、アイコンが表示されない!

今回は、そんな初心者ならでは(?)の躓きどころ、「JINのメニューにアイコンをつけるにはどうすればいいのか?」という疑問を解決していきたいと思います。

クロヤギ
クロヤギ
めちゃくちゃ簡単だぞ
シロヤギ
シロヤギ
それではいってみよう!

メニューを作成する

メニューの作り方はマニュアル記載の通りですので、割愛します。

今回は、Font Awesomeでコードを取得するところから解説します。

Font Awesomeでコードを取得

使いたいアイコンを探す

今回は、ホーム画面のアイコンを探すことにします。

Free(無料)でダウンロードできる中から「home」で検索すると、以下のような画面になります。

この中から、使いたいアイコンを選んでクリックします。

使いたいアイコンのコードを取得

アイコンの上に、こんな感じの文字列が出てくるので、クリックします。

クリックするだけでコードをコピーできます。

シロヤギ
シロヤギ
これでFont Awesomeでの作業は完了だよ!

WordPressの管理画面に戻る

メニューを作っている途中でFont Awesomeのページを見に行った人は、WordPressのメニュー設定画面が開きっぱなしになっていると思うので、WordPressのメニュー設定画面に戻ってください。

メニューの画面が開いていない人は、外観からメニューを選択して、メニュー設定画面を開きましょう。

表示オプションで説明にチェックを入れる

右上にある表示オプションをクリックすると、いろいろ選べるページが出てくるので、説明にチェックを入れます。

アイコンを入れたい項目にコードを貼り付け

アイコンを入れたいメニューを選んで、アイコンを入れたいカテゴリーの説明欄に、先ほどコピーしてきたコードを貼り付けます。

シロヤギ
シロヤギ
重要なのはここから!

で、このままメニューを保存したいところなんですが、このまま保存すると、アイコンは表示されません!!

しかも、なんでやねんと思ってもう一度、説明欄を確認すると、先ほど貼り付けたはずのコードが消えてしまっています。

コードの不要な部分を削除する

そこで必要になるのが、不要な部分の削除です。

先ほど貼り付けたコードは、以下のような形式になっているはず。

<i class=”○○”></i>

この○○以外の部分を削除してから、メニューを保存ボタンをクリックします。

完成!

すると、出だしで書いたとおり、こんな感じにメニューにアイコンが表示されます。

クロヤギ
クロヤギ
やることは簡単だったな

まとめ:コード貼り付け後、「<i class=”」「”></i>」を削除すれば、アイコンが表示される

今回は、私の覚え書きもかねて、JINでメニューにアイコンを表示させる方法について解説しました。

Font Awesomeで取得できるコードは、全部

<i class=”○○”></i>

になっているので、○○以外の部分を削除すれば、JINではメニューにアイコンが表示されます。

クロヤギ
クロヤギ
超簡単!
シロヤギ
シロヤギ
マニュアルに表示されている画面をじっくり見れば、確かにこうやってコードを貼り付けてあるよ!

こんな感じで、JINでは簡単にメニューにかわいいアイコンをつけることができます。

WordPressやJIN初心者で「やり方がわからなかった!」という方は、是非アイコンをつけて、ブログをワンランクアップさせてみてくださいね!

2019年3月28日のアップデートで、JINオリジナルのアイコンが設定できるようになりました。オリジナルのアイコンを設定したい場合は「JINのオリジナルアイコンリスト|JIN(公式)」から設定方法を確認できます!
【WordPress初心者】最初から「JIN」を使って40記事まで書いた感想ブログを書き始めて40記事目に突入しました、シロヤギ(@shiroyagi_blog)です。 「100記事までは毎日更新す...
あなたは左派?右派?ブログの吹き出し、私は「漫才」派!ブログで吹き出し機能を使って書くって楽しいですよね! 私が使っているJINでは、吹き出し機能が標準搭載なので、アイ...

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です