2008年11月 7日

モジュール「ヘッダ」の記述(メニュー)

ここまで色々とメニューをカスタマイズし、スタイルシートの内容は書いてきましたが、本文については(多分)書いていませんでした。
モジュールテンプレート「ヘッダ」の最後の方(divタグ2つの前)に以下の記述を追加しています。
<div id="navigation">
<ul>
<li id="navi01"><a href="<$MTBlogURL$>blog.html">ブログ記事</a></li>
<li id="navi02"><a href="<$MTBlogURL$>link.html">リンク集</a></li>
<li id="navi03"><a href="<$MTBlogURL$>profile.html">プロフィール</a></li>
<li id="navi04"><a href="<$MTBlogURL$>gallery.html">携帯写真ギャラリー</a></li>
<li id="navi05"><a href="mailto:shoji.s.kimura@nifty.ne.jp">Mail</a></li>
</ul>
</div>
上の記述で、各ウェブページへのリンク先を絶対パスにしていますが、ここは最初<MTBlogURL>を付けない相対パスで書いていました。
そうすると、メインページ(index.html)から、またはウェブページ同士ではちゃんと飛ぶのですが、それ以外の、カテゴリや月別のアーカイブのページからはリンク切れになってしまうのです。
なかなか原因が分かりませんでした。が、ブログ全体のファイル構成を眺めていてはっとしました。何のことはない、階層が違うのです。
私の知識では、絶対パスでの指定以外解決方法はありませんでした。

2008年11月 5日

メニューの画像化

ヘッダ下のメニューを画像にしてみました。
マウスがメニューに乗ったときには、やはりボタンの色が変わるようにしたい、となると通常javascriptを使いますが、今回はスタイルシートを使いました。
比較的知られている方法ですが、下のような1枚の大きな画像を用意します。Illustratorで作成しました。

この画像をメニューの各項目の背景画像として表示させるわけです。
もちろんそのままではすべての項目に同じメニュー(「ブログ記事」など)が表示されてしまうので、各項目にid属性で名前をつけます。(左から"navi01"、"navi02"・・・といった具合)
そして、スタイルシートで背景画像の位置をメニューボタンの幅(130ピクセル×25ピクセル)の分だけずらすことで各メニューボタンの表示とマウスオーバー時の画像差し替えを実現するのです。
スタイルシートは以下のとおりです。
/* Navigation ------------------------------------------------------------- */

#navigation ul{
      margin: 0 0 10px 0;
      list-style: none;
      text-indent: -9999px;
}
#navigation ul li{
      float: left;
      width: 130px;
      height: 25px;
}
#navigation ul li a{
      display: block;
      width: 130px;
      height: 25px;
      color: #33789c;
      text-decoration: none;
      background: url(images/menu2.gif) no-repeat;
} 
#navigation ul li#navi02 a{background-position: -130px 0;} 
#navigation ul li#navi03 a{background-position: -260px 0;} 
#navigation ul li#navi04 a{background-position: -390px 0;} 
#navigation ul li#navi05 a{background-position: -520px 0;} 
#navigation ul li#navi01 a:hover{background-position: 0 -25px;}
#navigation ul li#navi02 a:hover{background-position: -130px -25px;}
#navigation ul li#navi03 a:hover{background-position: -260px -25px;} 
#navigation ul li#navi04 a:hover{background-position: -390px -25px;} 
#navigation ul li#navi05 a:hover{background-position: -520px -25px;} 
というわけで、このブログも結構体裁が整ってきました。

2008年11月 3日

ヘッダ部分の拡大(副産物)

昨日の投稿「メニュー部分の修正」で、ヘッダとメニューの間の僅かな余白が消せない、と嘆きました。
試行錯誤を重ねるなかで、#header-contentの下のパディングの値を40px→50pxに変えたところ、余白は逆に広がったのですが(!)、ヘッダの画像で今まで隠れていた下の部分が表示されるようになりました。
まさに試行錯誤の副産物です。スタイルシートは以下のとおりです。

#header-content {
    width: 750px; 
    padding: 30px 0 50px 30px;
}
また、メニューの左端のボーダー表示はあきらめ、スタイルシートの"#navigation ul"の部分からborder-leftの指定を削除しました。近日中にここは画像に変えるので、こだわる意味はないわけです。

2008年11月 2日

メニュー部分の修正

ヘッダ下のメニューを単純なテキストからボタンのような外観に変えてみました。
いずれここは画像にするつもりですが、その前にスタイルシートのお勉強も兼ねてやってみたわけです。
一般的によく使われる方法だと思いますが、以下のように書き換えました。(結構長くなってしまいました。)
/* Navigation ------------------------------------------------------------- */
#navigation ul{
      margin: 0 0 10px 0;
      list-style: none;
      border-left: 1px solid #33789c;
}
#navigation ul li{
      float: left;
      width: 130px;
      height: auto;
      border-top: 1px solid #33789c;
      border-bottom: 1px solid #33789c;
      border-right: 1px solid #33789c;
      text-align: center;
      white-space: nowrap;
}
#navigation ul li a{
      display: block;
      background-color: #cff;
      color: #33789c;
      text-decoration: none;
}
#navigation ul li a:hover{
      background-color: #ff6;
      color: #f00;
} 
その後、#contentのmargin-topを20px→0としてヘッダとメニューの余白をなくし、同時に#alpha(左側の広いスペース)と#beta(右側の狭いスペース)についてmargin-topを20pxに設定して逆に余白を作りました。
また、メニューの各項目をfloat:leftで左寄せにしたので、回り込みを解除するために、#alphaに"clear:both"の指定を追加しました。
これで一応体裁は整ったかに見えますが、ヘッダとメニューの間に10〜15ピクセル程度の余白が残っていること、メニューの左端の青い線が表示されないことが課題(大げさ?)として残りました。
特に余白については、divタグを複雑に入れ子にし、スタイルシートが長くなると、指定場所を見つけるのが結構大変になります。
というわけで、不満ながら今日の作業は終わりとします。
ページの先頭に戻る