2005年05月07日

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

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

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


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

では実際に設定する項目ですが、
まずスタイルシートに以下を追加します。追加する場所はスタイルシートの末尾に加えればよいでしょう。
/* ナビゲーションバー */
#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%;
という部分でメニュー一個当たりの幅を決めてます。上の例ではメニューが5個の場合です。メニューの数に応じて調整する必要あります。大体合計90%(5x18%=90%)くらいになれば一列で済むと思います・・・。 幅を取りすぎると2列になってしまいます。

次に、アメブロ管理メニューの設定のページのメッセージボードに以下を貼り付けます。このとき、HTMLタグを表示モードにしておいてください。
<div id="navi">
  <ul>
    <li><a href="リンク1">menu1</a></li>
    <li><a href="リンク2">menu2</a></li>
    <li><a href="リンク3">menu3</a></li>
    <li><a href="リンク4">menu4</a></li>
    <li><a href="リンク5">menu5</a></li>
  </ul>
</div>

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

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


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

asiaさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

コメント

[コメントをする]

3 ■やってみます!

ご迷惑をおかけしてすいません!!
丁寧な説明まで。。。
ありがとうございます。
もう一度やってみます!!

2 ■> grasping-dreamsさん

さっそく試していただいたみたいで。
ブログ拝見しましたが、URLの設定(href="この中身")がこの例のままになっているようです。ここを個別記事へのURLに置き換えればよいと思います。
どうでしょうか・・・?
うまくいかなかったらどんどん質問おねがいします。

1 ■わかりやすい!

説明、ありがとうございました!!
試しにさっそくいじってみたのですが、
URLの設定が、わからず、また、ゆっくり出来るときに再トライしてみます!
ほんとうにPCおんちで。。。
ありがとうございました。

コメント投稿

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。