最近本ブログにナビゲーションバー（メニューバー？）を設置しました。




本ブログはBloggerブログで作成していますが、Bloggerではナビゲーションバーが簡単に設置可能ですので方法を紹介します。

■ナビゲーションバー（メニューバー）設置方法

レイアウト画面からヘッダ部分の[ガジェットを追加]をクリック。

ヘッダ部分が既にいっぱいでガジェット追加できないよ、という人はこちらを試して下さい。



ガジェットの選択画面で、[HTML/JavaScript]をクリック。


ナビゲーションバーのHTMLコードをコンテンツに追加し、[保存]をクリック。

なお、ナビゲーションバーのコンテンツコード例は以下の様になります。


<div id="menu">
<ul>
<li><a href="http://gadget.knaka00.com/search/label/T100TA" target="_blank">T100TA</a></li>
<li><a href="http://gadget.knaka00.com/search/label/Miix2%208" target="_blank">Miix 2 8</a></li>
<li><a href="http://gadget.knaka00.com/search/label/%E7%AF%80%E7%B4%84%E8%A1%93" target="_blank">節約術</a></li>
<li><a href="http://gadget.knaka00.com/search/label/%E8%B3%BC%E5%85%A5%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC" target="_blank">購入レビュー</a></li><li><a href="http://gadget.knaka00.com/search/label/au%20WALLET" target="_blank">au WALLET</a></li>
<li><a href="http://gadget.knaka00.com/search/label/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA" target="_blank">ブログカスタマイズ</a></li>
</ul>
</div>

基本的にはULタグとLIタグを使ってアクセス先へのリンク一覧をリストで表現すればOKですが、ポイントはmenuというid名の<div>タグで囲むことです。これによりテンプレート内のスタイルシートによりナビゲーションバーがいい感じに表示されるはずです。

以上、Bloggerブログでナビゲーションバーを使いたい方は試してみてください。