はてなブログテーマ「Color Book」にグローバルナビを設置する方法を解説していきます。
できあがりはこんな感じです↓
- jQueryを読み込む。
- HTML、jQueryをコピペ。
- メニュー名とリンク先を変更。
- メニューの数を増やしたり減らしたりするには。
- グローバルナビの色を変えるには。
- グローバルナビの文字の大きさを変えるには。
jQueryを読み込む。
まずjQueryを読み込みます。
（すでに読み込んでいる人は、ここは飛ばしてください。）
ダッシュボードの「設定」→「詳細設定」→「head要素にメタデータを追加」
ここに下のコードをコピペしてください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
→下の方の「変更する」を忘れずに。
HTML、jQueryをコピペ。
次にHTML、jQueryをコピペします。
「デザイン」→「カスタマイズ」→「ヘッダ」→「ブログタイトル下」
ここに下のコードをコピペしてください。
<div id="colorbook-gnav">
<div id="menu-btn">
<i class="blogicon-reorder"></i> メニュー
</div>
<ul id="colorbook-gnav-list">
<li><a href="リンク先URL">メニュー１</a></li>
<li><a href="リンク先URL">メニュー２</a></li>
<li><a href="リンク先URL">メニュー３</a></li>
<li><a href="リンク先URL">メニュー４</a></li>
<li><a href="リンク先URL">メニュー５</a></li>
<li><a href="リンク先URL">メニュー６</a></li>
</ul>
</div>
<script>
$(function(){
$("#menu-btn").click(function(){
$("#colorbook-gnav-list").slideToggle();
});
});
</script>
→上の方の「変更を保存する」。
これだけでOKです。
グローバルナビがきれいに表示されているはずです。
CSSはテーマに書き込んであるので必要ありません。
メニュー名とリンク先を変更。
メニュー名とリンク先を変更していきましょう。
メニュー名を変えるには、コードの中の「メニュー1」～「メニュー６」の部分を好きな文字に変えて下さい。
リンク先を変更するには、「リンク先URL」の部分をリンクさせたい本当のURL（https://で始まるやつ）に変えて下さい。
メニューの数を増やしたり減らしたりするには。
メニューの数を増やしたり減らしたりするには、
コードの<li>～</li>の部分を増やしたり減らしたりしてください。
なお、メニュー数が多かったりメニュー名が長かったりして横幅をオーバーした場合は、グローバルナビが二段になります。
グローバルナビの色を変えるには。
グローバルナビの背景色を変えるには、
下のコードを「デザインCSS」にコピペして、カラーコード（#からはじまるやつ）を好きなものに変えて下さい。
カラーコード参照↓
#colorbook-gnav{
background:カラーコード;/*グローバルナビの背景色*/
border-top:none;
}
グローバルナビの文字色を変えるには、
下のコードを「デザインCSS」にコピペして、カラーコードを好きなものに変え下さい。
#colorbook-gnav a{
color:カラーコード;/*グローバルナビの文字色*/
}
グローバルナビにマウスを乗せた時の背景色・文字色を変えるには、
下のコードを「デザインCSS」にコピペして、カラーコードを好きなものに変えてください。
なお、どちらかでいい場合は、いらない方の行を削除してください。
#colorbook-gnav a:hover{
background:カラーコード;/*マウスを乗せた時の背景色*/
color:カラーコード;/*マウスを乗せた時の文字色*/
}
スマホ画面の「メニュー」ボタンの文字色を変えるには、
下のコードを「デザインCSS」にコピペして、カラーコードを好きなものに変えて下さい。
#menu-btn{
color:カラーコード;/*スマホ画面の、「メニュー」ボタンの文字色*/
}
グローバルナビの文字の大きさを変えるには。
グローバルナビの文字の大きさを変えるには、
下のコードを「デザインCSS」にコピペして、14pxのところを15pxとか13pxとか好きな大きさに変えて下さい。
#colorbook-gnav a{
font-size:14px;/*文字の大きさ*/
}
以上です。
スマホ・タブレット画面でグローバルナビを固定させたい場合はこちらをご覧ください↓
