読者です 読者をやめる 読者になる 読者になる

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

ブログとプロブロガー本

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

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

メニューの項目として
先ずは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デザインの教科書