デザインテーマ「Brooklyn」にグローバルメニューを導入する【はてなブログ カスタマイズ忘備録（１）】

 みなさん、ブログのカスタマイズしていますか？

はてなブログをはじめて３か月。私も、これまで様々なカスタマイズを施してきました。

いろいろ考え、その都度試行錯誤しながら少しず導入してきたカスタマイズも、いつの間にか種類が増え、最近では、どのコードがどのカスタマイズのものなのか分からなくなってきました。

また、つい先日は、コードの記載ミスがありブログが上手く表示されていないことがあり、一旦、コードを削除し、１つ１つ確認しながら改めてコードを導入し直す、ということもありました。

そこで、自分のブログのカスタマイズの忘備録として、導入したカスタマイズについて１つずつ整理してみることにしました。

はじめはカスタマイズの基本となるデザインテーマ「Brooklyn」へのグローバルメニュー導入についてまとめてみます。

 カスタマイズ環境

使用するテーマは、テーマストア人気１位（2017年5月現在）、シロマティ (id:shiromatakumi)さんが作成されたデザインテーマ「Brooklyn」です。

はてなブログをはじめた後しばらくの間、様々なテーマを使っていたのですが、黒と白を基調としたシンプルなデザインに惹かれ「Brooklyn」（ブルックリン）を使用しています。

Brooklyn – テーマ ストア

※ちなみに今回のトップ画像は「ブルックリン橋*1」です。

はてなブログはProにしていますが「Brooklyn」はProにしなくてもグローバルメニューを導入することが可能です。

 デザインテーマ「Brooklyn」にグローバルメニューを導入する

実は、グローバルメニューを導入したのは、つい最近です。（というのも、はじめはメニューができる程、記事がなかったので。）

「Brooklyn」へのグローバルメニュー導入については、作者シロマティさんの以下のサイトを参考にさせていただきました。

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました – NO TITLE

Brooklynのグローバルナビをドロップダウンにする方法 – NO TITLE

ここからは、私が行った導入手順を順番に整理してみます。

（１）メニューに入れる項目の整理

「Brooklyn」ではグローバルメニューには５つまでの項目を入れられるとのことでしたので、はじめにグローバルメニューに入れる５つの項目を決めることにしました。

なお、ドロップダウンメニューを使用すればサブメニューに項目を追加することができるので、それらを踏まえ以下の項目を表示することにしました。

メニュー１　／　「考え方・習慣」
メニュー２　／　「社会」
メニュー３　／　「お金のこと」
メニュー４　／　「ブログ運営」
メニュー５　／　「私の▼」
⇒サブメニュー１　／　「親子関係」
⇒サブメニュー２　／　「何気ない日々」
⇒サブメニュー３　／　「オーブン料理」

メニュー１はトップページへのリンク「ホーム」にしようかどうか悩みましたが、とりあえず「カテゴリー」の項目を優先することにしました。

メニュー５は「私の▼」という表記にし３つのドロップダウンで３つのサブメニューを標示することにしました。

（２）コードを修正する

先程の記事に記載されている、はてなPro向けグローバルナビ（ドロップダウン対応）のコードを、整理したメニューの内容に合わせて修正します。

私の場合は、次のようなコードになりました。

<!-- グローバルナビ -->
<div id="trigger-point">
</div>
<div id="global-menu">
<div id="mobile-head">
<div id="nav-toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<ul class="global-menu-list sub-list">
<li><a href="https://www.thoughts-make-things.com/archive/category/%E8%80%83%E3%81%88%E6%96%B9%E3%83%BB%E7%BF%92%E6%85%A3">考え方・習慣</a>
<li><a href="https://www.thoughts-make-things.com/archive/category/%E7%A4%BE%E4%BC%9A">社会</a>
<li><a href="https://www.thoughts-make-things.com/archive/category/%E3%81%8A%E9%87%91%E3%81%AE%E3%81%93%E3%81%A8">お金のこと</a></li>
<li><a href="https://www.thoughts-make-things.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E9%81%8B%E5%96%B6">ブログ運営</a></li>
<li><a>私の▼</a>
<ul class="sub-item">
<li><a href="https://www.thoughts-make-things.com/archive/category/%E8%A6%AA%E5%AD%90%E9%96%A2%E4%BF%82">親子関係</a></li>
<li><a href="https://www.thoughts-make-things.com/archive/category/%E4%BD%95%E6%B0%97%E3%81%AA%E3%81%84%E6%97%A5%E3%80%85">何気ない日々</a></li>
<li><a href="https://www.thoughts-make-things.com/archive/category/%E3%82%AA%E3%83%BC%E3%83%96%E3%83%B3%E6%96%99%E7%90%86">オーブン料理</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function (){
// 変数に代入
var $nav = $('#global-menu');
var $content = $('#content');
var $offsetTop = $('#trigger-point').offset().top;
// 固定メニューの設定
function fixedNav() {
if($(window).scrollTop() > $offsetTop){
$nav.addClass('fixed');
} else {
$nav.removeClass('fixed');
}
};
$(window).scroll(fixedNav);
$('body').on('touchmove', fixedNav);
// Toggle メニューの設定
$('#nav-toggle').click(function (){
$nav.toggleClass('open');
});
$('#content').click(function (){
if($nav.hasClass('open')){
$nav.removeClass('open');
}
})
});
</script>

赤字の部分が自分のホームページのURLに書き換えた箇所です。

メニュー５の「私の▼」の部分はリンク先がないため、リンクの記述を削除しました。

<li><a>私の▼</a>

また、 元のコードではサブメニューの設定はメニュー１～メニュー３になっていましたが、今回はメニュー５にサブメニューを入れるように変更しました。

（３）コードを貼り付ける

修正したグローバルメニューのコードを以下に貼り付けます。

ダッシュボードの「 デザイン」＞「カスタマイズ」＞「ヘッダ」＞「タイトル下」

（４）WEBフォント「open sans」のコードを貼り付ける。

WEBフォント「open sans」を使うためのコードのようです。このコードは貼らなくても機能的には問題ありませんが、作者様おススメでデザイン的に良さそうなので一緒に導入してみることにしました。

<!-- WEBフォント「open sans」 -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,800' rel='stylesheet' type='text/css'>

このコードを以下に貼り付けます。

ダッシュボードの「 デザイン」＞「設定」＞「詳細設定」＞「headに要素を追加」

以上で「Brooklyn」のグローバルメニュー導入は完了です。

１つだけうまくいかなかったこと

導入後、１点だけ上手く行かなかったことがあります。

それは、レスポンシブ時のスマートフォンでのサブメニューの表示です。

スマートフォンでグローバルメニューは表示できるのですが・・・

サブメニューをタップしても色が変わるだけで、ドロップダウンのサブメニューを表示することができませんでした。

「サブメニューの位置を変えたからかも」と考え、サブメニューをメニュー１～３に移動してみましたが、それでも上手く表示することはできませんでした。

ただ、私の場合はレスポンシブにはせず、スマホは別のカスタマイズを導入するために、一旦、気にしないことにしました。

※2017/5/7追記

「サブメニューの一覧ページ」を新たに作成し、グローバルメニューの「私の▼」の部分にリンクをつけることにしました。

具体的には「グローバルナビ」コードの

<li><a>私の▼</a>

の部分を

 <li><a href="https://www.thoughts-make-things.com/entry/sub-menu">私の▼</a>

に変更。こうすることで簡易的にサブメニューのカテゴリーへ誘導するようにしてみました。

---

デザインテーマ「Brooklyn」へのグローバルメニュー導入は以上です。

少しつまったのは、サブメニューを設定したリンクのないグローバルメニュー項目の設定方法でした。

（タグ内のリンクのコードを削除するだけでしたが、分かるまでは「Not Found」のページが表示され悩みました。）

次回は、はてなブログのスマホ画面に「複合メニューバー」を導入する方法についてまとめてみます。