覚え書き：グローバルメニューバーを設置しました。

Hatena Blogを始め、分からないことだらけで、

ネットを検索し、

いろいろ調べて体裁を整える作業を続けています。

メニューバーを付けたい

メニューバーが欲しくて、検索した結果、

この方の記事を参考に、設置できました。

kimchikuwa.hatenablog.com

説明が分かりやすく、

懇切丁寧で、

簡単に設置できました。

ありがとうございました。

背景色を少しだけ濃く変えてみました。

メニューバーの数は、そのまま５つ　７つにしました。

増やすか減らすか、題名などは変えるかもしれません。

貼り付けたHTML

管理画面→デザイン設定→ヘッダ→ブログタイトル下
url には、それぞれのリンク先のURLを貼り付ける。

<span class="menu-bar"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<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>
<li><a href='url4'>Ｘ（twitter）</a></li>
</div>
</ul>

貼り付けたCSS

管理画面→「デザイン設定」→「デザインcss 」

#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: #919090;/*メニュー背景色*/
}

#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: center;
width:14%;/*メニューの数が７つなので、ひとつ14%とする*/
}
#menu li a {
display: block;
color: #ffffff;/*メニュー文字色*/
font-size: 120%;
font-weight: bold;/*メニュー文字太さ*/
line-height: 40px;
}
#menu li:hover a {/*カーソルが乗った時の動作*/
color: #FFB6C1;/*メニュー文字色*/
background: #ffffff;/*メニュー背景色*/
transition: all .5s;
}