はてなブログにヘッダーメニューを設置してみた

ブログとプロブロガー本

ブログのヘッダー下に横並びのメニューバーを設置しました。

ヘッダーメニューとかグローバルメニューとか呼ばれていますが
どれが正しいんでしょうね?

メニューの項目として
先ずはTopページへ戻れるようにHOMEを置きます。

そのブログで主となるカテゴリやよく読まれている記事カテゴリ、
プロフィール、SNSなどを入れておくといいですね。
もうちょっと寄り道してもらえるように・・・

ネットで「ヘッダーメニュー」と検索してみると、
いろんなタイプのメニューが見つかります。

縦並び・横並びタイプの他に
ポインタを乗せるとサブメニューが開くなどの凝ったのもありますが、
ここではテーマとの相性も考えて
あまり目立ちすぎないシンプルなものを選びました。

 

私が参考にさせていただいたサイトがこちら

www.tagindex.com

 「横並びメニュー均等幅3」というのをお借りして
好みでちょっと手を加えました。

HTMLとCSSをコピペし、
背景画像もダウンロードしておきます。

   

HTML

HTMLではメニュー項目の飛び先のURLを指定します。

一旦、メモ帳やテキストエディタなどにコピペしてから
内容を記入した方が見やすいです。

 

下ののところにURLを記入、
メニュー項目には「Home」など表示したいテキストを入れます。

この場合メニュー項目が5つですが、もっと増やしたいときは
CSSの /* --- メニュー項目 --- */  内にあるwidth: 20%; /* 項目の幅 */ 
の%値を減らし、HTMLの<li>~</li>を増します。
(あんまり多すぎるのも変ですけど)

 <div class="nav">
<ul class="nl clearFix">
<li><a href="http://around60.hatenablog.com/">HOME</a></li>←例として
<li><a href="#">メニュー項目2</a></li>
<li><a href="#">メニュー項目3</a></li>
<li><a href="#">メニュー項目4</a></li>
<li><a href="#">メニュー項目5</a></li>
</ul>
</div>

逆に、今のところメニューは3つしか使わない。なんて場合は
上のHTMLで減らしたい部分を<!----> で囲んでおくといいです。

【例】<!-- <li><a href="#">メニュー項目</a></li> -->

 

記入し終わったらHTMLを設置します。

はてなブログでの設置する場所は
デザイン>カスタマイズのタブ>ヘッダ>タイトル下のボックス中に
貼り付けます。

CSS

はてなブログでのCSSの設置場所は
デザイン>カスタマイズのタブ>デザインcss(一番下)のボックスの中に
貼り付けます。

◆変更してみたところ(このブログのヘッダーメニューの場合)

  1. メニュー全体の幅はフリーに(画面いっぱいになる)
  2. メニューの高さを低くした
  3. メニューの配置を中央寄りから左寄りにした
  4. ヘッダー画像との境界線を消した
  5. メニューの下の枠線を消した
  6. リンクエリアの下線は消した
  7. テキストをポイントした時現れる下線を消した

【図解】

/* --- ナビゲーションバー --- */
div.nav {
width: 100%; /* ナビゲーションの幅 */
background: #f9f9f9 url(hor_menu3_off.gif 画像のURL) repeat-x top; /* ナビゲーションの背景 */
border-top: 1px #cccccc solid; /* 上境界線 */  (削除)←4.ヘッダー画像との境界線を消した
border-bottom: 1px #cccccc solid; /* 下境界線 */ (削除)←5.メニューの下の枠線を消した
font-size: 80%;
}

/* --- メニューエリア --- */
div.nav ul.nl {
width: 600px  auto; /* メニューの幅 */  ←1.メニュー全体の幅はフリーに
margin: 0 auto; /* センターに配置 */(削除)←3.メニューの配置を中央寄りから左寄りにした
padding: 0; (削除)
background: #f9f9f9 url(hor_menu3_off.gif 画像のURL) repeat-x top; /* メニューの背景 */
border-left: 1px #cccccc solid; /* メニューの左境界線 */
border-right: 1px #ffffff solid; /* メニューの右境界線 */
list-style-type: none;
text-align: center;
}

/* --- メニュー項目 --- */
div.nav ul.nl li {
width: 20%; /* 項目の幅 */(メニュー項目が5つあるので1つの幅が20%→変更可)
float: left;
}

/* --- リンク --- */
div.nav ul.nl li a {
display: block;
position: relative; /* IE6用 */
padding: 11px 2px  4px 0px; /* リンクエリアのパディング(上下、左右) */ ←2.メニューの高さを変更
border-top: 1px #ffffff solid; /* リンクエリアの上境界線 */
border-bottom: 1px #808080 solid; /* リンクエリアの下境界線 */(削除)←6.リンクエリアの下線を消す
border-left: 1px #ffffff solid; /* リンクエリアの左境界線 */
border-right: 1px #cccccc solid; /* リンクエリアの右境界線 */
text-decoration: none; /* テキストの下線(なし) */
}
/* --- ポイント時の設定 --- */
div.nav ul.nl li a:hover {
background: #f9f9f9 url(hor_menu3_on.gif 画像のURL) repeat-x top; /* ポイント時の背景 */
text-decoration: underline none; /* テキストの下線(あり なし) */←7.ポイント時に出るテキストの下線を消す
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

 

画像の指定の仕方

このメニューは背景画像が使われていますので
画像をダウンロードする必要があります。

はてなブログの場合、ダウンロードした画像は
はてなフォトライフにアップロードしておきます。

CSSの背景画像の指定には
フォトライフに保存した「画像のURL」を記入します。

画像へのURLはフォトライフにある画像の上で右クリック、
「画像のURLをコピー」を選んでクリック、
上記のCSSの「画像のURL」の部分に貼り付けます。

[画像のURLの例] 
 http://f.st-hatena.com/images/fotolife/****.jpg

 

このブログが使用しているテーマ

はてなブログでは、
使用しているテーマによって
この通り設置できないものもあるようです。

ちなみに、
このブログは「Blank」というテーマを使用しています。
                   (2015.6/20現在)

  Blank - テーマ ストア - はてなブログ


シンプルで、カスタマイズ性もあっていいかんじです。
上記「Blank」のテーマストアのページでも
カスタマイズ方法などが紹介されています。

 

ブログの記事がある程度増えてくると
Home の他に読んで欲しいカテゴリやページなど、
メニューに加えて読んでもらいやすくするといいですね。

にほんブログ村 その他日記ブログ 日々の気になることへ

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書