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

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

ボックスナビの作り方

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

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

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

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

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

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

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

勝手に名付けました!

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

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

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

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

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

Twitter

Twitter

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

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

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

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

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

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

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

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

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

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

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

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

-動物の生態-

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

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

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

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

手順は以下の通りです。

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

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

STEP1:CSSをコピペ

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

メモ

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

/************************************
** ボックスナビ
************************************/
.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;
}
/* 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;/* アイコン色 */
}

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

列の数を変更する

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

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

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

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

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

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

STEP2:HTMLをコピペ

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

<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

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

JINオリジナルアイコン

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

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

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

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

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

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

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

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

/* サイドバー */
.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。

該当箇所はこちらです。

/* 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個設定したい人は

/* 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. はじめまして!
    以前からボックスナビに惹かれておりまして
    とうとうやり方見つけたっ!と思い、早速試してみたのですが
    なぜか⇒マークが出てしまいます。

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

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

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

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

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

    宜しくお願いします。

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

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

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

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

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

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

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

    • ありがとうございます!

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

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

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

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

    https://beginner.kameyamako.net

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

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

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

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

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

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

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

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

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

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

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

    • ありがとうございます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. ぽんひろさん

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

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

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

    Useful Blocks Pro、いい感じです!

    • >とらさん

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

ページトップへ