初心者が読むべき500のノウハウ記事のまとめ

【ワードプレスSANGOカスタマイズ】サイドバーのナビゲーションメニューの作り方

この記事はこんな人におすすめ
  • ワードプレス有料テーマSANGOを使っている
  • サイドにカテゴリとは別にナビゲーションメニューをつけたい
  • カテゴリとタグの使い分けがよくわからない

こんにちは!
アフィリエイトの超ノウハウコレクターごま吉(@Lv1gomakichi)です。

最近当ブログのデザインを色んな方からお褒めて頂いてます。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

有料テーマSANGOのおかげでスよ

ご質問も増えてきましたので、少しシリーズ化してカスタマイズを部分的に紹介していこうと思います。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

前提として、私みたいにHTMLとかCSS初心者クラスの人が対象です(※なので文法とか合ってないかもしれません)

ひとまず、私のブログではきちんと表示されているということで、興味のある方は見ていただければと思います。

では、どうぞー。

【ワードプレスSANGOカスタマイズ】サイドバーのナビゲーションメニューの作り方

今日カスタマイズのご案内するのはコレです↓

そう、サイドバーのナビゲーションメニューです。
このナビゲーションはマクリンさんやマサオカさんたちを始めとする有名ブロガーさんたちが多く実装しているカスタム。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

SANGOユーザーなら、ぜひとも導入したいシロモノです。

サイドバーのナビゲーションメニュー 設置方法

まずは、カスタマイザーからカスタマイズを選択します。


次はサイドバーを選択します


次に右下に登場するウィジェットを追加を選択します。


すると、横にたくさんメニューが出てきますので、その中からカスタム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://level99-beginner.com/tag/seotactics/"><i class="fas fa-chart-line" style="color: #ff9191"></i>アクセスアップしたい</a></li>
<li><a href="https://level99-beginner.com/tag/syuueki/"><i class="fas fa-yen-sign" style="color: #FFD700"></i>収益化できない</a></li><li>
<a href="https://level99-beginner.com/tag/writingtechnic/"><i class="fa fa-pencil" style="color: #ffb776"></i>執筆テクニック</a></li><li>
<a href="https://level99-beginner.com/tag/kijikousei/"><i class="far fa-file-alt" style="color: #92ceff"></i>記事構成を学びたい</a></li><li>
<a href="https://level99-beginner.com/tag/genreselect/"><i class="fas fa-mouse-pointer" style="color: #77d477"></i>ジャンル選びが不安</a></li><li>
<a href="https://level99-beginner.com/tag/keywordplanning/"><i class="fas fa-key" style="color: #DEB887"></i>稼げるキーワードって?</a></li><li>
<a href="https://level99-beginner.com/tag/muryou/"><i class="fas fa-palette" style="color: #FFD700"></i>無料素材・ツール</a></li><li>
<a href="https://level99-beginner.com/tag/motivationup/"><i class="fas fa-heart-broken" style="color: #ff9191"></i>ブログが続かない</a></li><li>
<a href="https://level99-beginner.com/tag/adsense/"><i class="fab fa-google" style="color: #CC99FF"></i>AdSense審査・運用</a></li><li>
<a href="https://level99-beginner.com/tag/wordpress/"><i class="fab fa-wordpress-simple" style="color: #008BBB"></i>WordPressを学びたい</a>
</li>
<li>
<a href="https://level99-beginner.com/tag/matome/"><i class="far fa-thumbs-up" style="color: #ff9191"></i>まとめ記事一覧</a>
</li>
<li>
<a href="https://level99-beginner.com/tag/special/"><i class="far fa-clipboard" style="color: #DEB887"></i>特集(ごま記事)</a>
</li>
</ul>
https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

一旦コピペしても形はできると思います。その後書き換えする方がわかりやすいかも。

サイドバーのナビゲーションメニュー HTMLソースの変更

ソースと実際のプレビューは、こんな感じになってます。

それぞれの箇所を変更してやれば、自分好みにカスタマイズできます。
カスタマイズの具体的な箇所は以下です。

ナビゲーションの総称(キャッチコピー)

当ブログでは、【あなたのお悩みは?】としています。

  1. アイコンを変更できます
  2. ナビゲーション全体のキャッチコピー

アイコンは、FontAwesomeのサイトよりコードをコピーしましょう。

公式FontAwesome

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

カワイイのがたくさんあります。チョイスしよう

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

それぞれのメニューをカスタマイズします。基本的には、下記のソースを何個も置いていくだけですので、1つ基本形ができれば後は簡単です。

  1. メニューを押したときのリンク先
  2. アイコンの種類(FontAwesome参照)
  3. アイコンのカラー
  4. メニューの名称
memo

アイコンのカラーコードや正式な設置方法は、SANGOの公式ページでも案内されてますので合わせてチェックしてください。

公式SANGOカスタマイズガイド

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

後は必要な数を段積みするだけ。メニューの数は偶数で揃えましょう。(凸凹になりますので)

スマホのハンバーガーメニュー内にナビゲーションを出す方法

上記のような感じに、スマホのハンバーガーメニューを押した時にナビゲーションを出す方法は以下です。

ワードプレス管理画面外観ウィジェットスマホ用ナビドロワーを選択します。

カスタムHTMLブロックをそのままスマホ用ナビドロワードラッグ&ドロップします。

PCでも使ったHTMLソースを、ここでもそのままコピペすればOK。
【完了】ボタンを押せば反映します。

【ワードプレスSANGOカスタマイズ】サイドバーのナビゲーションメニューの考え方

ちなみに、このナビゲーションメニューですがどういった用途で使うのがベストか最初に考えて設計するといいと思います。

  • カテゴリーを強調して、表現を変えてもう1回出したい
  • 特定のページへの別動線を貼りたい
  • カテゴリーでまとめきれないものへの動線を作りたい

こんな感じで色々とアイデアはあると思います。
そんな中、私がオススメする方法は

タグによる分類のナビゲーションとして使う

です。

例えば当ブログのカテゴリ設計は、以下になってます。

わかりやすい例でいうと、【アフィリエイトブログの作り方】というカテゴリがあるのですが、この中にはワードプレスの使い方だったり紹介したい無料ツールがあったりします。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

サブカテゴリを増やすこともいいけど、SEO的に弱くなりそう・・

こうした考え方もあって、当ブログではカテゴリとしては分類を大きくまとめて、事柄タグで小さくまとめるような構造にしています。

ちなみにこの考え方は以下の記事を参考にさせて頂きました。

【後からでは遅い!?】カテゴリとタグを使い分けて検索上位を狙うSEO:webマーケ戦略会議 【初心者必見】カテゴリトップページを削除すると個別ページの順位が上がるSEOな話: SEOの森

分類したタグを【悩み】に変換する

ブログに欲しいアクセス(質)は『悩みを解決したい人』です。
悩みを解決しやすいように、タグの分類を『こんな悩みはありませんか?』という趣旨でまとめてナビゲーションとして使っています。

いかがでしたでしょうか?

ナビゲーションのメニューは、そもそもブログに辿り着いたユーザーの検索意図に沿ったナビになっていると親切です。

https://level99-beginner.com/wp-content/uploads/2019/03/s512_f_object_174_0bg.png
ごま吉

ぜひ、チャレンジしてみてください♪(´ε` )

▼こちらも合わせてご覧ください▼

【おすすめ】デザイン性に優れたWordPress有料テーマ 4選:収益を高めるならデザインが重要