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

SANGOカスタマイズでナビゲーションメニューをサイドバーとナビドロワーに設置する方法

すもベビ

WordPressテーマの「SANGO」を使っている人、サイドバーにナビゲーションメニューは設置していますか?

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

SANGOのナビゲーションメニュー

オシャレですよね?

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

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

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

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

サンゴのカスタマイズ ナビゲーションメニューの設置

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

  1. ダッシュボードの「カスタマイズ」をクリック
  2. 「ウィジェット」をクリック
  3. 「サイドバー」をクリック
  4. 「ウィジェットを追加」をクリック
  5. 「カスタムHTML」をクリック
  6. HTMLソースを入力(コピペ可)
  7. リンク先などをカスタマイズ
  8. 各メニューのカスタマイス

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

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

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

WordPressのダッシュボード

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

WordPressのカスタマイザー

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

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

SANGOカスタマイズ ウィジェット

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

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

SANGOカスタマイズ サイドバー

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

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

SANGOカスタマイズ ウィジェット追加

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

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

SANGOカスタマイズ ウィジェットを追加

6.HTMLソースを入力(コピペ可)

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

SANGOカスタマイズ カスタムHTML

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

【コピペ用】

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

すもベビ

このままでは、リンク先はすもブロ、見出しも私がつけたまま。

あなたのブログ用にカスタマイズする必要があります。

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

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

SANGOカスタマイズ ナビゲーション

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

  • ナビゲーションタイトルの①アイコンの種類と②名前
  • 各メニュ―の①リンク先、②アイコンの種類、③アイコンの色、④名前

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

SANGOのナビゲーションメニュー

  1. アイコンの種類
  2. 名前

アイコンの種類

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

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

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

font awesome 公式サイト

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

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

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

font awesomeの検索結果

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

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

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

font awesomeのコード

名前

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

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

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

SANGO カスタマイザー

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

  1. リンク先
  2. アイコンの種類
  3. アイコンの色
  4. 名前

 

リンク先

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

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

アイコンの種類

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

アイコンの色

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

名前

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

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

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

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

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

SANGOのナビゲーションメニューのデザイン崩れ

すもベビ

せっかくオシャレなナビゲーションメニューを設置しても、段組みが崩れてしまっては台無しです。

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

SANGOのカスタマイズ ナビドロワー(ハンバーガーメニュー)

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

すもベビ

ナビドロワーというのは、スマホでブログを見たときに左上に表示されるメニューです。

形状からハンバーガーメニューとも呼ばれます。

部分がナビドロワー(ハンバーガーメニュー)】

SANGOのナビドロワー

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

SANGOのナビドロワー

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

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

SANGOのナビドロワー

  1. 外観をクリック
  2. ウィジェットをクリック
  3. スマホ用ナビドロワー(ハンバーガーメニュー)をクリック
  4. カスタムHTMLをスマホ用ナビドロワーまでドラッグしてドロップ

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

SANGOのハンバーガーメニュー

すもベビ

サイドバーと同じで、メニューの名前が重複しないよう、カスタムHTMLのタイトル欄は空欄にしておきます。

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

SANGOのカスタマイズ

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

SANGOのカスタマイズ

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

  • 特定記事へのリンク
  • カテゴリーによる分類
  • タグによる分類

特定記事へのリンク

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

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

カテゴリーによる分類

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

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

すもベビ

メインカテゴリー以外の記事を、まとめてナビゲーションメニューに放り込んであるブログも見つけました。

タグによる分類

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

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

私の場合

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

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

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

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

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

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

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

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