Blogger：QooQのスマホ表示のナビゲーションメニュー（MENU）表示をハンバーガーメニューアイコンにする！-monocotoyom

　Blogger用の無料テンプレートQooQのスマホ用ナビゲーションアイコンの”＝”の部分はメニュー表示機能だったんですね。

　このアイコンがハンバーガメニューにならないかな？と調査したところ、良い情報がありましたので、QooQのナビゲーションメニューのアイコンをSmart風のハンバーガーメニューにカスタマイズしました。

　ということで、今回はSmartっぽいスマホのメニューをQooQで表現してみよした体験を具体的にわかりやすくまとめて記事にしています。

　上図はSmartの画面です。左側にハンバーガメニューアイコン（三本線）にMENUとあってわかりやすいです！

　ちょっとお話を戻します。
　Smatは、ふでたまご様が無料で配布していて、QooQは、くうく堂様が無料で配布しているBloggerテーマとして使える無料のテンプレートです。

　テンプレートとは、ブログのデザインのひな型のようなものです。
　Bloggerではテーマと呼ばれているものですが、同様な機能を無料で公開してくださっている方々がいます。こういうテーマに使用できるものはテンプレートと呼ばれています。

　テンプレートは、そのまま使用するのもよいですし、カスタマイズすることもできるのでブログのもう一つの楽しみでもあります。

　わたしは、当初QooQを導入しましたが、Smartのカッコよさにひかれて、Smartテンプレートに変更しました。

　SmartのデザインはPC,スマホともにとても素敵にできており、追加でカスタマイズは不要だなって思えるできです。
　とっても、私好みのデザインですごく気に入っています。

　しかし、Google構造化データテストツールでエラー表示がありSEO的には問題がありそうと悩んでいます。

　そこで、QooQをSmart風にできないかなぁと試行錯誤をしています。

QooQのスマホ表示のナビゲーションメニュー（MENU）表示をハンバーガーメニューアイコンにする

　Smatの三本線のMENUというのは、ハンバーガーメニューと呼ばれているようです。

　ソリッドな感じで素敵です。

ナビゲーションメニュー（MENU）とは

　また、ハンバーガーメニューが設置されている帯部分は、Smartではヘッダーナビと言われる部分になります。
　また、QooQではナビゲーションと呼ばれている部分です。
　各々ここにメニューが設置されます。

　この部分のメニューは一般的にグローバルメニューともいわれるようです。

QooQのメニューをハンバーガーメニューアイコンにするには

　QooQのスマホでのメニューは二本線だけが表示されています。

　注意：上記ではブログタイトルの下にナビゲーションバーが表示されていますが、カスタマイズを行い順番を変更済みの図になります。

　上記のようにちょっとわかりにくい感じです。

　そこで、いろいろ調査したところ、ふじやん(Fujiyan)様のふじろじっくの記事に出会えました。
　今回は、こちらの記事を参考にハンバーガーナビを導入していきます。

【QooQ】ナビバー開閉ボタンのカスタマイズ
お手軽カスタマイズでナビバーボタンをカッコよくしてみよう

無料テンプレートQooQの変更手順

　ふじやん様のブログ通り進めてまいりますが、一点、変更点もありますので順に説明していきます。

　テンプレートへの変更は<body>部分と<head＞部分を修正することになります。
　テンプレートを修正しますのでバックアップをお勧めします。
　バックアップは、Bloggerの設定画面→テーマ→カスタムの右側の▼を押下すると表示されるプルダウンメニューから”バックアップ”を選択で可能です。

　修正はHTML編集で行います。
　HTML編集は、Bloggerの設定画面→テーマ→カスタムの右側の▼を押下すると表示されるプルダウンメニューから”HTMLを編集”を選択で可能です。

<body>部分の修正

　label for='navigation-button' を検索してください。

　検索は、Ctrl＋Fを押して、Serchボックスに上記文字列を入力（コピペ）しリターンしてください。

　ボックスが出ない場合は、一度HTML編集画面をクリック（フォーカスを移す）してから再度、Ctrl＋Fを押してください。

上記のように検索結果が表示されます。

この

部分を、

に書き換えます。

ハイライトしている部分が書き換え後になります。

<head＞部分の修正

　ふじやさん様の記事から②CSS部で示す追記コードを入手してください。

　指示によるとCSS部分に追記とあります。
　わたしは、そのCSS部分という場所がわからなかったので以下のことから<head＞部分を修正しました。

　→2021/3/30追記：CSSを追加の方法がわかりました。
　　　　　　　　　　詳細はこちらの記事をご覧ください。
　　　　　　　　　　以降の記事の記載方法より簡単に”CSSを追加”ができます

　CSSの設置場方法は3パターン
　・styleタグに書く
　<head> のなかに＜style＞で書き、<body>にスタイルを適応させる。

　・インラインに書く
　<body>内のタグに直接、属性としてスタイル

　・外部ファイルに書く
　外部ファイルにCSSを書き、<head> のなかでリンクファイルとして読み込む

　ということですので、属性、外部ファイルというのは該当しそうにありませんから、<head＞のなかのに＜style＞で書くことにしました。

　具体的には”ナビゲーション”のCSS部分のコードに引き続き挿入しました。

　ナビゲーションを検索し、ヘッダーの直前にコードを挿入しました。

ハンバーガーメニューアイコンの動作

　以上のようにQooQのテンプレートを修正し、スマホでみると以下のようになります。

　ハンバーガーメニューを押すとメニューが表示されます。

　以上のようにハンバーガーメニューが追加できました。

Smat風にハンバーガーメニューを左側に寄せる

　このハンバーガーメニューですが、Google製のアプリの多くは左側にあります。
　そこで、ハンバーガーメニューを左側にしました。

　どうでしょうか？Smart風になりましたね。

　この状態でメニューを開くとどうなるか、ホームの文字と重なるかもしれません。

　問題なく、×の右側にホームが表示されています。

コード修正箇所

　②CSS部に示すコードの

float: right;

を

float: left;

に変更しました。

まとめ

　ふじやん様の記事のコードを使えば簡単にハンバーガーメニューにすることができました。

　些細なことですが、ハンバーガーメニューを変更することができて満足です。

　ポイントは

ふでたまごさんの記事のコード流用
float: left;に修正する。

　です。

編集後記

　Smartではハンバーガーメニューをクリックすると、プルダウンメニュー化されているんですよね。
　残念なことに今回のQooQに行ったコード修正ではアイコンだけが変化するだけなんです。

　やはりプルダウンメニューカッコいいので、プルダウンメニュー化できないか、調査、試行錯誤中です。

　カスタマイズはわたしにはすごくハードルが高いのですが、コードを公開してくださる方々のおかげで、とっつきやすくなりました。

　一方で、本来ブログでやりたこともそっちのけでブログのカスタマイズが楽しい毎日です。

　情報を公開していただいている作者のみなさ！ありがとうございます。

　その他のカスタマイズもこちらにまとめていますので参考にご覧ください。

　→Blogger用無料テンプレートQooQ導入とカスタマイズまとめ

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

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

Blogger：QooQのスマホ表示のナビゲーションメニュー（MENU）表示をハンバーガーメニューアイコンにする！