支援者募集中!仕事依頼はこちら

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

ボックスナビの作り方
スポンサーリンク

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

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

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

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

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

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

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

勝手に名付けました!

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

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

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

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

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

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

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

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

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

【Cocoon】SEOに強いオリジナルトップページを作る!【構築編】
Cocoonのトップページカスタマイズです。固定ページを使ってSEOに強いオリジナルのトップページを作ります。こちらの記事は構築の方法を掲載しています。Cocoonでは普通にトップページを作るとh1が悪さをしてSEOにあまり良くないので注意が必要です。

参考 どこよりも簡単に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やブログでこの記事を紹介していただいた場合、こちらでブログを紹介させていただきます!

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

ご連絡お待ちしております!

他にもコピペカスタマイズやってます

他にもコピペでできるカスタマイズをやっているので良かったらご覧ください。

あわせてコピペでできるブログカスタマイズまとめ【HTML&CSS】

コピペでできるブログカスタマイズまとめ【HTML&CSS】
ブロガー、アフィリエイターに役立つブログやサイトのカスタマイズをまとめていきます。HTML、CSSがわからなくてもコピペ可!WordPress(Cocoon、JIN、SANGO、Affingerなど)、はてなブログなど一部機能を除けば誰でも利用可能です。

コメント

  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を応援させて頂きたいと思います!

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

ページトップへ