【はてなブログ】5分で出来るメニューバーの設置方法【無料版でも可能】

色々なブログを見ていると、記事の上にメニューバーのようなものがありますよね。

サイト内の各カテゴリなどに飛べるリンクが貼ってあり、グローバルメニューと呼ばれます。私もそれを作ってみたい！と思ったので、やってみました。

ちなみに、はてなブログの無料版でも可能です。これを見れば、私と同じメニューが5分で作成できますよ。

１．グローバルメニューとは
２．グローバルメニュー（メニューバー）を作成してみよう！
３．HTML
４．CSS
５．カラーコードで色を決めよう
６．レスポンシブデザインはできる？

１．グローバルメニューとは

そもそもグローバルメニューって何なの？ということで、調べてみました。

グローバルメニューは対象となるWebサイトの主要コンテンツへのリンクが収集されている目次であり、Webサイト内へのショートカット機能を持つのが特徴です。

グローバルメニューとは（説明/解説） - イケサイWeb制作用語辞典

やはり、サイト内のリンク集のようですね！

グローバルメニューがあると、SEO対策になる場合もあるようです。

２．グローバルメニュー（メニューバー）を作成してみよう！

今回参考にさせていただいたのは、こちらのブログです。

こちらを利用して、私はこのようなメニューバーを作成しました。

「海外旅行」の部分は、カーソルを上に置いているときの表示となっています。

３．HTML

下のHTMLコードを管理画面から「デザイン設定」→「ヘッダ」→「タイトル下」に貼り付けます。

コード貼り付け方法は色々ありますが、面倒なのでそのまま・・・スミマセン。

私は5つのメニューを設置しました。数によって、<li>の行を増やしたり減らしたりします。

また、urlの部分には、それぞれのリンク先のURLを貼り付けてください。

４．CSS

下のCSSコードを管理画面から「デザイン設定」→「デザインCSS」に貼り付けます。

テンプレートを指定している場合や、ブログの背景色を設定している場合は、それらのCSSが既に貼り付けられています。誤って消さないように、注意してください。

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

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

.menu-bar{
display: none;
}

各色や、メニューの数は個人で指定してください。

私はメニュー数を5つとしたので、メニュー1つあたりの幅は20%となります。

５．カラーコードで色を決めよう

各部分の色を決めるのに、下記のサイトを参考にしました。

カーソルを置くと背景色がその色に変わるようになっており、どんな雰囲気か分かりやすいです。

私が使用した色はこちら。

メニュー背景色・・・#DDDDDD（薄いグレー）
メニュー文字色・・・#ffffff（白）
カーソルが乗った時の背景色・・・#ffffff（白）
カーソルが乗った時の文字色・・・#FFB6C1（ピンク）

６．レスポンシブデザインはできる？

今のところ、無料版でレスポンシブデザインにはしない方が良いです。無料版では、もともと上部にはてなブログのバーが設置されているため、被ってしまって上手く反応しません。

Pro版の場合は、下記のゆきひーさんのブログを参考にやってみてください。

はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズ - Yukihy Life

私ももっとカスタマイズできるように頑張ります～。

ちくわブログ

15歳年上の彼と遠距離から結婚。旅行大好きブログ。