副業・ブログ

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

メニューにアイコンを表示させる方法_アイキャッチ

 こんな人におすすめの記事 
  • ブログのデザインを少しでも良くしたい人
  • 難しい設定じゃなくできるだけ簡単に実装したい人
  • 「JIN」を使用してるのに機能を十分に活かせてない人

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

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

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

嫁さま

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

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

りりまん

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

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

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

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

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

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

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

  • 兵庫県在住 28歳
  • サラリーマン歴10年目
  • 総資産1300万円
  • ブログ運営(6カ月目)
  • Twitterフォロワー2300名
ブログ運用者
りりまん

運営者プロフィール・Twitter(@ririmannonline

メニューとは

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

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

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

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

りりまん

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

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

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

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

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

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

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

グローバルナビゲーション_パソコン
パソコン画面

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

メニューの作成方法

JIN MANUAL』より抜粋。

>>グローバルメニューの設定方法

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

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

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

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

メニューの作成方法

JIN MANUAL』より抜粋。

>>スマホフッターメニューの設定方法

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

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

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

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

メニューの作成方法

JIN MANUAL』より抜粋。

>>スマホスライドメニューの設定方法

スマホのボタンメニュー

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

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

メニューの作成方法

JIN MANUAL』より抜粋。

>>スマホ専用ボタンメニューの作り方

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

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

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

トップページのピックアップコンテンツ_パソコン
パソコン画面

トップページのピックアップコンテンツ_スマホ
スマホ画面

メニューの作成方法

JIN MANUAL』より抜粋。

>>ピックアップコンテンツの作り方

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

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

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

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

方法は以下の通りは『簡単3STEP』です。

  • STEP1
    JINのオリジナルアイコンリストで選択
    好きなアイコンを選択します
  • STEP2
    コードのコピー
    表示されているコードをコピーする
  • STEP3
    メニュー設定画面へ移行
    「STEP2」でコピーしたコードを張り付ける

1つずつ説明します。

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

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

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

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

JINのオリジナルアイコンリスト

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

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

嫁さま

数多過ぎ!!
どれにしよう??

りりまん

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

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

【STEP2】コードのコピー

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

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

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

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

JINのオリジナルアイコンリスト_ホーム

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

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

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

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

Wordpress_外観メニュー

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

Wordpress_外観メニュー詳細

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

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

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

これで完成です!!

お疲れ様でした。

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

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

本記事をまとめます。

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

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

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

メニューにアイコンを表示させる手順

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

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

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

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

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

ブログのノウハウ_アイキャッチ
【完全保存版】ブログのノウハウを全て公開|初心者のためのブログ運営!! 2021年5月22日:初版発行2021年6月30日:記事追加(6記事追加) 2021年2月10日よりブログを開始し、...

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

では、また!!

にほんブログ村 にほんブログ村へ

関連記事はこちら!

COMMENT

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

CAPTCHA