やっほー。
今日、ボクのブログが瀕死になってたけど、気を取り直して、メニューバーの付け方の記事書くよ～。
これね、付け方しばらく調べて、やっと見つけたんだけど、出来るだけ分かり易く載せるね～。
まず、デザイン→スパナ→ヘッダ→ブログタイトル下のやつ！（日本語のとこは書き換えてね）
<span class="menu-bar"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href=https://メニュー１のリンク>メニュー名</a></li>
<li><a href=https://メニュー２のリンク>メニュー名</a></li>
<li><a href=https://メニュー３のリンク>メニュー名</a></li>
<li><a href=https://メニュー４のリンク>メニュー名</a></li>
<li><a href=https://メニュー５のリンク>メニュー名</a></li>
</div>
</ul>
で、これをCSSに。（日本語のとこは(ry）
#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: #メニューの背景のカラーコード;
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: center;
width:20%;
}
#menu li a {
display: block;
color: #メニューの文字のカラーコード;
font-size: 80%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #カーソルを載せた時のメニューの文字のカラーコード;
background: #〃メニューの背景のカラーコード;
transition: all .5s;
}
.menu-bar{
display: none;
}
英語の文字はいじらなくてもいいかな。
補足として、メニューを増やしたいor減らしたいときは、ヘッダの<li>から始まるやつを増やしたor減らした後、width:20%;を25とか17とかに変えてね。
あと、カラーコードんとこでグラデーション使うときは…
linear-gradient(○○deg, #いっこめ △△%, #にこめ △△%);
ってして、＃の後にはカラーコードを入れるんだけど、○○はいじるとグラデーションの角度が変わって、△△はグラデーションのはっきり度(?)が変わる（輪郭がはっきりしたり、滑らかになったりする）から、少しずつ数値を変えながらやってみてね。
ちなみにボクは、 "linear-gradient(160deg, #d6e9ca 0%, #d8e698 100%);" みたいにしてるよ。
もしうまくいかなかったら、ダメ元でチャットで教えてね。
ついでにどうでもいい事書くけど、後で文字色黒に戻すかも。色が付かない。超致命的。
じゃ、ばいばーい。
