思考は現実化する

自分の潜在意識を書き換えるために、自分が学んだ事を整理しまとめています。

デザインテーマ「Brooklyn」にグローバルメニューを導入する〈はてなブログ カスタマイズ忘備録(1)〉

f:id:b204638:20170506161947j:plain

 

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

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

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

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

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

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

 カスタマイズ環境 

使用テーマ Brooklyn
 はてなブログ はてなブログPro

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

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

Brooklyn - テーマ ストア

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

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

 

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

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

 

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

shiromatakumi.hatenablog.com

shiromatakumi.hatenablog.com

 

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

(1)メニューに入れる項目の整理

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

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

メニュー1 / 「考え方・習慣
メニュー2 / 「社会
メニュー3 / 「お金のこと
メニュー4 / 「ブログ運営
メニュー5 / 「私の▼」
 ⇒サブメニュー1 / 「親子関係
 ⇒サブメニュー2 / 「何気ない日々
 ⇒サブメニュー3 / 「オーブン料理

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

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

(2)コードを修正する

先程の記事に記載されている、はてな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="http://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="http://www.thoughts-make-things.com/archive/category/%E7%A4%BE%E4%BC%9A">社会</a>
<li><a href="http://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="http://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="http://www.thoughts-make-things.com/archive/category/%E8%A6%AA%E5%AD%90%E9%96%A2%E4%BF%82">親子関係</a></li>
<li><a href="http://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="http://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>

 赤字の部分が修正箇所です。

メニュー5の「私の▼」の部分はリンク先がないため、リンクの記述を削除しました。(<a>私の▼</a>の部分)

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

(3)コードを貼り付ける

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

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

(4)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」のグローバルメニュー導入は完了です。

 

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

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

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

 

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

f:id:b204638:20170506182914p:plain

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

f:id:b204638:20170506182928p:plain

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

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

※2017/5/7追記

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

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

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

の部分を 

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

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

  


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

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

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

 

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

*1:ブルックリン橋(Brooklyn Bridge)は、アメリカ合衆国ニューヨーク市のイースト川をまたぎ、マンハッタンとブルックリンを結ぶ橋