アメブロにナビゲーションバーを設置

掲示板にて質問をいただいたのでブログにナビゲーションバー（このブログ上部にあるメニューみたいなやつ）を設置する方法を紹介します。

アメブロではHTMLを直接いじれないないので普通にやったら設置できないのですが、アメブロにはメッセージボードという機能がありますよね。
ブログトップに表示されるメッセージですね。
当ブログではこれを使って実現してます。


まず、前提条件ですが、２カラムブログを対象としてます。３カラムでも設置できますが幅が狭いのであまり見栄えがよくないと思います。

では実際に設定する項目ですが、
まずスタイルシートに以下を追加します。追加する場所はスタイルシートの末尾に加えればよいでしょう。

/* ナビゲーションバー */
#navi {
  width: 100%;
  margin-bottom: 2px;
}
#navi li {
  width: 18%; /* メニューの個数によって調整 */
  margin: 0px 4px 0px 0px;
  padding: 0px;
  float: left;
  list-style: none;
}
#navi a {
  display: block;
  width: 99%;
  text-align: center;
  text-decoration: none;
  letter-spacing: 2px;
  color: #009999; /* 文字色 */
  background-color: #F5F5F5;
  padding: 4px 0px 4px 0px;
  border-left: 4px solid #0066cc; /* 左側の線色 */
  line-height: 80%;
}
#navi a:hover {
  color: #0066cc; /* 文字色(マウス乗せた時) */
  border-left: 4px solid #009999; /* 左側の線色(マウス乗せた時) */
}

width: 18%;
という部分でメニュー一個当たりの幅を決めてます。上の例ではメニューが５個の場合です。メニューの数に応じて調整する必要あります。大体合計90%(5x18%=90%)くらいになれば一列で済むと思います・・・。　幅を取りすぎると２列になってしまいます。

次に、アメブロ管理メニューの設定のページのメッセージボードに以下を貼り付けます。このとき、HTMLタグを表示モードにしておいてください。

<div id="navi">
  <ul>
    <li><a href="リンク１">menu1</a></li>
    <li><a href="リンク２">menu2</a></li>
    <li><a href="リンク３">menu3</a></li>
    <li><a href="リンク４">menu4</a></li>
    <li><a href="リンク５">menu5</a></li>
  </ul>
</div>

リンク＊の部分とmenu＊の部分は適当にカスタマイズしましょう。
ちなみに僕は、各メニュー記事を作成してその個別記事へリンクしています。ただし、普通にメニュー記事を作成するとブログトップページに記事が見えちゃうので、記事編集画面で日時をブログ開始日に設定して、トップページに現れないようにしてます。
他にはカテゴリページへリンクを張るのも使い道でしょうか。そこらは個人の使い方で様々になると思います。

これで、ナビゲーションバーが現れるはずです。
どうぞお試しあれ。
質問がありましたら気軽にコメントでどうぞ。


ちなみに、僕が現在使用しているブログのテンプレートは「グレイ」という種類で一番シンプルなやつです。いまは原形をとどめてませんが・・・
スタイルシートをカスタマイズして自分風にしたいときは、シンプルなデザインから改造するとやり易いと思います。