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

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

ボックスナビの作り方

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

「コンテンツ、埋もれてないですか？」

3クリックルールというWeb界に有名なお話があります。

目的のページに行くまで3クリック以内でたどり着けないとユーザーが去っていってしまうそうな。

まぁこれは後に否定されているのですがグッチャグチャなサイト、どこに何があるかわからないサイトはさすがに良くないです。

スムーズに目的地にいってもらうためにはナビゲーションが必要不可欠ですね。

ナビゲーションといえばヘッダーに配置するグローバルナビゲーションが一般的ですが今回は

ボックスナビゲーションを作成します！

勝手に名付けました！

見てもらった方が早いでしょう！

  • パソコンで見てる方はサイドバーを！
  • スマホで見てる方は右上のメニューボタンを！

それが今回作る「ボックスナビゲーション」です。

視認性が高く、スマホでもタップしやすいナビゲーションになっております。

多くの方から設置報告をいただきました。実際に回遊率、直帰率が良くなったとの報告もありました！

Twitter

Twitter

このカスタマイズの特徴は以下の通りです。

特徴
  • どこでも設置可能
  • アイコンはfontawesome、画像どちらでも可能
  • リンクを入れなければ表としても利用可能

例えばブログでオリジナルのトップページを作ってる人はトップページにボックスナビを配置できるし、サイドバーで常に表示していたいって人はサイドバーに表示できます。

CocoonとJINはオリジナルトップページの作り方を紹介してるので参考にして見てください。

参考 【Cocoon】SEOに強いオリジナルトップページを作る！【構築編】

【超簡単！】Cocoonトップページをスッキリとサイト型へカスタマイズ！
Cocoonのトップページカスタマイズです。トップページを新着記事やおすすめ記事、カテゴリー別に記事を紹介したい人向けのカスタマイズです。HTMLやCSSがわからなくてもコピペで簡単にできるようになってます。
ponhiro.com
2019.08.04

参考 どこよりも簡単にJINのトップページをサイト型にカスタマイズ！

どこよりも簡単にJINのトップページをサイト型にカスタマイズ！
WordPress「JIN」のトップページをサイト型にカスタマイズする方法！記事がズラーっと並べてあるものを自由自在にオリジナルのトップページが作れるようになります。ブログカードを利用するので操作も簡単に！JINで新着記事を取得するショートコードも作りました。
ponhiro.com
2019.08.07

もちろん、記事内でもボックスナビは使えます。HTMLとCSSで作ってるので当たり前なのですが…！

アイコンはfontawesome、画像どちらでも使えるようになっています。

当ブログはfontawesome5を使っています。

画像で作るとこんな感じになります！可愛さ重視してリンクっぽくないですがリンクです笑。

-動物の生態-

列数デフォルトはPCで見ると4列、スマホで見ると2列になるようになっています。

それでは作り方を紹介していきます！

WordPressユーザーを対象に書いていますが他の環境でも使えます。

ボックスナビをHTMLとCSSで作る！

手順は以下の通りです。

手順
  • STEP1
    CSSコピペ
    style.cssにコードをコピペします。
  • STEP2
    HTMLコピペ
    対象場所にHTMLをコピペします。

ざっくりと手順を書くと、この通りですが細かい作業は必要になります。

STEP1：CSSをコピペ

下記コードをコピペしてください。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加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 !important;
  19. padding:0 !important;
  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 !important;
  26. padding:0 !important;
  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. }
  95. /* fontawesome(2番目) */
  96. .p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{
  97. color:#f6a068;/* アイコン色 */
  98. }
  99. /* fontawesome(3番目) */
  100. .p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{
  101. color:#f6a068;/* アイコン色 */
  102. }
  103. /* fontawesome(4番目) */
  104. .p-nav ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{
  105. color:#f6a068;/* アイコン色 */
  106. }
/************************************
** ボックスナビ
************************************/
.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 !important;
padding:0 !important;
border:none;
}
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/4);/* 4列 */
flex-basis: calc(100%/4);/* 4列 */
margin:0 !important;
padding:0 !important;
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;
}
/* fontawesome(2番目) */
.p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(3番目) */
.p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(4番目) */
.p-nav ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{
color:#f6a068;/* アイコン色 */
}

変更する可能性がある箇所はコメントで簡単な説明を書いています。

JINアップデートでの表示崩れ対策：
18行目、19行目、25行目、26行目に!importantを追加しました。

列の数を変更する

デフォルトではPCのメインコンテンツに配置すると4列に、サイドバーに配置すると2列に。スマホではどちらも2列になるようになっています。

列数を変えるにはCSSを変更する必要があります。

変更箇所はハイライトを入れておきました。

「calc(100%/4)」は横幅いっぱいを4分割するという意味です。

ですので3列にしたければ「calc(100%/3)」にすればOKです。

メインコンテンツ、サイドバー、スマホでわかれています。二つ並んでいるのは同じ数値を入れてください。

STEP2：HTMLをコピペ

基本的なHTMLコードは下記の通りです。

  1. <div class="p-nav">
  2. <ul>
  3. <li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
  4. <li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
  5. <li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
  6. <li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
  7. <li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
  8. <li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
  9. <li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
  10. <li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
  11. </ul>
  12. </div>
<div class="p-nav">
<ul>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>
</ul>
</div>

このHTMLを表示させたい箇所に入力すればOKです。

それでは詳しく説明していきます。

画像を入れたい場合

アイコンを画像にしたい場合は、そのまま「メディアを追加」から入れていただければOKです。

記事以外に入れる方で「メディアを追加」ボタンがない人は記事で一度作ってHTMLをコピペすれば楽だと思います。

FontAwesomeを入れたい場合

多くのWordPressテーマでは何もしなくてもFontAwesomeが使えるようになっていると思います。

ただし、バージョンが異なるとやり方が少し異なりますので各自調べてください。

基本的なやり方は、まずFontAwesome5のページを開きます。

FontAwesomeのバージョンが低い、例えばCocoonをお使いの方はFontAwesome4.7を開いてください。

好きなアイコンを選択し、タグをコピーします。

fontawesome5

そのタグを先ほどのHTMLの「画像、もしくはFontAwesome」の箇所にコピペすればOKです。

上手く表示されない人はバーションに対応していないかFontAwesomeが読み込まれていない可能性があります。



JINのオリジナルアイコンを使いたい人は下記ページをまず開きます。

JINのオリジナルアイコンリスト｜JIN（ジン）
] jic ji
jin-theme.com

あとは好きなアイコンのショートコードをコピーして先ほどのHTMLに貼り付ければOK！

JINオリジナルアイコン

サイドバーにボックスナビを入れる方法

サイドバーに入れるにはウィジェットを利用します。

WordPress管理画面→外観→ウィジェットを開きます。

カスタムHTMLをサイドバーに追加し、先ほどのHTMLコードを入れればOKです。

サイドバーにボックスナビを入れる方法

サイドバーに入れる際の注意点

CSSを見てもらうと「/* サイドバー */」とコメントが書いてある箇所があります。

ここには「サイドバー限定で2列で表示しますよ！」という意味のCSSが書かれています。

  1. /* サイドバー */
  2. .sidebar .p-nav ul li{
  3. -ms-flex-preferred-size: calc(100%/2);/* 2列 */
  4. flex-basis: calc(100%/2);/* 2列 */
  5. }
/* サイドバー */
.sidebar .p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}

多くのWordPressテーマはこれでCSSが効くはずですが一部のテーマで、コードを変更しないとCSSが効かないテーマがあります。

例えばJINはこのままでは効きません。

.sidebarを「#sidebar」、もしくは「.sideber」にすれば効くようになります。

HTMLは各WordPressテーマ異なるので調べる必要があります。

お使いの環境でもしサイドバーのCSSが効かなく、解決方法がわからない場合はご相談ください。

FontAwesomeの色を変える方法

FontAwesomeの色を変える方法を説明します。

これもCSSを変更すればOK。

該当箇所はこちらです。

  1. /* fontawesome */
  2. .p-nav ul li a i,.p-nav ul li a svg{
  3. font-size: 40px;/* アイコン大きさ */
  4. padding: 10px 0;/* アイコン余白 */
  5. color: #f6a068;/* アイコン色 */
  6. display:inline-block;
  7. }
  8. /* fontawesome(2番目) */
  9. .p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{
  10. color:#f6a068;/* アイコン色 */
  11. }
  12. /* fontawesome(3番目) */
  13. .p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{
  14. color:#f6a068;/* アイコン色 */
  15. }
  16. /* fontawesome(4番目) */
  17. .p-nav ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{
  18. color:#f6a068;/* アイコン色 */
  19. }
/* fontawesome */
.p-nav ul li a i,.p-nav ul li a svg{
font-size: 40px;/* アイコン大きさ */
padding: 10px 0;/* アイコン余白 */
color: #f6a068;/* アイコン色 */
display:inline-block;
}
/* fontawesome(2番目) */
.p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(3番目) */
.p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{
color:#f6a068;/* アイコン色 */
}
/* fontawesome(4番目) */
.p-nav ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{
color:#f6a068;/* アイコン色 */
}

一番上にあるアイコン色がベースとなっています。

色を統一させたい人は「/* fontawesome(2番目) */」より下は必要ないので削除してください。

一つ一つ色を変えたい人はCSSを追加していきます。

デフォルトで4つまで用意していますがもっと増やしたい人は追加して数値を変更してください。

例えば8個設定したい人は

  1. /* fontawesome(5番目) */
  2. .p-nav ul li:nth-of-type(5) a i,.p-nav ul li:nth-of-type(5) a svg{
  3. color:カラーコード;/* アイコン色 */
  4. }
  5. /* fontawesome(6番目) */
  6. .p-nav ul li:nth-of-type(6) a i,.p-nav ul li:nth-of-type(6) a svg{
  7. color:カラーコード;/* アイコン色 */
  8. }
  9. /* fontawesome(7番目) */
  10. .p-nav ul li:nth-of-type(7) a i,.p-nav ul li:nth-of-type(7) a svg{
  11. color:カラーコード;/* アイコン色 */
  12. }
  13. /* fontawesome(8番目) */
  14. .p-nav ul li:nth-of-type(8) a i,.p-nav ul li:nth-of-type(8) a svg{
  15. color:カラーコード;/* アイコン色 */
  16. }
/* fontawesome(5番目) */
.p-nav ul li:nth-of-type(5) a i,.p-nav ul li:nth-of-type(5) a svg{
color:カラーコード;/* アイコン色 */
}
/* fontawesome(6番目) */
.p-nav ul li:nth-of-type(6) a i,.p-nav ul li:nth-of-type(6) a svg{
color:カラーコード;/* アイコン色 */
}
/* fontawesome(7番目) */
.p-nav ul li:nth-of-type(7) a i,.p-nav ul li:nth-of-type(7) a svg{
color:カラーコード;/* アイコン色 */
}
/* fontawesome(8番目) */
.p-nav ul li:nth-of-type(8) a i,.p-nav ul li:nth-of-type(8) a svg{
color:カラーコード;/* アイコン色 */
}

こんな感じで下に追加していってください。あとはカラーコードを入れればOKです。

以上で終わりです！

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

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

リンクが増えてきたので締め切らせていただきます！ご協力ありがとうございます！

コメント

  1. 名前:匿名 :投稿日：2019/10/09(水) 13:32:51 ID：IyNjY5Njg

    はじめまして！
    以前からボックスナビに惹かれておりまして
    とうとうやり方見つけたっ！と思い、早速試してみたのですが
    なぜか⇒マークが出てしまいます。

    エレファント３というテーマを使っているのですが、
    ⇒マークは消せないものなのでしょうか？

    ⇒マークがなんなのかもわからないので、失礼かとは思いますがコメントで質問させていただきました。どうしても使いたかったので、そのままの状態でアップしているので良かったら見ていただけると助かります。

    ついでに画像が中央にならない、っていう悩みも持っています。

    他の方のブログも全部拝見しましたが、皆さんちゃんとなってるのになんでだろう？？？と・・・

    ブログはこちらです⇒https://frompapas.com

    宜しくお願いします。

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2019/10/09(水) 17:15:38 ID：IxNzM3MzY

      コメントありがとうございます。

      調べてみました。テーマ特有のCSSが表示されてるみたいなので下記コードを追加で入れてみてください。

      #side aside .p-nav ul li a:before{
      content: unset;
      }
      #side aside .p-nav ul li a{
      padding:0;
      }

      効かなかったらまたご連絡ください。

      返信
  2. 名前:匿名 :投稿日：2019/10/10(木) 11:40:51 ID：AyNDA2MTk

    コメントに返信ありがとうございます！
    一瞬で直りました。
    カスタマイズ相談からの依頼でも無いのに対応して頂いてありがとうございます。

    勝手ながら僕もぽんひろ.comを応援させて頂きたいと思います！

    これからも頑張って下さい!

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2020/04/23(木) 17:27:29 ID：M5NDQ1NzA

      ありがとうございます！

      返信
  3. 名前:つとむ :投稿日：2019/11/12(火) 22:45:16 ID：EzNTM5MzI

    コクーンにて使ってみたのですが、スマホでも4列表示にした場合、上部に無駄な空白？余白？が出てしまいます。

    （画像と文字が中央より少し下に来てしまい、上に余白が出る状態）

    スマホでもキレイに中央に寄せる場合の対処法をご教示いただけると幸いです。

    返信
  4. 名前:カメヤマン :投稿日：2019/11/22(金) 23:18:08 ID：AxMzkzODM

    ボックスナビ導入させていただきました。
    他のカスタマイズも多く使わせて頂いてます。素晴らしい情報のシェアありがとうございました！

    https://beginner.kameyamako.net

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2020/04/23(木) 17:28:05 ID：M5NDQ1NzA

      こちらこそありがとうございます！

      返信
  5. 名前:匿名 :投稿日：2020/04/11(土) 21:47:32 ID：E2ODQwMDc

    はじめまして。
    一番上の方のコメントのように、→の矢印のようなものが出てしまっている状態です。
    また、そのためかはわからないのですが、1つだけ画像の位置がずれていたりもします。

    使用しているテーマはCOCOONです。

    カスタマイズなどは初心者のため、何か設定など見落としている部分もあるかもしれませんが、お時間ある時に見ていただけると幸いです。

    サイト→https://donabe-marvel.work/

    返信
    • 名前:匿名 :投稿日：2020/04/11(土) 22:00:15 ID：E2ODQwMDc

      申し訳ありません、上のコメントをしたものです。
      どうやらスキンに依存するものだったようで、スキンを変更することで解消することができました。

      コメントは消していただけると幸いです。失礼しました。

      返信
      • ぽんひろ名前:ぽんひろ :投稿日：2020/04/23(木) 17:29:21 ID：M5NDQ1NzA

        返信遅くなり申し訳ございません。
        解決されたようで良かったです！

        返信
  6. 名前:ひろしゃん :投稿日：2020/06/19(金) 22:22:36 ID：Y4NzA4OTc

    カスタマイズ初心者です。「使ってみたい！」と感じるデザインを少しづつ勉強させて頂きながら使わせて頂いております。ありがとうございます。
    この度、ボックスナビを当サイトにて導入させていただきましたが、スマホ表示のとき、左のアイコンと文字の隙間が詰まっており、左右のバランスがとれず、頭を悩ましております。

    お時間あるときに見て頂けないでしょうか？よろしくお願い致します。

    当ブログ→https://hiroshan-medaka.com/
    使用テーマ→JIN
    使用状況→ウィジェットから「カスタムHTML」を使ってトップページ下部にて表示

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2020/06/26(金) 13:13:02 ID：k5NTQwOTA

      ありがとうございます。

      以下CSSを追記していただいて、ご確認いただいてもよろしいでしょうか？

      .p-nav ul li a i:before{
      vertical-align: middle;
      }

      返信
  7. 名前:ひろしゃん :投稿日：2020/07/02(木) 16:31:18 ID：czNzQ1NDk

    お忙しい中、ご対応ありがとうございます(๑˃͈꒵˂͈๑)

    さっそく、cssに追加してみましたが、あまり変化がありませんでした…。
    改めて、サイドバーにて、試してみたのですが、やはり微妙にズレてしまいます(;￣^￣)
    お手隙のときで構いません、解決策がありましたら、よろしくお願いします。

    返信
  8. 名前:匿名 :投稿日：2020/08/05(水) 09:00:20 ID：g3NzE5ODA

    jinを使っています。
    こちらのサイト通りに作り、無事にできたと思いました。

    しかし、二回以上クリックすると、２重、３重とドメインが開いていき、お探しの記事は見つかりませんでした。

    一度クリックすると、ドメイン/記事urlで開きます。
    二度目以降

    ・ドメイン/記事url/ドメイン/記事url

    ・ドメイン/記事url/ドメイン/記事url/ドメイン/記事url

    ・ドメイン/記事url/ドメイン/記事url/ドメイン/記事url/ドメイン/記事url

    とボックスナビ開くたび、後ろにurlが開かれる状態になります。
    ボックスナビ以外のところでは起こらないです。

    ぽんひろさんのサイトで言うと、
    https://ponhiro.com/box-nav/https://ponhiro.com/box-nav/と同じurlが開かれていき、一度目のクリックは見れるものの、二度目は見れなくなると言う現象です。

    どうしたら良いでしょうか？

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2020/08/09(日) 15:39:40 ID：g0MDQxMzc

      返信遅くなりまして申し訳ございません。

      リンク先のURLを絶対パス（httpsから始まるもの）で入力してみてもらってもよろしいでしょうか？

      返信
      • 名前:匿名 :投稿日：2020/08/25(火) 00:31:14 ID：YxNDMzOTg

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

        返信
  9. 名前:とら :投稿日：2020/10/01(木) 01:24:19 ID：A1NTcwOTA

    ぽんひろさん

    いつも実践的で素敵なカスタマイズをありがとうございます。

    初歩的なご質問で恐縮ですが、下記なにか思い当たることがあればご教示くださいますと幸いです。

    内容：パソコン・スマホともに、表示が若干右によってしまう
    テーマ：テーマがSwell、固定ページでカスタムHTMLで作成

    Useful Blocks Pro、いい感じです！

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2020/10/05(月) 14:59:20 ID：U3NzY2NzU

      ＞とらさん

      ありがとうございます。
      該当URLを教えていただければ原因がわかるかもしれません！
      よろしくお願いします。

      返信
  10. 名前:Fuku :投稿日：2020/11/23(月) 13:17:10 ID：kwNjQ5NDA

    はじめまして。
    　
    当サイトを拝見しボックスナビをサイドバーに導入しようとしたら、パソコンで見る場合は4列で表示されてしまいます（スマホでは2列で表示されます）。
    　
    パソコンでもサイドバーにボックスナビを2列表示するようにしたいので、解決方法をお教えいただけないでしょうか。

    よろしくお願いいたします。
    　
    —
    当ブログ：https://manboumuseum.com
    WordPressのテーマ：THE THOR
    　

    返信
    • 名前:ぽんひろ :投稿日：2020/11/24(火) 16:12:42 ID：UyNzgwMTg

      ＞Fukuさん

      CSSの下記箇所にある「4」が列数になります。

      .p-nav ul li {
      -ms-flex-preferred-size: calc(100%/4);
      flex-basis: calc(100%/4);

      2に変更すれば2列になります。

      サイドバーのみ2列にしたい場合は「THE THOR」の場合

      .l-sidebar .p-nav ul li {
      -ms-flex-preferred-size: calc(100%/2);
      flex-basis: calc(100%/2);

      を追記すればOKです！

      返信
      • 名前:Fuku :投稿日：2020/11/24(火) 17:22:42 ID：ExODgwNDQ

        ぽんひろ様
        　
        早速ご対応してくださりありがとうございました。
        　
        ボックスナビを導入して、ものすごく導線が良くなりました。タグ・カテゴリーのPVやサイト全体の直帰率が改善されるか楽しみです。
        　
        このような貴重な情報（お役立ち）を提供してくださるぽんひろさんへ、あらためて感謝とお礼申し上げます。

        返信
  11. 名前:まみた :投稿日：2020/12/09(水) 20:32:46 ID：c1NTM5NjU

    ぽんひろ様

    いつも有益な情報をありがとうございます。

    ボックスナビを設置しようと思い、コピーして試してみたのですが皆様のように上手くいかなく、色々調べてみたのですが途方にくれております。

    解決策をご教授いただけないでしょうか。。。
    ブログはこちらです。→https://mamita-disney.com/
    テーマはdiverを使用しております。

    よろしくお願いいたします。

    返信
    • 名前:まみた :投稿日：2020/12/09(水) 23:38:55 ID：c1NTM5NjU

      こちら時間が経ったのち、反映されてました。
      お手数おかけしました。。。

      返信
  12. 名前:fav :投稿日：2021/06/17(木) 11:57:05 ID：MxNjQ3NTM

    はじめまして。いつもよく利用させていただいて助かってます。
    PC打てる程度の超初心者ブログです。よろしくお願いいたします
    。
    そこで、ぽんひろさんのようにボックスをサイドに使いたいのですが手順通りにいかないのでコメントさせていただきました。

    ウェジェット→サイドバーにカスタムHTMLを追加。
    そこまではOK！！
    そのカスタムHTMLに”先ほどのHTMLコードを入れればOKです”というところができません。というよりも、コードを入れれそうなところがありません。

    coocon使ってます。

    返信
  13. 名前:こっしー :投稿日：2021/06/23(水) 01:13:27 ID：AwMjc3ODQ

    こんにちは。

    ボックスナビにチャンレジしておりますが、うまくいかない点がありコメントさせていただきました。

    【起こっている症状】

    Fontawesomeは問題なく表示されるのですが、メディアライブラリからの画像が表示されずにおります。画像ファイルURLがテキストでそのまま表示され、画像が表示されないという状況です。

    ちなみに、同じ症状が「何でも追従機能」でも起こっています。

    URLの開示ができないのですが、Snow Monkeyというテーマを使用しています。

    もしご面倒でなければ、アドバイスをいただけますと幸いです。

    素敵なデザイン・機能をありがとうございます。

    返信
  14. 名前:よし :投稿日：2021/08/08(日) 00:51:07 ID：c5Mjg0NDg

    ボックスの色を変えようと下記のコードを外観→テーマエディターにコピペしたのですが反映されません。

    テーマはcocoon
    スキンはseason
    です。

    お忙しいとは思いますがよろしくお願いします。
    →https://hh-investor.com/

    /* fontawesome */
    .p-nav ul li a i,.p-nav ul li a svg{
    font-size: 40px;/* アイコン大きさ */
    padding: 10px 0;/* アイコン余白 */
    color: #84acdc;/* アイコン色 */
    display:inline-block;
    }

    返信
  15. 名前:ヒロ :投稿日：2021/08/13(金) 11:47:25 ID：E4NTQ4NDI

    ボックスナビ内の画像に青線が出現してしまいました。PCのみ。
    テーマはcocoonを利用しています。
    画像を張り替えてみましたが、変化ありませんでした。
    なにか対応策があれば、ご教授していただけると幸いです。
    よろしくお願いいたします。

    返信
  16. 名前:神野 :投稿日：2021/09/06(月) 14:17:44 ID：AzMTg0NTM

    ボックスナビの表示を3✖️2にしたいのですが、どのようにすれば良いのでしょうか。現在だと4✖️2になっているのですが、、、

    返信
  17. 名前:おいも :投稿日：2022/06/01(水) 04:05:15 ID：U3MzU5OTU

    こんばんは。
    素敵な投稿ありがとうございます。

    ボックスナビは作成できたのですが、
    リンク先URLのページ作成方法がわかりません。

    ぽんひろ。さんの
    https://ponhiro.com/category/wordpress/html-css/
    このカテゴリー別まとめページのつくり方です。

    JINを使用しています。

    お手数をおかけしますが、ご教授お願できますでしょうか。

    返信
  18. 名前:おいも :投稿日：2022/06/01(水) 23:45:03 ID：U3MzU5OTU

    こんばんは。昨日質問したおいもです。

    無事解決しました！
    Wordpressの元々あるカテゴリーURLを指定すればよかったのですね。
    PVアップにつながるよう、これからも参考にさせていただきます。
    https://oimo-kakei.com/

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

    返信
  19. 名前:ミカエル :投稿日：2022/06/04(土) 09:17:24 ID：k4MDgwODY

    使わせていただきました！
    おかげさまで、ずっと悩んでいた問題が解決しました！

    返信
  20. 名前:すきとほる :投稿日：2022/11/27(日) 14:48:00 ID：M4MjAwNTU

    初めまして、いつもThe Thorをいじる際に大変参考にさせて頂いております。

    さっそくボックスナビを設定してみたのですが、設定したAwesomeアイコンがなぜかブログの至るところに現れるようになってしまいました。

    Rankingや人気記事などのタイトルの前など、あちこちに人型のアイコンが無造作に出現しております。

    CSSを設定し、さらにカスタムHTMLでサイドバーに追加したのみですのに、なぜそれ以外の場所にもアイコンが表示されてしまうのが謎です。

    ご助言いただけますと大変助かります。

    返信

ページトップへ