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

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

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

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

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

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

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

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

勝手に名付けました！

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

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

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

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

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

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

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列になるようになっています。

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

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

手順は以下の通りです。

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

STEP1：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 !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コードは下記の通りです。

<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を開いてください。

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

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

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

JINオリジナルアイコンを使う場合

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

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

] jic ji

jin-theme.com

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

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

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

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やブログでこの記事を紹介していただいた場合、こちらでブログを紹介させていただきます！

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