今回は、作ったヘッダーにナビゲーションメニューと、横型のカレンダー設置を。
って言っても、なんら新しいことするんやのうて、以前に書いた記事を見ながら、そのまま移すだけ・・・
ナビゲーションバーの設置
1)まずは、テンプレートのヘッダーに以下を書き加え。(青字)
・・・・
<DIV id="head-navi">
<UL id="under1">
<LI><A href="リンク先" title="#">ブログトップ</A>
<LI><A href="リンク先" title="#">記事一覧</A>
<LI><A href="リンク先" title="#">タグクラウド</A>
</UL>
<UL id="under2">
<LI id="list"><A href="リンク先" title="#">このサイトについて</A>
<LI><A href="リンク先" title="#">「年がら年じゅう」ホーム</A>
</UL>
</DIV>
例のごとく、またリンク先のページはできてない。ええ加減に作らんとアカンねんけど・・・
今回は、ブログ関係と全体のページ関連とで、リンクを分けてみました。そんで、その間を空けたり、リンク色を変えたりしたかったので、適当にidを振ってます。
2)次に、スタイルシート変更。青字が追加分。
#head-navi{ height : 30px; padding-left: 20px; padding-top: 0px; } #head-navi UL { list-style: none; margin: 0px; padding: 0px; } #head-navi LI { white-space: nowrap; float: left; text-align: center; font-size:12px; font-weight: bold; margin-left: 6px; } #head-navi LI#list { margin-left: 70px; } #head-navi UL#under1 A { display: block; text-decoration: none; background-color: #ffcc66; border: 1px solid #cc00cc; padding : 5px 10px; } #head-navi UL#under1 A:HOVER{ text-decoration: none; background-color : #ffffee; } #head-navi UL#under2 A { display: block; text-decoration: none; color: #6600cc; background-color: #ffccff; border: 1px solid #cc00cc; padding : 5px 10px; } #head-navi UL#under2 A:HOVER{ text-decoration: none; background-color : #ffffee; }
再構築して完成。
横型カレンダーの設置
これはまったくもって変更してない。前回の記事通り、そのまま設置した。
ほんでIE8ではうまいこと表示されてるのに・・・FF3.5では下へずれて表示されてしまいます。そこで、貼りつけたソースの内、align='middle'と記述された2箇所を削除したらFFでも問題なく表示されました。
仕上がりはこんな感じ↓
ここまでは順調やわ。だんだん前のデザインに近づいてきた。エントリー周りが一番大変そう・・・。