« 3:全体的に配色を整える。 | メイン | 4:サイドバーをいぢる(1::背景) »

ナビゲーション・メニュー設置

バナーにイラストを載せてしまったおかげで・・・、いや、そのイラストをどうにかすればええんやけど、 ブログトップへのリンクが使えないようになってしまっているので、ナビゲーションバーをつけて、カバーしようと考えた。

コンテンツがあまりないのと、今んとこページもそないに作成してないってことで、ナビをつけるまでもない気がするが・・・。

>>ブログ別!作成・カスタマイズ講座::トップナビゲーションの設置 を、 参照させていただきました。

どうせ、このメニューバーは、各ページに設置することになるので、前回の「サイドバーを左へ 3:各アーカイブページへ (モジュール化)」でも書いたように、 HTMLタグの部分はモジュール化することに。

●テンプレート名はnabi-menuとし、内容は下記のようにして保存します。

<DIV id="navi">
<UL>
<LI><A href="http://m.vv.cx/b_mt/" title="このブログのトップへ">ブログTOP</A>
<LI><A href="リンク先URL" title="ラッパンの自己紹介">プロフィール</A> 
<LI><A href="リンク先URL" title="このサイトについて">このサイトについて</A>
<LI><A href="http://m.vv.cx/" title="ホームへ戻る"> 「年がら年じゅう」 ホーム</A>
</UL>
</DIV>

  • 「プロフィール」と、「このサイトについて」のページはまだ作れていません。

<LI><A href="リンク先URL" title="説明文">タイトル</A>
赤字の部分を、適当に変更して、並べてやればOK。

 20060405-01

●次に、メインページへの記述です。bannerの記述の下 (pagebodyの記述の上)にタグを挿入。(青字)

               </div>
            </div>
         <div id="banner-img"></div>
         <$MTInclude module="navi-menu"$>

         <div id="pagebody">

●そして、mt-static/themes/original/フォルダoriginal.cssに以下を書き足し。

#navi {
text-align: center; /*メニューの位置*/
width: 800px; /*横幅*/
padding: 8px 0 8px 0; /*内側余白*/
background: #ffecec; /*背景色*/
border-bottom: 1px solid  #cc00cc; /*枠のライン*/
}

#navi UL {
list-style: none; /*マーカーなし*/
margin: 0px; /*外側余白*/
padding: 0px; /*内側余白*/
font-size: 12px; /*文字の大きさ*/
font-weight: bold; /*文字の太さ*/
text-align: center; /*文字の位置*/
background: #ffecec; /*背景色*/
}

#navi LI {
display: inline; /*表示形式*/
white-space: nowrap; /*スペース等の表示(半角)*/
}

#navi A { 
text-decoration: none; /*リンクの下線*/
background-color: #ffcc66; /*背景色*/
border: 1px solid #cc00cc; /*枠色*/
padding : 2px 12px 2px 12px; /*内側余白*/
}

#navi A:HOVER{
text-decoration: none; /*リンクの下線*/
background-color : #ffffee; /*背景色*/
}

おぉ、リンクの数が少なくて寂しいが・・・完成!

20060405-02

後は、これをメインページ以外(エントリー・アーカイブ,カテゴリー・アーカイブ,日付アーカイブ)にも設置せなあかんのやなぁ・・・ 。

いやまてよ、1カラムですまそうとしているアーカイブページや、検索結果のページや、 コメントを書いてもらった後の確認のページにも設置せなな。ままま、とにかくメインページを先に完成させて、 後者の3ページはまた後回しにしよ・・・。

トラックバック

このエントリーのトラックバックURL:
http://m.vv.cx/b_mt/mt-tb.cgi/24

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)