【JIN】メニューにアイコンを表示させる方法｜プラグイン無しで簡単実装！！

ブログの見た目は大事ですよね。

見た目が整っているだけで、ブログ内の回遊率も上がるし、なにより運営者のモチベーションアップに繋がります。

今回は、有料テーマである「JIN」を使用している方におすすめの、『メニューにアイコンを表示させる方法』をご紹介します。

嫁さま

確かにデザインは大事だよね！

でも「メニュー」も「アイコン」もピンとこないな～。

りりまん

そうだろうね。
じゃ実際の画面を見てもらってイメージを掴んでもらうよ！

実際の見た目は以下の通りです。（パソコン画面・スマホ画面の両方をご覧ください）

ちょっとしたことですが、結構印象が変わりませんか？

たかがアイコンされどアイコンです。

JIN特有のデザイン変更については以下の記事でも紹介しているので、時間がある時にでも見てください。

【JIN】ブログカードを『５分』でかっこよくする方法！　追加CSSのみで簡単実装！！ この記事がおすすめの人 ブログカードについて知りたい人ブログカードの見た目を良くしたい人他のデザインが崩れたりするリスクを出来...

では、まずメニューについて簡単に説明していきます！

• 兵庫県在住　28歳
• サラリーマン歴10年目
• 総資産1400万円
• ブログ運営（9カ月目）
• Twitterフォロワー2800名

ブログ運用者
りりまん

運営者プロフィール・ Twitter（＠ririmannonline）

メニューとは

『JIN』で設定できるメニューは以下の5つです。

今から紹介する画面は既にアイコンが設定されている状態となります。

１つずつどのように表示されるのか確認してみてください。

りりまん

本ブログで使用してるのは「グローバルナビゲーション」「トップページのピックアップコンテンツ」だけだよ！

それぞれのメニューの設定方法も合わせて紹介します。

※サイトデザイン設定によって多少表示の仕方に違いがありますのでご了承ください。

グローバルナビゲーション

グローバルナビゲーションとは、冒頭で紹介した画面になります。

パソコン画面とスマホ画面で表示が変わります。

パソコンの場合
『タイトルのすぐ下』

スマホの場合
『右上の三本線をタップすると現れる』

スマホ固定フッターメニュー

スマホ固定フッターメニューとは、スマホの下部に固定されているメニューです。

名前の通り、スマホだけに表示できます。

スマホのスライドメニュー

スマホのスライドメニューはタイトルの下に表示されます。

パソコンで表示される「グローバルナビゲーション」と似た表示です。

スマホのボタンメニュー

スマホのボタンメニューとは、スマホ画面の右下に表示される「＋マーク」のことです。

使用される方は「目次へ戻る」などのアイコンと被ってしまうことがあるので注意が必要です。

トップページのピックアップコンテンツ

トップページのピックアップコンテンツとはサイトの上部に固定されるメニューです。

パソコンとスマホの両方で表示が可能です。

メニューにアイコンを表示させる方法

各種メニューについては、理解していただけたと思います。

自身で好みのメニューを設定してみてください！

では、本題のアイコンの設定方法を説明します。

方法は以下の通りは『簡単３STEＰ』です。

１つずつ説明します。

【STEP1】JINのオリジナルアイコンリストで選択

まずは『JINのオリジナルアイコンリスト』から好きなアイコンを選択します。

>>JIN オリジナルアイコンはこちら

上記サイトにアクセスすると、以下の画面が表示されると思います。

この「家」「鉛筆」「虫眼鏡」等々のアイコンの中から好きなアイコンを選択してください。

とても数が多いので、しっかり吟味してみてくださいね。

嫁さま

数多過ぎ！！
どれにしよう？？

りりまん

基本的には直感でいいと思うけど、やっぱ関連付いている方がいいよね！

「ホームに戻る」なら家のアイコンとか！

【STEP2】コードのコピー

では、アイコンが選択できれば次のSTEPです。

アイコンに表示されているコードをコピーします。

今回は例として「家」のアイコンを選択したことにしましょう。

そしたら、下記の画像の赤枠部（jic jin-ifont-home\e917）のコードをコピーします。

ここまでくれば、もう終わったようなものです。

最後にメニューに反映します。

【STEP3】メニュー設定画面へ移行

WordPressの画面から「外観」⇒「メニュー」を選択します。

すると、以下の画面が表示されると思いますので、①②③を順番に確認していきます。

①にて編集するメニューを選択。

②の部分は始めは非表示になっているので表示に切り替える。

③の部分にSTEP2でコピーしたコードを貼り付ける。

これで完成です！！

お疲れ様でした。

最後に今回の内容を簡単に振り返ります。

まとめ：メニューにアイコンを表示させる方法

本記事をまとめます。

JINには5つのメニューがある

• グローバルナビゲーション
• スマホ固定フッターメニュー
• スマホのスライドメニュー
• スマホのボタンメニュー
• トップページのピックアップコンテンツ

メニューにアイコンを表示させる方法

いかがだったでしょうか。

ただアイコンを表示させるだけでも、サイトの雰囲気がガラッと変わったと思います。

とはいいつつも、正直なところ自己満足でも良いと思ってます。

デザイン等々をいじりながら楽しくブログ運営をすることが、まずは優先です。

本ブログでは他にも『ブログ運営に役立つ情報』をまとめていますので、是非のぞいてみてください！

【完全保存版】ブログのノウハウを全て公開｜初心者のためのブログ運営！！ 【2021年】5月22日：初版発行6月30日：記事追加（6記事追加）7月31日：記事追加（6記事追加） 8月30日：記事追加（2記事...

これからも有益な記事を作れるよう尽力していきます！

では、また！！