Materiapolloテーマのナビバーとハンバーガーメニューのリンクを追加！初心者でも簡単！-monocotoyom

　Materiapolloテーマカッコいいで、ぜひ導入してみたいですよね！
　しかし、Bloggerのレイアウトだけではヘッダー・ナビゲーションバー（以下　ナビバー）のリンクができないのです。

　ということで、今回はMateriapolloテーマのヘッダー・ナビゲーションバー部分のリンクと、ハンバーガーメニュー部分のリンク部分を”HTMLを編集”するで、追加した体験を具体的にわかりやすくまとめて記事にしています。

　Materiapolloテーマをご存知ですか？Bloggerに使用できる無料のテンプレートです。
　Bloggerへの導入方法の詳しい記事は、Materiapolloテーマ導入記事がありますので興味があればご覧ください。

　また、SEO対策として”PageSpeed Insights（ページスピードインサイト）でスピード確認”と、”Google構造化データテストツール（ structured data testing tool）の確認”を、人気のQooQとSmart、そしてこのMateriapolloテーマを比較した記事もありますので興味があればご覧ください。

　今回は、ナビバーとハンバーガーメニューのリンクの追加・修正方法に関してお話します。

　尚、Materiapolloテーマはペン鰭 (Penhata)様の”Cottpic”という日本のサイトで無料で配布されています。
　詳細はこちらのサイトを参照ください。

Materiapolloテーマのナビバーとハンバーガーメニューのリンクを編集

　無料日本語対応テンプレートにはQooQもあります。
　QooQは、テンプレートを導入し、Bloggerサービスの管理メニューから”デザイン”を選んでカスタマイズできます。
　カスタマイズはガジェットという単位で、細かく設定できます。

　例えば、ナビバー。
　QooQやSmartといったテンプレートは、ナビバーのリンク、”ホーム”や”お問い合わせ”や”プライバシーポリシー”などを、追加する場合は、Bloggerの”レイアウト”からガジェットに設定することで、簡単に追加できます。

　　”ページ”の詳しいことはこちらに参考記事もありますのでよろしければご覧ください。
　尚、Smartもほぼ同様な手順でナビバーをガジェットで設定できますのでお勧めです。

　一方、今回ご紹介するMateriapolloテーマは、ナビバーのリンクを追加るにには、HTML編集が必要なんです。

　Materiapolloテーマを導入直後は以下のようになります。

　Materiapolloテーマを導入方法に興味のある方は記こちらの事をご覧ください。

　他のテンプレートでは”ページ”で作成した固定ページが簡単にが表示されまするんですが・・・HTML編集をする必要があるようです。。。

　ということで、本題のリンク追加にはいりましょう！

MateriapolloテーマのナビバーをHTML編集

　MateriapolloテーマのリンクをHTML編集します。

　編集するのは、HTML編集画面で”First”を検索し該当部を見つけて、リンクするURLを追加する作業です。

　具体的には、Blogger管理画面→テーマ→カスタマイズの右の▼をクリック→HTML編集で、HTML編集画面を表示します。

　次にキーボードからCtrl＋Fを同時押下し、検索用のダイアログを出し”First”を入力します。

　HTMLを見ると、単にURLをリンクする部分とプルダウンでリンクだ出てくる２つのパターンがあります。　

　上記の箇所を選び修正します。

　修正例です。
　わたしはオリジナルコードを残していますが、消しても問題ないと思います。

　具体的に説明します。

　リンク部分のhref="#!"部分にリンク先のURLを記載します。
　また、プルダウンのメニュは<li>~</li>で囲まれる部分をプルダウンメニューとして扱えばOKです。
　以下は修正コード部分部分になります。
　href="#!"の部分（例えばhttps://monocotoyom.blogspot.jp/search/label/blogger設定?の部分）は、任意に変えてください。

　プルダウンメニュー型のリンクの追加コード

<li><a class='dropdown-button' data-activates='dropdown1' href='#!'>Bloggr関連<i class='material-icons'>arrow_drop_down</i></a></li>
<ul class='dropdown-content' id='dropdown1'>
<li><a href='https://monocotoyom.blogspot.jp/search/label/blogger設定?'>Bloggr設定</a></li>
<li><a href='https://monocotoyom.blogspot.jp/search/label/QooQ?'>QooQ</a></li>
<li><a href='https://monocotoyom.blogspot.jp/search/label/Smart?'>Smart</a></li>
<li><a href='https://monocotoyom.blogspot.jp/search/label/Materiapollo?'>Materiapollo</a></li>
</ul>

　わたしは、プルダウンメニューにはラベル毎の記事一覧を表示するリンクを追加しました。

　もし、レベル毎の記事一覧を表示するリンクに興味のある方は、ラベル毎の記事一覧を作る記事という記事がありますので、ご興味があればご覧ください。

　リンクの追加コード

<li><a href='https://monocotoyom.blogspot.com/p/html-sitemap.html'>SITMAP</a></li>
<li><a href='https://monocotoyom.blogspot.com/p/privacy-policy.html'>プライバシーポリシー</a></li>
<li><a href='https://monocotoyom.blogspot.com/p/contact.html'>お問い合わせ</a></li>

上記の修正後に保存します。

　保存は、上記の赤で囲った部分のアイコンをクリックします。

　保存後にブログを表示します。
　上記のようにプルダウンメニュー付きのナビバーに変化しました！

　意外に簡単でしたね。　

　尚、PC画面ではマウスオーバーするとプルダウンするみたいです。

MateriapolloテーマのハンバーガーメニューをHTML編集

　次にハンバーガーメニューのHTMLを編集します。
　ハンバーガーメニューってあの三本線のマークですね。

　QooQやSmatなどのテンプレートではナビバーの項目を、ハンバーガーメニューで表示するようになっています。

　一方、今回ご紹介するMateriapolloテーマはナビバーとハンバーガーメニューは別々にせっていできます。

　では、ハンバーガーメニューも同様に追加・修正していきます。

　今回はナビバーと、同じリンクをハンバーガーメニューでも表示させます。

　まずは、導入直後の表示例です。

　上記の赤枠部分がハンバーガーメニューです。

　ここをクリックするとメニューがでてきます。

　次に、ハンバーガーメニューのHTMLを編集します。

　詳細な編集手順はナビバーと同じです。

　ハンバーガーメニューでは "First Sidebar Link"を検索しコードを編集します。

　わたしはオリジナルコードを残していますが、消しても問題ないと思います。

プルダウンメニュー型のリンクの追加

<li class='no-padding'>
<ul class='collapsible collapsible-accordion'>
<li>
<a class='collapsible-header'>Bloggr関連<i class='material-icons'>arrow_drop_down</i></a>
<div class='collapsible-body'>
<ul>
<li><a href='https://monocotoyom.blogspot.jp/search/label/blogger設定?'>Bloggr設定</a></li>
<li><a href='https://monocotoyom.blogspot.jp/search/label/QooQ?'>QooQ</a></li>
<li><a href='https://monocotoyom.blogspot.jp/search/label/Smart?'>Smart</a></li>
<li><a href='https://monocotoyom.blogspot.jp/search/label/Materiapollo?'>Materiapollo</a></li>
</ul>
</div>
</li>
</ul>
</li>

上記はラベル毎の記事一覧を作るURLを記載しています。

リンクの追加コード

コードの修正が終わったら保存をしてください。

修正してハンバーガーメニュをクリックすると以下のようになります。

　わたしは、並びもそろえたくてドロップメニューを一番上に配置しました。

　ドロップボタンを押すといかのようになります。

　サイドバーのメニュー全体がドロップメニューの表示に合わせて、ほかのリンクが下がっている様子がわかります。

　ただ、プルダウンメニューで追加されたリンクと、初めに会ったリンクの階層が同じになるのですね。
　これは、プルダウンメニューを一番下にした方がいいのかもしれません。

まとめ

ナビバーとハンバーガーメニューのリンク編集のポイントは、

ナビバーは”First”を検索し<'#！'>部分にリンクしたいURLを記載しタイトルを編集する。
ハンバーガーメニューは"First Sidebar Link"を検索し<'#！'>部分にリンクしたいURLを記載しタイトルを編集する。
プルダウンメニューは<li>~</li>に囲われた部分を修正する。

です。

　リンクの数やプルダウンメニューは必要なだけ追加、削除すると該当箇所に反映されます。

実際に編集してみると意外に簡単でした。

編集後記

　始める前は、通常のリンクとプルダウンメニューの順番やプルダウンメニューリスト部分はどうやって変更するんだろう？と心配でした。

　実際、コードを修正してみると、ややこしいこともなくイメージ通りに編集できました。

　ただ、修正しなくちゃいけないところがここだけなのか？というのはまだ心配はありますね。
　この辺はまだ調査が必要そうです。

　ほかにやり方、対処の仕方をご存知の方がいればコメントいてだけると助かります。

　また、おなじお悩みを抱えていた方もこの記事で解決できたらコメントいただけるとはげみになりますので、コメントをお願いします！

Materiapolloテーマのナビバーとハンバーガーメニューのリンクを追加！初心者でも簡単！