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

はてな(無料版でもできる)ブログにヘッダーメニューをつける解説

ブログ運営
スポンサーリンク

はてなブログ無料版でもできる、ナビゲーション(ヘッダーメニュー)のつけかたです。
今回、わかやすい場所に「お問い合わせ」、「プロフィール」などをつけたかったのでやってみました。 

f:id:rororororo:20160104141057p:plain

 

ヘッダーメニューをどのようにつけたのか?

こちらを参考にしました。こちらの記事で紹介されているのはメニューのテンプレサイトで、現在は有料とかいてあります。

ground-sesame.hatenablog.jp 

が…

カスタマイズしなければテンプレートはダウンロードできるみたいです。

色や文字などを、自分でカスタマイズすればテンプレートは今でも無料です。(サイト上でカスタマイズするのにはお金がかかります) 

というわけで設置してみました。

カスタマイズをしないで、メニューをそのままダウンロード。

開いたHTMLを少しだけ編集して、使用しています。

かかった時間は5分くらいです。 

うちで使っているcssはこちら&設置方法の解説をします。

というわけで、メニューを追加してみましょう!

このサイトのデータなのでリンク先などは変更してくださいね。

 

まずはメニューを追加します。(装飾はあとです)

 

▼HTMLの追加場所はこちら。

(はてなブログ→デザイン設定→カスタマイズ→ヘッダ→タイトル下)にこれを追加

f:id:rororororo:20160104122315p:plain 

▼「タイトル下」にいれるHTMLはこちら


<div id=\'cssmenu\'>
<ul>
 <li class=\'active\'><a href=\'http://blog.hatena.ne.jp/\'><span>ホーム</span></a></li>
 <li class=\'active\'><a href=\'http://blog.hatena.ne.jp/\'><span>ホーム</span></a></li>

 <li class=\'last\'><a href=\'https://docs.google.com/forms/d/1WXhTrDTDRzqH0arC_KC1BGWSOyQfeFx5Ha1gmG98tC0/viewform?usp=send_form\'><span>お問い合わせ</span></a></li>
</ul>
</div> 

さあ、どうでしょう?

できましたか?

 

※これはうちの サイトのソースなので、ご使用の場合はhttpから始まるリンク先を修正してください。

※下記を追加すると、もっとメニュー増やせます。

<li><a href=\'リンク先\'><span>メニューに表示させたい文字</span></a></li>

 

あとは、CSSで装飾して完成です!

 

あと少し!

 

▼CSSの追加場所

(はてなブログ→デザイン設定→カスタマイズ→デザインCSS)にこれを追加

 

f:id:rororororo:20160104123120p:plain

▼「デザインCSS」にいれるCSSはこちら


@import url(http://fonts.googleapis.com/css?family=Open+Sans:700); #cssmenu { background: #aaa; width: auto; margin-bottom: 0px ; } #cssmenu ul { list-style: none; margin: 0; padding: 0; line-height: 1; display: block; zoom: 1; } #cssmenu ul:after { content: \\&quot; \\&quot;; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } #cssmenu ul li { display: inline-block; padding: 0; margin: 0; } #cssmenu.align-right ul li { float: right; } #cssmenu.align-center ul { text-align: center; } #cssmenu ul li a { color: #ffffff; text-decoration: none; display: block; padding: 15px 25px; font-family: \\\'Open Sans\\\', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 14px; position: relative; -webkit-transition: color .25s; -moz-transition: color .25s; -ms-transition: color .25s; -o-transition: color .25s; transition: color .25s; } #cssmenu ul li a:hover { color: #333333; } #cssmenu ul li a:hover:before { width: 100%; } #cssmenu ul li a:after { content: \\&quot;\\&quot;; display: block; position: absolute; right: -3px; top: 19px; height: 6px; width: 6px; background: #ffffff; opacity: .5; } #cssmenu ul li a:before { content: \\&quot;\\&quot;; display: block; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #333333; -webkit-transition: width .25s; -moz-transition: width .25s; -ms-transition: width .25s; -o-transition: width .25s; transition: width .25s; } #cssmenu ul li.last &gt; a:after, #cssmenu ul li:last-child &gt; a:after { display: none; } #cssmenu ul li.active a { color: #333333; } #cssmenu ul li.active a:before { width: 100%; } #cssmenu.align-right li.last &gt; a:after, #cssmenu.align-right li:last-child &gt; a:after { display: block; } #cssmenu.align-right li:first-child a:after { display: none; } @media screen and (max-width: 768px) { #cssmenu ul li { float: none; display: block; } #cssmenu ul li a { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #999; } #cssmenu ul li.last &gt; a, #cssmenu ul li:last-child &gt; a { border: 0; } #cssmenu ul li a:after { display: none; } #cssmenu ul li a:before { display: none; }
#cssmenu {
  background: #000;
  width: auto;
  margin-bottom: 20px ;
}
}


いかがだったでしょう?

ちなみに、ヘッダーメニュー下の隙間を調整するには  margin-bottom: 20px ;の部分の数字を変えればOKです。

ヘッダーの色は、  background: #000;の#000部分です。こちらで好きな色を選んでください。(#000は黒です)


#cssmenu {
  background: #000;
  width: auto;
  margin-bottom: 20px ;
}


最後に:ヘッダーメニューがあるとこんなに便利だよ

webサイトを作るとき、入り口はわかりやすい範囲でたくさんあると有効です。気づいてもらいたいことは、わかりやすく色んなやりかたで表現すると、読者に気づいてもらえる確率はあがります。
今回のヘッダーにプロフィールや、最初に見てもらいたい記事を書くのもそうだし、応用編であれば、記事下におすすめ記事をいれるとかね。

というわけで、はてなブログのヘッダーメニューの入れ方でした