【SANGOカスタマイズ】ナビゲーションメニューをサイドバー＆スマホメニューに設置する方法

ナビゲーションメニューというのは、こんなやつです⇩

オシャレですよね？

SANGO子テーマ「PORIPU」の開発者マサオカさんや、ガジェット・家電紹介で有名なマクリンさんなどが導入されているナビゲーションメニュー。

ブログデザイン的にも、回遊率向上→アクセスアップを狙うためにも、おすすめのカスタマイズです。

この記事では、WordPressテーマ「SANGO」のサイドバーにナビゲーションメニューを実装するカスタマイズについて解説します。

SANGOのサイドバーにナビゲーションメニューを設置する方法

早速、設置方法を確認していきます。

８ステップありますが、この記事を読みながら順番に進めれば、１０分程度で設置できます。

1.ダッシュボードの「カスタマイズ」をクリック

WordPressにログインし、ダッシュボードメニューから「カスタマイズ」をクリックします。

カスタマイザー画面の「カスタマイズ」をクリックしても、同じ画面に移動します。

2.「ウィジェット」をクリック

カスタマイズ画面が開いたら、左側に表示されるメニューから「ウィジェット」をクリックします。

3.「サイドバーを追加」をクリック

ウィジェット画面で「サイドバーを追加」をクリックします。

4.ウィジェットを追加」をクリック

「ウィジェットを追加」をクリックします。

5.カスタムHTML」をクリック

ウィジェットの項目一覧が表示されるので、「カスタムHTML」をクリックします。

6.HTMLソースを入力（コピペ可）

HTMLソースを入力する欄が表示されるので、ナビゲーションメニューのソースコードを入力します。

すもブロのナビゲーションメニューのソースコードは、次のとおりです。

【コピペ用】

<div class="widget-menu__title main-bc ct strong">
  <i class="fa fa-map-marker"></i> ナビゲーション
</div>
<ul class="widget-menu dfont cf">
<li><a href="https://sumou-baby.com/tag/how-to-start-blog/"><i class="far fa-keyboard" style="color: #ff9191"></i>ブログの始め方</a></li>
<li><a href="https://sumou-baby.com/tag/access-up/"><i class="fas fa-chart-line" style="color: #ff914d"></i>アクセスアップ</a></li>
	<li><a href="https://sumou-baby.com/tag/sns/"><i class="fas fa-mobile-alt" style="color: #77b255"></i>ＳＮＳ活用</a></li>
	<li><a href="https://sumou-baby.com/tag/sales-writing/"><i class="fas fa-pencil-alt" style="color: #cb6ce6"></i>ライティング</a></li>
		<li><a href="https://sumou-baby.com/tag/earn-on-blog/"><i class="fas fa-yen-sign" style="color: #38b6ff"></i>収益化</a></li>
			<li><a href="https://sumou-baby.com/"><i class="fab fa-google" style="color: #ffde59"></i>Googleアプデ</a></li>
</ul>

カスタムHTML欄にコピペすれば、すもブロのサイドバーとまったく同じナビゲーションが表示されます。

7.リンク先などをカスタマイズ

ソースコードとナビゲーションは、次の画像のとおり対応しています。

カスタマイズが必要なのは、次の項目です。

ナビゲーションタイトルのカスタマイズ

アイコンの種類

アイコンは、Font Awesomeでコードを取得します。

まず、Font Awesomeの公式サイトにアクセスします。

左上に検索欄があるので、探したいアイコンの名前を英語で入力します。

「PC」と入力すると、下の画像のような検索結果が一覧表示されます。

黒く表示されているのが、無料で利用できるアイコンです。

ここでは、赤枠で囲んだ「laptop」のアイコンをクリックします。

アイコンの情報が表示されるので、アイコン上のコードをコピーします。

「laptop」アイコンの場合、「<i class=”fas fa-laptop”></i>」というコードが表示されます。

コピーするのは、「”」と「”」で囲まれた「fas fa-laptop」の部分だけです。

名前

ナビゲーションメニューの名前を決めます。

SANGOカスタマイザーのカスタムHTMLにもタイトル欄があります。

しかし、ここに入力するとタイトルが２つになってしまうので、空欄にしておきます。

8.各メニューのカスタマイズ

リンク先

ナビゲーションメニューをクリックしたときのリンク先を入力します。

各メニューの内容に合った「カテゴリー」や「タグ」ページのURLを入力しておくのが一般的です。

アイコンの種類

ナビゲーションメニューのアイコンと同じく、Font Awesomeでコードを取得して貼り付けます。

アイコンの色

アイコンの色も自由に選択できます。

名前

各メニューの名前を自由に決められます。

ブログのジャンルやカテゴリーにマッチした名前をつけると、回遊率の向上が期待できます。

メニューの数は偶数にしよう

メニューの数は、必ず偶数にしましょう。

奇数にすると、画像のようにデザインが崩れてしまいます。

スマホのナビドロワー（ハンバーガーメニュー）にナビゲーションメニューを設置する方法

ナビゲーションメニューは、スマホのナビドロワー（ハンバーガーメニュー）にも設定することができます。

【⇦部分がナビドロワー（ハンバーガーメニュー）】

クリックすると、下の画像のように展開します。

ナビドロワーにナビゲーションメニューを設置する手順

ダッシュボードから、ウィジェット画面に移動して「スマホ用ナビドロワー」の設定をします。

カスタムHTMLの内容欄に、サイドバーに設置したナビゲーションメニューのソースコードをコピペし、「保存」をクリックします。

「完了」をクリックすれば完了です。

SANGOカスタマイズ後のナビゲーションメニューの使い方

SANGOのナビゲーションメニューを設置しているブログを見て回ると、おおむね次のような使い方をされています。

特定記事へのリンク

収益化記事や読ませたい記事など、ユーザーに読ませたい記事をナビゲーションメニューに表示する方法です。

よく見かける「おすすめ記事」やと似た使い方ですね。

カテゴリーによる分類

ブログのカテゴリーをナビゲーションメニューに設定する方法です。

カテゴリーを強調する（カテゴリーとナビゲーションメニューを両方設置）ケースと、カテゴリーウィジェットの代わりに設置するケースがありました。

タグによる分類

カテゴリーは別途ウィジェットで設置し、タグの一部をナビゲーションメニューで表示する方法です。

カテゴリーを大分類、タグを小分類に分けて、タグの方を一定の基準でメニューに表示してあるケースが多かったです。

私の場合

すもブロは、まだ始めたばかりのブログなので分類というレベルではありません。

今のところ、特定記事へのリンクとタグによる分類として利用しています。

ユーザーの検索意図に沿うことを重視した仕様です。

SANGOのサイドバーにナビゲーションメニューを設置する方法のまとめ

ナビゲーションメニューは、ユーザーの意図に沿ったカスタマイズをすれば、回遊率が上がってアクセスアップが見込めます。

HTMLソースコードのコピペや細かいカスタマイズが面倒くさいかもしれませんが、記事を読みながらやれば、５分程度で済みます。

５分でアクセスアップが見込める作業なんて他にはあまりないので、ぜひやってみてください。

ブログを長く運営するなら、設置しておいて損はありませんよ。