Twitterはこちら仕事依頼はこちら

JINのスマホメニューをカスタマイズ！アイコン付きでわかりやすく！

JINスマホメニューカスタマイズ

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。

JINのスマホメニュー、今回はグローバルナビをカスタマイズしていきます。

これです。

jinハンバーガーメニュー

スマホのグローバルナビをこんな感じにします。

JINスマホメニューをカスタマイズ

参考 ボックス分けされたナビを作る！回遊率をアップしよう！

ボックス分けされたナビを作る！回遊率をアップしよう！
区分けされたナビゲーションをHTMLとCSSで作ります。単純なグローバルナビゲーションよりも視認性が高く、スマホでタップしやすいのでユーザーに優しいインタフェースになっています。HTMLとCSSがわからない初心者向けでコピペで簡単に作れるようにしました！
ponhiro.com
2019.09.19

「わかりやすく、そして押しやすく」なるため、ユーザーの使いやすさ向上に繋がるかと思います。

fontawesomeのアイコンだけでなく、画像をアイコンに変更することも可能です。

JINスマホメニュー画像ボックスナビ

コピペでできるようになっていますので気軽にチャレンジしてみてください！

JINのスマホメニューをカスタマイズ！

手順は以下の通りです。

手順
  • STEP1
    CSSコピペ
    style.cssにコードをコピペします。
  • STEP2
    JavaScriptコピペ
    対象場所にJavaScriptをコピペします。
  • STEP3
    メニュー設定
    管理画面でメニューを設定します。

STEP1：CSSをコピペ

CSSをコピペしていきます。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。

まずはボックスナビの記事に書かれている下記CSSをコピペします。

すでに導入済みの方は飛ばしてください。

  1. /************************************
  2. ** ボックスナビ
  3. ************************************/
  4. .p-nav{
  5. margin:2em 0;/* 全体外余白 */
  6. padding:0;/* 全体内余白 */
  7. }
  8. .p-nav ul{
  9. display:-webkit-box;
  10. display:-ms-flexbox;
  11. display:flex;
  12. -ms-flex-wrap: wrap;
  13. flex-wrap: wrap;
  14. -webkit-box-pack: center;
  15. -ms-flex-pack: center;
  16. justify-content: center;
  17. list-style:none;
  18. margin:0;
  19. padding:0;
  20. border:none;
  21. }
  22. .p-nav ul li{
  23. -ms-flex-preferred-size: calc(100%/4);/* 4列 */
  24. flex-basis: calc(100%/4);/* 4列 */
  25. margin:0;
  26. padding:0;
  27. text-align:center;
  28. box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
  29. display:-webkit-box;
  30. display:-ms-flexbox;
  31. display:flex;
  32. -webkit-box-align: center;
  33. -ms-flex-align: center;
  34. align-items: center;
  35. -webkit-box-orient: vertical;
  36. -webkit-box-direction: reverse;
  37. -ms-flex-direction: column-reverse;
  38. flex-direction: column-reverse;
  39. min-height:100px;/* 最低の高さ */
  40. cursor:pointer;
  41. background:#fff;/* 背景色 */
  42. }
  43. .p-nav ul li:hover{
  44. z-index:2;
  45. box-shadow: inset 2px 2px 0 0 #f6a068, 2px 2px 0 0 #f6a068, 2px 0 0 0 #f6a068, 0 2px 0 0 #f6a068;/* 罫線(マウスホバー) */
  46. transition: 0.35s ease-in-out;
  47. }
  48. .p-nav ul li:before{
  49. content:unset !important;
  50. }
  51. .p-nav ul li a{
  52. display:block;
  53. padding: 0.5em 1em;/* 内余白 */
  54. text-decoration:none;
  55. width:100%;
  56. }
  57. .p-nav ul li a:hover{
  58. background:none;
  59. opacity:1;
  60. }
  61. .p-nav ul li a img{
  62. max-width:50% !important;/* 画像横幅 */
  63. height: auto !important;
  64. filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
  65. display: inline-block;
  66. }
  67. .p-nav .p-nav-title{
  68. display: block;
  69. color: #666;/* 文字色 */
  70. font-size: 0.7em;/* 文字大きさ */
  71. letter-spacing: 1px;
  72. font-weight: 600;/* 文字太さ */
  73. text-align: center;
  74. line-height: 1.5;/* 文字行間高さ */
  75. }
  76. /* サイドバー */
  77. .sidebar .p-nav ul li{
  78. -ms-flex-preferred-size: calc(100%/2);/* 2列 */
  79. flex-basis: calc(100%/2);/* 2列 */
  80. }
  81. /* スマホ */
  82. @media screen and (max-width: 559px) {
  83. .p-nav ul li{
  84. -ms-flex-preferred-size: calc(100%/2);/* 2列 */
  85. flex-basis: calc(100%/2);/* 2列 */
  86. }
  87. }
  88. /* fontawesome */
  89. .p-nav ul li a i,.p-nav ul li a svg{
  90. font-size: 40px;/* アイコン大きさ */
  91. padding: 10px 0;/* アイコン余白 */
  92. color: #f6a068;/* アイコン色 */
  93. display:inline-block;
  94. }
/************************************
** ボックスナビ
************************************/
.p-nav{
margin:2em 0;/* 全体外余白 */
padding:0;/* 全体内余白 */
}
.p-nav ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style:none;
margin:0;
padding:0;
border:none;
}
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/4);/* 4列 */
flex-basis: calc(100%/4);/* 4列 */
margin:0;
padding:0;
text-align:center;
box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
min-height:100px;/* 最低の高さ */
cursor:pointer;
background:#fff;/* 背景色 */
}
.p-nav ul li:hover{
z-index:2;
box-shadow: inset 2px 2px 0 0 #f6a068, 2px 2px 0 0 #f6a068, 2px 0 0 0 #f6a068, 0 2px 0 0 #f6a068;/* 罫線(マウスホバー) */
transition: 0.35s ease-in-out;
}
.p-nav ul li:before{
content:unset !important;
}
.p-nav ul li a{
display:block;
padding: 0.5em 1em;/* 内余白 */
text-decoration:none;
width:100%;
}
.p-nav ul li a:hover{
background:none;
opacity:1;
}
.p-nav ul li a img{
max-width:50% !important;/* 画像横幅 */
height: auto !important;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
display: inline-block;
}
.p-nav .p-nav-title{
display: block;
color: #666;/* 文字色 */
font-size: 0.7em;/* 文字大きさ */
letter-spacing: 1px;
font-weight: 600;/* 文字太さ */
text-align: center;
line-height: 1.5;/* 文字行間高さ */
}
/* サイドバー */
.sidebar .p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}
/* スマホ */
@media screen and (max-width: 559px) {
	.p-nav ul li{
		-ms-flex-preferred-size: calc(100%/2);/* 2列 */
		flex-basis: calc(100%/2);/* 2列 */
	}
}
/* fontawesome */
.p-nav ul li a i,.p-nav ul li a svg{
font-size: 40px;/* アイコン大きさ */
padding: 10px 0;/* アイコン余白 */
color: #f6a068;/* アイコン色 */
display:inline-block;
}

次にメニューの調整用のCSSをコピペします。

  1. /************************************
  2. ** スマホメニュー ボックスナビ
  3. ************************************/
  4. .sp-menu-box .p-nav ul.menu-box{
  5. height:auto;
  6. }
  7. .sp-menu-box .p-nav ul{
  8. padding: 0 7% 1%;
  9. }
  10. .sp-menu-box .p-nav .menu-item{
  11. min-height:120px;
  12. }
  13. .sp-menu-box .p-nav li a:before{
  14. content:unset;
  15. }
  16. .sp-menu-box .p-nav ul li a {
  17. padding: 0.3em 1em 1em;
  18. }
  19. @media screen and (min-width: 768px) {
  20. ul.menu-box li.menu-item a img{
  21. display:none;
  22. }
  23. }
/************************************
** スマホメニュー ボックスナビ
************************************/
.sp-menu-box .p-nav ul.menu-box{
height:auto;
}
.sp-menu-box .p-nav ul{
padding: 0 7% 1%;
}
.sp-menu-box .p-nav .menu-item{
min-height:120px;
}
.sp-menu-box .p-nav li a:before{
content:unset;
}
.sp-menu-box .p-nav ul li a {
padding: 0.3em 1em 1em;
}
@media screen and (min-width: 768px) {
	ul.menu-box li.menu-item a img{
		display:none;
	}
}

これでCSSはOK！

アイコンの色はコメントに/* アイコン色 */と書いてある箇所のカラーコードを変更してください。

STEP2：JavaScriptをコピペ

JINには子テーマにJavaScriptを入力できる場所がないのでHTMLタグ設定ページに入力していきます。

WordPressの管理画面→HTMLタグ設定ページを開いてください。

【bodyタグの終わり】に下記コードをコピペします。

  1. <script>
  2. jQuery(".sp-menu-box nav.fixed-content").addClass("p-nav");
  3. </script>
<script>
jQuery(".sp-menu-box nav.fixed-content").addClass("p-nav");
</script>

以上でOKです。

STEP3：メニューを設定

あとはメニューを設定するだけです。

外観→メニューを開いてください。

既にグローバルメニューを作成済みの方はそれを開き、作ってない方は新規で作ってください。

WordPressメニュー作成

例では新規で作成します。

メニュー名を入力してメニューを作成を選択します。

WordPressメニュー作成

メニューを作成していきます。作成の仕方はここでは省略します。

WordPressメニュー作成

次に入れたいアイコン、もしくは画像を入れていきます。

FontAweosome編

アイコンはFontAweosomeから選択します。JINのオリジナルアイコンは今のところ非対応です。

参考 FontAweosome公式

Freeのアイコンを選びます。

タグをコピーします。

fontawesome-home

WordPressのメニュー設定画面に戻り、ナビゲーションラベルを変更します。

ナビゲーションラベルBefore

  1. HOME
HOME

ナビゲーションラベルAfter

  1. <i class="fas fa-home"></i> <span class="p-nav-title">HOME</span>
<i class="fas fa-home"></i> <span class="p-nav-title">HOME</span>

FontAwesomeのタグと<span class=”p-nav-title”></span>が追加されています。

同様に全てのメニューにタグを入れていきます。

WordPressメニュー作成

PCで見たときにアイコンを非表示にしたい場合はCSSに下記コードを追記してください。

  1. @media screen and (min-width: 768px) {
  2. ul.menu-box li.menu-item a svg{
  3. display:none;
  4. }
  5. }
@media screen and (min-width: 768px) {
  ul.menu-box li.menu-item a svg{
    display:none;
  }
}

入力を終えたら、メニュー設定のグローバルナビゲーションにチェックを入れメニューを保存で終了です。

JINメニュー位置設定

画像編

画像をアイコンにしたい人はimgタグを挿入していきます。

メディアから画像を選び、リンクをコピーしてください。

メディアでリンクをコピー

コピーしたURLを下記コードと組み合わせればimgタグができます。

  1. <img src="ここにコピペ" alt="">
<img src="ここにコピペ" alt="">

メニュー編集画面を開き、ナビゲーションラベルを変更していきます。

ナビゲーションラベルBefore

  1. HOME
HOME

ナビゲーションラベルAfter

  1. <img src="https://ponhiro.com/wp-content/uploads/2019/08/box-nav-1.png" alt=""> <span class="p-nav-title">HOME</span>
<img src="https://ponhiro.com/wp-content/uploads/2019/08/box-nav-1.png" alt=""> <span class="p-nav-title">HOME</span>

imgタグと<span class=”p-nav-title”></span>が追加されています。

同様に全てのメニューにタグを入れていきます。

画像アイコンでメニュー作成

入力を終えたら、メニュー設定のグローバルナビゲーションにチェックを入れメニューを保存で終了です。

JINメニュー位置設定

導入済みのブログ紹介させてください

「この記事を見て導入したよ！」という方でSNSやブログでこの記事を紹介していただいた場合、こちらでブログを紹介させていただきます！

紹介サイトが多くなりましたので締め切らせていただきます。

ありがとうございました！

コメント

  1. 名前:ミニフク :投稿日：2020/03/04(水) 16:39:22 ID：E0OTQ4NzU

    こんにちは！
    いつも素敵なカスタマイズのご紹介ありがとうございます。

    自分のサイト(https://mini-owl.com/ )ではcocoonをテーマに扱っているのですが、JINと同様に、メニューバーにボックスナビを入れられたら…と思っています。
    こちらのぽんひろ さんのサイトでもメニューバーにボックスナビや検索バーを入れておりますが、どこのファイルをいじられたか、できる範囲でいいので教えていただけますと幸いです。

    よろしくお願いします！

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2020/03/11(水) 15:27:27 ID：EyMjExMjA

      ＞ミニフクさん

      ありがとうございます！
      Cocoonではサイドバーに検索バーやボックスナビを入れて、メニューではなくサイドバーを表示させています。

      詳しくは公式に書いてあります！
      https://wp-cocoon.com/mobile-header-buttons/

      返信
  2. 名前:リッチ :投稿日：2020/03/24(火) 17:50:58 ID：I3MTIxMTE

    初めまして、JINテーマのカスタマイズでたどり着きました。
    こちらの記事を参考にさせていただきました。
    https://ea-rich.net/

    わかりやすく素晴らしいブログですね。
    ありがとうございました。

    返信
  3. 名前:ぬっキー :投稿日：2021/07/17(土) 04:22:08 ID：cyNDk3Mzg

    素晴らしいブログありがとうございます。
    JINではcocoonのようにメニューをサイドバーに変えることは可能でしょうか？
    またこちらの記事のCSSをコピペしましたが、ボックスメニューが中央にならず左によってしまいます。どのように対処したらよろしいでしょうか？

    返信
  4. 名前:日の出ポチ :投稿日：2022/01/31(月) 15:44:18 ID：YwODMxMTE

    JINを使っております。このカスタマイズを実行したかったので大変助かりました。さっそくチャレンジしてみます。
    他の記事も閲覧もじっくりさせていただきます！

    返信
  5. 名前:レイチェル :投稿日：2023/02/10(金) 18:24:00 ID：Y4MjMxMzY

    こちらを参考にさせていただいております。JINを使用しているのですが、
    『STEP2：JavaScriptをコピペ』の部分で、「閲覧できません」となってしまうのですが、何か解決策はありますでしょうか？

    返信

ページトップへ