はてなブログをカスタマイズしてみる　〜第一回グローバルメニューを作る〜

<span class="menu-toggle">MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='URL'>カテゴリー1</a></li>
<li><a href='URL'>カテゴリー2</a></li>
<li><a href='URL'>カテゴリー3</a></li>
<li><a href='URL'>カテゴリー4</a></li>

</div>
</ul>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(".menu-toggle").on("click", function() {
$(this).next().slideToggle();
});
});
$(window).resize(function(){
var win = $(window).width();
var p = 768;
if(win > p){
$("#menu").show();
} else {
$("#menu").hide();
}
});
</script>

上記コードの赤文字部分のURLをリンクしたいURL、カテゴリ名をそのページ名にすることでOKです。

「え”ぇっ！カテゴリは４つまでしか作れないのかい！？」とマスオさん風に思った方もいるかと思いますが、<li>　〜　</li>をコピーして増やせばいくらでも追加できます。

ただまあ物には限度があるので増やし過ぎると見辛い上にデザインが崩れる可能性もあります。

私は一旦こんな感じにしました。

HOME（ブログトップ）と最新記事一覧とプロフィールで、一つメニューは残している状態です。

今の所お問い合わせにしようかと思っていますが、お問い合わせフォームを作成していませんのでカテゴリ名のままです。

カテゴリーを追加したコードを貼り付ける

はてなブログ管理画面でデザインをクリックします。

デザイン設定画面で左上にあるスパナマークの「カスタマイズ」をクリックし、「ヘッダ」をクリックします。

左側のメニューを少し下にスクロールすると「ブログタイトル下」という項目があるので、そこのテキストエリアにHTMLコードを貼り付けます。

「変更を保存する」ボタンをクリックすると貼り付けたHTMLが反映されて設定したメニューがブログ上に表示されます。

一度自ブログを見れば分かるのですがメニュー項目自体はきちんと追加されましたがなんとも不恰好な感じになってます。

そこで見栄えを整えるためにCSSというものを設定します。

以下コードをコピーしてメモ帳にでも貼り付けてください。

/*グローバルナビゲーション*/

#menu {

position: relative;

width: 100%;

padding-left: 0px;

height: 40px;

background: #ffa666;/*ナビ背景色*/

margin: 0;

}

.menu-inner{

width: 100%;

margin: 0 auto;

height: 40px;

}

#menu li {

list-style-type: none;

float: left;

height: 40px;

text-align: center;

width: 25%;/*カテゴリー4つなので4/100%＝25%*/

}

#menu li a {

display: block;

color: #ffffff;/*ナビ文字色*/

font-size: 80%;

font-weight: bold;

letter-spacing: 0.05em;

line-height: 40px;

text-decoration: none; /* リンクの下線をつけたくない場合 */

}

/*カーソルを合わせたときに色が変わります*/

#menu li:hover a {

color: #9bb354;

background: #ffffff;

transition: all .5s;

}

.menu-toggle{

display: none;

}

/*パソコン上のナビ幅の指定*/

@media screen and (max-width:968px){

.menu-inner{

width: 768px;

}

}

/*タブレットやスマホでの設定条件*/

@media screen and (max-width:768px){

#top-editarea{

height: initial;

background: #ffa666;/*MENU背景色*/

text-align: right;/*MENUの文字の位置*/

width: 100%;

}



.menu-toggle{

color: #ffffff;/*MENUの文字色*/

display: inline-block;

padding: 5px;

margin: 3px;

}



#menu {

width: 100%;

display: none;

height: initial;

padding: 0;

margin: 0;

}



.menu-inner{

width: 100%;

height: initial;

position: static;

margin: 0;

}



#menu li{

float: none;

height: 35px;

width: 100%;

list-style-type: none;

background: #ffa666;/*リスト文字の背景色*/

margin: 0 auto;

text-align: center;/*リストの文字の位置*/

}



#menu li a {

height: initial;

color: #fff;/*リスト文字色*/

display: block;

}



#menu li:hover a{

color: initial;

background: initial;

}

}