ブログを見ていると、以下の様にオススメ記事へのリンクをバー形式（ナビゲーションバー）で表示しているサイトをよく見かけます。



　私がSeesaaで運営している別ブログにナビゲーションバーを設置してみましたので、その方法を紹介します。


■設定手順


デザイン＞ PC＞ コンテンツ　の画面を表示。

[自由形式]をナビゲーションバーを表示させたい部分にドラッグし、クリック。


クリックした部分に以下のようなHTMLコードを入力し、保存。

<div id="navi-bar">
<ul>
<li><a href="http://keiba-target.seesaa.net/tag/Target%20Frontier%20JV" target="_blank">TARGET</a></li>
<li><a href="http://keiba-target.seesaa.net/tag/%8B%A3%94n%90%DF%96%F1%8Fp" target="_blank">競馬節約術</a></li>
</ul>
</div>

URLとヘッダのタイトル部分は適宜書き換えて下さい。

つづいて、デザイン＞ PC＞ デザイン設定　の画面を表示。


使用中のスタイルシートに以下を追加し、保存。

/*ナビゲーションバー*/
#navi-bar ul {
margin-top:4px;
margin-left:-40px;
}
#navi-bar li {
list-style:none;
float:left;
margin-bottom:20px;
}
#navi-bar li a{
background-color:#cccccc;
display:block;
width:180px;
height:40px;
line-height:40px;
color:#000000;
text-align:center;
text-decoration:none;
border-left:1px solid #444;
box-shadow: 1px 0px 0px rgba(225,225,225,0.3) inset,
             -1px 0px 0px rgba(225,225,225,0.3) inset,
              0px 1px 1px rgba(0,0,0,0.1) inset,
              0px -1px 1px rgba(0,0,0,0.3) inset,
              0px 1px 3px #666;
}
#navi-bar li a:hover {
background-color:#000000;
text-decoration:none;
color:#ffffff;
}

以上で、ナビゲーションバーが表示されるはずです。
（数値は適当に微調整して下さい）


■ナビゲーションバーの設置で多少PVが増えるようです


　厳密に確認したわけではありませんが、ナビゲーションバーを設置した後、ナビゲーションバーに設定したURLへのアクセスが多少増えたと思います。

　検索で訪れたユーザーにとっても、ブログのアピールポイントがわかりやすくなりますので、まだナビゲーションバーを設置していない方は上記を参考に設置を検討してみてはいかがでしょうか。