MENU
トップ > はてなブログ > はてなブログのヘッダーメニューを作成するためのアプローチ方法

はてなブログのヘッダーメニューを作成するためのアプローチ方法

はてなブログ

はてなブログのヘッダーメニューは基本的に自作

はてなブログにはなんとヘッダーメニューを作成する機能がないので生のhtmlをはてなブログのカスタマイズで貼り付けないといけません。

最近ではデスクトップでサイトを見る人はいなくなったのでスマホで見たときにヘッダーメニューをどうするかというなのも考えないといけません。

そもそも論↓

カテゴリーとか記事が少ないときはとくにヘッダメニューを作る必要はないかと。

このブログも記事執筆時点ではヘッダメニューをつくるほどのコンテンツ量はありませんでしたがなんだか寂しいのでとりあえず作ろうと思ってつくってみました。

はてなブログのヘッダメニューのhtml構造

カテゴリーにサブのカテゴリーのようなものがある場合はそういうのを考慮してヘッダーメニューにもサブメニューを作りたいと思うことがあります。

サブメニューを含めたヘッダーメニューの基本的なhtml構造は以下のようになると思います。

<nav class="global-nav">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li class="sub-menu">
      <a href="#">親カテゴリー</a>
      <ul class="sub-menu-list">
        <li><a href="#">子カテゴリー</a></li>
        <li><a href="#">子カテゴリー</a></li>
        <li><a href="#">子カテゴリー</a></li>
      </ul>
    </li>
    <li class="sub-menu">
      <a href="#">親カテゴリー</a>
      <ul class="sub-menu-list">
        <li><a href="#">子カテゴリー</a></li>
        <li><a href="#">子カテゴリー</a></li>
        <li><a href="#">子カテゴリー</a></li>
      </ul>
    </li>
  </ul>
</nav>

こういう感じのhtmlをカスタマイズのタイトル下に貼り付けてあとはcssやjavascriptでやりたいようにやっていきます。

サブメニューのアプローチはどうやるか

ヘッダーメニューでサブメニューがある場合はどうやって表示させるか迷うことがあります。

これには2つやりかたがあってひとつはjqueryのtoggleをつかってサブメニューを表示させる方法。

もうひとつはcssでサブメニューの透明度を0にしておき、ホバーしたらopacityを1にするというような方法。

別にどちらの方法でも構わないのですが、筆者はcssでやる方法でヘッダーメニューを作成しました。

はてなブログのヘッダメニューをスマホでみた場合どうなるのか考える

さきほどはサブメニューについて書いたんですが、実はスマホでサイトをみるときってホバーという概念がないのですよね。

筆者の場合はスマホでのサブメニュー表示に関してはあきらめました。たぶんやり方はあると思うのですが、そこまでするのも手間がかかるのでしませんでした。

あとはスマホでメニューがそのまま表示されるのは見栄えがわるいので、よく他のサイトでも解説されているのがハンバーガーメニューでメニューを隠しておいてハンバーガーをクリックしたらメニューを表示するというやつです。

結論をかくと以下のようなhtmlになります。

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<nav class="global-nav">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li class="sub-menu">
      <a href="#">親カテゴリー</a>
      <ul class="sub-menu-list">
        <li><a href="#">子カテゴリー</a></li>
        <li><a href="#">子カテゴリー</a></li>
        <li><a href="#">子カテゴリー</a></li>
      </ul>
    </li>
    <li class="sub-menu">
      <a href="#">親カテゴリー</a>
      <ul class="sub-menu-list">
        <li><a href="#">子カテゴリー</a></li>
        <li><a href="#">子カテゴリー</a></li>
        <li><a href="#">子カテゴリー</a></li>
      </ul>
    </li>
  </ul>
</nav>
<script>
$(function(){
    $(".menu-toggle").on("click", function() {
        $(this).next().slideToggle();
    });
});
</script>

雰囲気的にはあんまり煮詰めてない感じのコードになりますね。まあとりあえずそれっぽいグローバルメニューができればいいのかなと。

css

cssはめんどうなので省略しますが文章でかくと768以下のときにナビを消して。ハンバーガーメニューを表示するようにします。

このあたりもcssではなくjsを使うのもありだとは思いますが、自分のやりたい感じでやればいいと思います。

雑感

はてなブログにはそもそも論として親カテゴリー・子カテゴリーという概念がなく、カスタマイズして自分でjsで子カテゴリーのようなものを疑似的に作る方法があるのですが、現在は外部のjsファイルにアクセスできなくなり子カテゴリーというものもなくなってしまいました。

しかしながら、[親カテゴリー]-[子カテゴリー]のような感じで子カテゴリーを命名することで、まあそれっぽくはなります。

あとはカテゴリーが今後増えたときにこのグローバルメニューのhtmlをまた修正して追加しないといけなくなるのがめちゃくちゃめんどくさいですね。ほんとはグローバルメニューの生成も全部javascriptでやりたいくらいです。

しかしグローバルメニューくらいはhtmlで書いておいた方がよさそうな気もします。

あと心残りなのはスマホではホバーできないのでサブメニューが表示されないことですねー。

なんかいろいろもやもやは残りますが、最低限のグローバルメニューはできたかなと思います。