- ブログのデザインを少しでも良くしたい人
- 難しい設定じゃなくできるだけ簡単に実装したい人
- 「JIN」を使用してるのに機能を十分に活かせてない人
ブログの見た目は大事ですよね。
見た目が整っているだけで、ブログ内の回遊率も上がるし、なにより運営者のモチベーションアップに繋がります。
今回は、有料テーマである「JIN」を使用している方におすすめの、『メニューにアイコンを表示させる方法』をご紹介します。
確かにデザインは大事だよね！
でも「メニュー」も「アイコン」もピンとこないな～。
そうだろうね。
じゃ実際の画面を見てもらってイメージを掴んでもらうよ！
実際の見た目は以下の通りです。（パソコン画面・スマホ画面の両方をご覧ください）
ちょっとしたことですが、結構印象が変わりませんか？
たかがアイコンされどアイコンです。
JIN特有のデザイン変更については以下の記事でも紹介しているので、時間がある時にでも見てください。
では、まずメニューについて簡単に説明していきます！
運営者プロフィール・ Twitter（＠ririmannonline）
目 次
メニューとは
『JIN』で設定できるメニューは以下の5つです。
- グローバルナビゲーション
- スマホ固定フッターメニュー
- スマホのスライドメニュー
- スマホのボタンメニュー
- トップページのピックアップコンテンツ
今から紹介する画面は既にアイコンが設定されている状態となります。
１つずつどのように表示されるのか確認してみてください。
本ブログで使用してるのは「グローバルナビゲーション」「トップページのピックアップコンテンツ」だけだよ！
それぞれのメニューの設定方法も合わせて紹介します。
※サイトデザイン設定によって多少表示の仕方に違いがありますのでご了承ください。
グローバルナビゲーション
グローバルナビゲーションとは、冒頭で紹介した画面になります。
パソコン画面とスマホ画面で表示が変わります。
パソコンの場合
『タイトルのすぐ下』
スマホの場合
『右上の三本線をタップすると現れる』
スマホ固定フッターメニュー
スマホ固定フッターメニューとは、スマホの下部に固定されているメニューです。
名前の通り、スマホだけに表示できます。
スマホのスライドメニュー
スマホのスライドメニューはタイトルの下に表示されます。
パソコンで表示される「グローバルナビゲーション」と似た表示です。
スマホのボタンメニュー
スマホのボタンメニューとは、スマホ画面の右下に表示される「＋マーク」のことです。
使用される方は「目次へ戻る」などのアイコンと被ってしまうことがあるので注意が必要です。
トップページのピックアップコンテンツ
トップページのピックアップコンテンツとはサイトの上部に固定されるメニューです。
パソコンとスマホの両方で表示が可能です。
メニューにアイコンを表示させる方法
各種メニューについては、理解していただけたと思います。
自身で好みのメニューを設定してみてください！
では、本題のアイコンの設定方法を説明します。
方法は以下の通りは『簡単３STEＰ』です。
- STEP1JINのオリジナルアイコンリストで選択好きなアイコンを選択します
- STEP2コードのコピー表示されているコードをコピーする
- STEP3メニュー設定画面へ移行「STEP２」でコピーしたコードを張り付ける
１つずつ説明します。
【STEP1】JINのオリジナルアイコンリストで選択
まずは『JINのオリジナルアイコンリスト』から好きなアイコンを選択します。
上記サイトにアクセスすると、以下の画面が表示されると思います。
この「家」「鉛筆」「虫眼鏡」等々のアイコンの中から好きなアイコンを選択してください。
とても数が多いので、しっかり吟味してみてくださいね。
数多過ぎ！！
どれにしよう？？
基本的には直感でいいと思うけど、やっぱ関連付いている方がいいよね！
「ホームに戻る」なら家のアイコンとか！
【STEP2】コードのコピー
では、アイコンが選択できれば次のSTEPです。
アイコンに表示されているコードをコピーします。
今回は例として「家」のアイコンを選択したことにしましょう。
そしたら、下記の画像の赤枠部（jic jin-ifont-home\e917）のコードをコピーします。
ここまでくれば、もう終わったようなものです。
最後にメニューに反映します。
【STEP3】メニュー設定画面へ移行
WordPressの画面から「外観」⇒「メニュー」を選択します。
すると、以下の画面が表示されると思いますので、①②③を順番に確認していきます。
①にて編集するメニューを選択。
②の部分は始めは非表示になっているので表示に切り替える。
③の部分にSTEP2でコピーしたコードを貼り付ける。
これで完成です！！
お疲れ様でした。
最後に今回の内容を簡単に振り返ります。
まとめ：メニューにアイコンを表示させる方法
本記事をまとめます。
JINには5つのメニューがある
- グローバルナビゲーション
- スマホ固定フッターメニュー
- スマホのスライドメニュー
- スマホのボタンメニュー
- トップページのピックアップコンテンツ
メニューにアイコンを表示させる方法
いかがだったでしょうか。
ただアイコンを表示させるだけでも、サイトの雰囲気がガラッと変わったと思います。
とはいいつつも、正直なところ自己満足でも良いと思ってます。
デザイン等々をいじりながら楽しくブログ運営をすることが、まずは優先です。
本ブログでは他にも『ブログ運営に役立つ情報』をまとめていますので、是非のぞいてみてください！
これからも有益な記事を作れるよう尽力していきます！
では、また！！
りりまん