[B]RLMの作り方・その3-3
ちょっと更新に時間が開いてしまったけど、気を取り直して続き。XHTMLソースは前回のエントリにあります
h2 id="recent" の部分の巻
<h2 id="recent">・・・</h2>部分の背景画像として表示している画像。
この部分では単純に左の「Recent entry」と書かれている画像を背景画像として表示しているだけです。
テキスト下にブルーのラインが入ってるのがキモチ悪いと思う方もいらっしゃると思いますが、それについては後述します。cssソースはこんな感じです。
#recent{
position:relative;
width:144px;
height:36px;
background:url(xxx.gif) no-repeat;
text-indent:-9999px;
margin:0px 0px 0px 17px;
z-index:5;
}
ここでのposition:relative;は一番下のz-index:5;(値は5じゃなくてもいいです)でこの画像を一番手前のレイヤーとして扱うために記述しています。(その部分のレイヤーの重なり方については[B]RLMの作り方・その3-1に書いています)その2つの記述がないとどうなるかというと・・・
こんな風に他レイヤーの下になって正しく画像が見えなくなります。
その他は幅(width)・高さ(height)・背景画像(background)の指定をし、テキストを画面外へ飛ばして(text-indent)、marginで位置を配置指定しているだけです。
div class="navibox" 部分の巻
続いて「class="navibox"」の部分ですが、これは最近のエントリのテキストリンクや、カテゴリメニューのテキストリンクを囲んでいる薄いブルーの枠のことです。
ここは単純に薄いブルー(#cee3eb)の枠をborderで指定し、背景画像にグラデーションの入った画像を指定しています。
その際、文字サイズ可変や内容量が増えた時も表示がおかしくならないように背景画像位置はleft bottomとしています。該当部分のcssソースです。
.navibox{
width:410px;
background:url(xxx.jpg) no-repeat left bottom;
border:1px solid #cee3eb;
padding:10px;
margin:-4px 0px 0px 15px;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}
.navibox h3,.navibox ul.reclist,.navibox ul.catelist{
position:relative;
z-index:6;
}
まず幅の指定をします。高さについては可変するケースも想定されるので指定していません。そして背景画像、ボーダーの指定、枠のフチにキツキツにテキストが入るのはあまり好きではないのでpaddingで10px余白を取りました。font-familyは見たままです。
なんでmarginにマイナスの値がいるの?の巻
marginの部分で上側に-4pxを指定している部分。上の「Recent entry」の部分でも少し触れた部分ですが、ここにマイナスのマージンを指定する事で「Recent entry」と書かれた画像に含まれる薄いブルーの下線とこのボックスのボーダーの位置を合わせています。
なんでわざわざそんな事をせねばならんのだーという話ですが、もしここに入る単語が別の単語ならこんな事しなくてもいいんですが、「Recent entry」の「y」。この「y」が他の文字より下に飛び出してしまうので、枠内に食い込んでしまうんです。かといって「y」の一番下に合わせて画像を配置すると、それはそれでなんか変な感じがしたので上に書いたとおり、枠線付きの画像を書き出しました。
その下のメニューの「category」の方も「g」と「y」が含まれてて枠線に食い込むので「Recent entry」と同じく、「Category archive」の方も下線込みの画像として書き出して同じcss(class="navibox")で使いまわせるようにしています。
その下の指定は何?巻
「.navibox h3,.navibox ul.reclist,.navibox ul.catelist」と指定しているpositionとz-index部分は上の「Recent entry」部分で説明したのと同じく、その辺りにあるテキストリンクをレイヤーの最前面に持ってくるための指定です。「,」区切りでいろいろ指定してますが、単にその辺のテキストに関連しているものを集めてまとめて指定しているだけです。
もう一息・・・の巻
ここまで来たらもうメニュー部分の大まかな部分は完成したに近いです。こまでの説明では「Recent entry」の回りを中心に説明しましたが、その下の「Category archive」部分でもやってる事はほとんど同じなので、ソースだけ書いておきます。
XHTMLソース
<h2 id="category">カテゴリー別アーカイブ</h2>
CSSソース
#category{
position:relative;
width:190px;
height:36px;
background:url(images/temp/tit_cate_arc.gif) no-repeat;
text-indent:-9999px;
margin:15px 0px 0px 17px;
z-index:5;
}
上で説明した「#recent」とほとんど同じです。違うのは幅と背景画像とmarginだけです。特にややこしい事はしてません。あとはテキストリンクの装飾くらいですが、そういうのを解説してるサイトは多いのでここでは割愛します。やってる事はリンクテキストの左にアイコンを背景画像として表示したり、liタグをdisplay:inline;にして横並びにしてたり、そんな感じです。
すべてのエントリを見る部分の巻
ここも特にややこしい事をしてないのでサクっとソース書いてみます。
XHTMLソース
<p class="allentry">
<a href="archives.php" title="すべてのエントリを見る">
すべてのエントリを見る</a></p>
(見やすいように改行してるだけで実際は改行してません)
CSSソース
.allentry a{
display:block;
width:158px;
height:30px;
background:url(images/temp/m_allentry.gif) no-repeat left top;
text-indent:-9999px;
margin:10px 0px 10px 290px;
text-decoration:none;
}
#navi .allentry a:hover{background-position:left bottom;}
p class="allentry"の中のaタグに対してまずdisplay:block;(aブロックにするため)幅・高さ・背景画像を指定、テキストを画面外へmarginで位置指定。最後のtext-decoration:none;はNetscapeでaをblock化した時に出てくる下線を非表示にするためだけの記述です。通常時とhover時の画像は1枚の画像として書き出しているので、hover時は背景画像の位置をズラして表示してます。
これで左部分おしまいの巻
左メニュー部分でやってるのはこれだけなので、ここまで完成したら今まで作ったh1部分からナビの最後のp class="allentry">までを1つのグループとして「<div id="leftbox"></div>」で全て括ります。で、最終的にこの部分が左に寄ってくれればそれでいいので、その#leftboxには『#leftbox{float:left;}
』だけ指定しています。幅も高さも何もなしです。
<< [B]RLMの作り方・その3-2 | [B]RLMの作り方・その4 >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/143