はてなブログにメニューボタンを組み込んでみました

■はじめに

はてなブログを使いはじめてから、いろいろとカスタマイズをしてきました。ネット上では多くの方が、カスタマイズに関わる情報を公開されています。それを見ながら、自分なりにアレンジしてブログのデザインをカスタマイズするのは、非常に楽しい作業です。

当ブログは、シンプルで読みやすいものにしたいと思ってカスタマイズしてきましたが、ある程度自分がイメージするデザインになってきました（あくまで「自分なりには」ですが…）。

■次はメニューボタンを組み込みたい

実際にやってみたカスタマイズの一つで、記事のカテゴリをグローバルメニューとして、タイトル下に表示するようにしました。その紹介記事は、こちらです。

しかし、特にスマホでは画面の横幅が短いので、グローバルメニューの中に全てのカテゴリを並べることができません。

ほかのブログを見ていると、グローバルメニューではなく、タップするとカテゴリの一覧が展開表示されるメニューボタンを配置している場合があります。

筆者もそのようなメニューボタンを組み込みたいと思いましたので、例によってGoogleで検索してみると、具体的な方法を紹介しているブログが結構あるものです。

今回も、たどり着いたのはこちら、ゆきひーさんの記事です。カスタマイズの際には、いつも参考にさせていただいています。上記の記事を参考に、筆者も試してみました。

■イメージ通りになりました

そして、実際に試してみたのが下記のスクリーンショットです。イメージ通りになりました！

メニューボタンをタップすると…。	カテゴリ一覧が展開表示されます。

ちなみに、上記の画像のブログはGoogleアドセンスの審査のために作ったブログです。今はカスタマイズする際の実験用のブログとして使っています。こちらのリンクからアクセスすれば、実際の動作もご確認いただけます。

■グローバルメニューも残したい

さて、メニューボタンがあれば、グローバルメニューはいらないのでは…という話もあります。しかし、グローバルメニューを置いておくと、どんなテーマを扱っているブログなのかが見てとれるというメリットがあると思います。

特にこのブログは、雑多なことを書き連ね、ブログタイトルからも何のブログか分かりません。一方で、グローバルメニューに入りきらないカテゴリもあります。なので、グローバルメニューもメニューボタンも、両方を置いておきたいのです。

■さいごに

そんなわけで、メニューボタンの組み込み方法も分かりました。ひとまず、今回はデザイン確認・実験用のブログで試してみたところまでです。時間がある際に、このブログにも組み込んでみようと思います。

また、その上で実際に使ったサンプルコードの紹介や解説などもしてみたいと思います。