はてなブログに、グローバルメニューを設置する方法

スマホ表示でも、横に５つぐらいは余裕で表示することができます。この部分にカテゴリーを表示させたい人は、5つを選択して表示するのがSEO的にも良いかと思います。

1.コピペで貼り付けて、表示されることを確認
2.メニューをカスタマイズする

1.コピペで貼り付けて、表示されることを確認

「デザイン」-＞「カスタマイズ」-＞「ヘッダ」-＞「タイトル下」に以下のコードをそのまま貼り付けます。
保存して、表示確認してください。

<div class="menu-main-container">
<ul class="nav-menu-ex">

<li><a href="http://example.com/archive/category/trip">観光</a></li>
<li><a href="http://example.com/archive/category/food">食べ物</a></li>
<li><a href="http://example.com/archive/category/book">本</a></li>
<li><a href="http://example.com/archive/category/note">雑記</a></li>
<li><a href="http://example.com/">お問合せ</a></li>

</ul>
</div>

<style>
.nav-menu-ex{
  background-color: #000; /*背景色*/

}
.nav-menu-ex{
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%;
  -webkit-padding-start: 0px;
}
.nav-menu-ex li{
  display: table-cell;
  vertical-align: middle;
}

.nav-menu-ex li a{
  color: #fff;     /*文字色*/
  font-size: 12px; /*文字サイズ*/
  text-decoration: none;
  padding: 10px 0;
  display: block;
}

.nav-menu-ex a:hover{
  color: #111;     /*選択時の文字色*/
  background: #ddd; /*選択時の背景色*/
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
</style>

2.メニューをカスタマイズする

・メニュー文字とリンク先を自身のものに置き換える
・メニューの数を減らしたい時は、必要ない行を削除するだけ
・メニューの数を増やしたい時は、コピペで１行増やす

・メニューの背景色は、「背景色」「選択時の背景色」の行の＃部分をを変更する
・メニューの文字は、「文字色」「選択時の文字色」の行の＃部分をを変更する

・メニュー文字の大きさは、「文字サイズ」の数字を変更する