上部にカテゴリーのリンクを含んだグローバルメニューを追加（はてなブログ改造計画）

ページの上部にグローバルメニューを追加する方法です。別の記事で実施方法を書きましたが、当ブログはカテゴリーを3段まで使っています。グローバルメニューでは2段まで表示させています。

カテゴリーの記事はこちらでした。

multimineral-tech.com

こちらを使いました
変更内容
変更方法
あとがき

こちらを使いました

こちらを利用させていただきました。

times-diary.hatenablog.com

この内容をカスタマイズした内容を掲載されているこちらも参考になりました。

www.haurin-zatunenlife.com

これらをベースに少しカスタマイズしています。

変更内容

ページの上部にグローバルメニューを追加しました。

こんな風に動きます。

階層がある場合はマウスカーソルを乗せると下位の階層が表示されます。

モバイルのような横幅の狭い端末ではメニューボタンに変わります。

メニューボタンをクリック（タップ？）すると、メニューが表示されます。

変更方法

HTML, JavaScript の変更手順

管理画面から以下のようにたどります。

デザイン＞レンチマーク＞サイドバー＞ヘッダ

ここに次項にある「追加 HTML, JavaScript」の内容を追記します。

追加 HTML, JavaScript

追記する HTML, JavaScript コードは先に紹介したこちらの記事を参照ください。（ほぼそのまま利用させていただきましたので、当該記事にて全ソースを掲載するのは控えておきます。）

当ブログではこの内容を更に編集しています。変更した点をピックアップします。

jQuery の読み込みを削除（他で読み込んでるから...）

jQuery の読み込みを削除しました。

<!-- 前略 -->
<div style="clear:both"></div>

<!-- ↓↓↓ここ↓↓↓ -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- ↑↑↑ここ↑↑↑ -->
<script>
$(function(){
  // 後略

私の場合は、ですが、既に jQuery の別バージョンを読み込んでいるのでゴッチャゴッチャにならぬよう削除しました。

あと、使う場合でも HTTPS にした方が良い（ http://... を https://... に書き換えるのが良い）と思います。（元サイトさんが記事を作成した当時から世の中変わりましたからね。）

スクリプトを書き換える

スクリプトを書き換えました。以下は書き換え後です。ポイントは3つです。

  document.addEventListener('DOMContentLoaded', function () { // (1)
    var menuBtn = $('#menu-btn');
    var menuContent = $('#menu-content');
    menuBtn.click(function () {
      menuContent.slideToggle();
    });
    $(window).resize(function () {
      var win = window.innerWidth; // (2)
      var p = 768; // (3)
      if (win > p) {
        menuContent.show();
      } else {
        menuContent.hide();
      }
    });
  });

Ready 関数を脱 jQuery
横幅の取得関数を innerWidth に変更
ブレークポイント（表示を切り替える横幅）を変更

順番に行きます。

(1) Ready 関数を脱 jQuery

$(function(){ を Ready 関数と呼んだりします。（画面読み込み後すぐに動く機能を書きます。）これを document.addEventListener('DOMContentLoaded', function () { に変更しています。後者が jQuery を使わない書き方になります。

この Ready 関数の動きのみがどうも調子良くありませんでした。画面初期描画時にはうまく jQuery を読み込めた状態になっていないのでしょう。（理由は不明だし、調べてすぐ諦めました。私の作った処理じゃないですし、他にもパーツが複数ありますし、紐解く意義もないでしょう。）なので、一旦ココだけ脱 jQuery をしています。

(2) 横幅の取得関数を innerWidth に変更

$(window).width() を window.innerWidth に変更しています。

これは画面の横幅のサイズを取得する関数（後者はプロパティ）です。前者はスクロールバーの幅を含みません。すると、 CSS で指定する幅とズレるんですね。これを避けるための変更になります。

(3) ブレークポイント（表示を切り替える横幅）を変更

うちのブログではちょうど 768px でサイドバーが表示されなくなります。このタイミングに合わせました。それだけですね。。。

CSS の変更手順

管理画面から以下のようにたどります。

デザイン＞レンチマーク＞デザインCSS

ここに次項にある「追加 CSS」の内容を追記します。

追加 CSS

追記する CSS コードは（HTML, JavaScript の時と同様に）先に紹介したこちらの記事を参照ください。そして、こちらも先に紹介した、追加変更について記載されたの記事を参照ください。（ほぼそのまま利用させていただきましたので、当該記事にて全ソースを掲載するのは控えておきます。）

当ブログではこの2つの記事の内容から更に編集しています。変更した点をピックアップします。

横幅を固定サイズにして中央揃え

元のデザインは「横幅いっぱいを分割して、各リンクに横幅を均等に割り当てよう」という考え方でした。

それを、(1)リンクの幅は固定幅にして、(2)全体を中央揃えにするよう変更しました。

#menu-content {
  padding-left: 0;
  margin: 0 auto; /* (2)ここ */
  width: 600px; /* (1)ここ */
  height: 100%;
  list-style-type: none;
}
#menu-content > li {
  position: relative;
  float: left;
  height: 100%;
  text-align: center;
  width: 200px; /* (1)ここ */
}

リンクの幅を 200px にしました。3つのリンクがあるので合わせて 600px です。んで、それを中央揃えするのに margin: 0 auto; としています。（ margin: 0 auto; で中央揃えになる理由は長くなるのでここでは説明を省きます。）

その他デザインの変更

あとはこのブログに合わせてデザインの変更をしています。

色の変更（背景色、文字色）
文字サイズの変更
ブレークポイントを 768px に変更（ @media screen and (max-width: 768px) の部分です）

くらいですね。

あとがき

カテゴリーは3階層にしているので、グローバルメニューも3階層にしたいな、とは思ってます。ちょっとうるさい感じはするかもですけどね。

Multi Vitamin & Mineral

Multi Vitamin & Mineral です。プログラムに関することを書いております。