それでは、センターボックスの次は、レフトボックスをコーディネートしてあげます。
具体的には、メニューをつくる感じです。
このページの文中のリンクは、すべて新しいウィンドウで開きます。
このページの完成サンプルはこちら >>
■レフトボックスの定義内容
.left{
width: 219px;
float: right;
background-image: url("背景画像までのパス");
}
まずは、レフトボックスの定義内容に、
上の赤い部分の定義をつけ加えます。
これは、メニューボックスがタテに伸びていっても、
デザイン的に不都合が生じないように、
このレフトボックスに「繰り返してもＯＫな画像」を背景画像として定義するという意味です。
以下の画像を、レフトボックスに背景画像として、定義してあげてください。
背景用の画像
背景画像を定義したら、次に以下の画像を、
ふつうの画像として入れます。
画像
ココまでの、
レフトボックス内のソースはこんな感じです。
<div class="left">
<img src="ササクレメニューと描かれた画像までのパス">
</div>
上のサンプルと同じになってるなら、次の工程に進みます。
■メニューリンクが書いてあるボックスの定義内容
.left-menu{
padding: 0px 18px 0px 14px;
}
次は、メニューを書き込むための、ボックスを定義してあげます。
そして定義しおわったら、さっきレフトボックス内に挿入した、
「ササクレメニュー」と描かれた画像の下に、このボックスを入れてあげます。
■ここまでの、レフトボックス内のソース
<div class="left">
<img src="ササクレメニューと描かれた画像までのパス">
<div class="left-menu"></div>
</div>
赤いテキスト部分が、付け加える部分。
そして次は、下にある画像を挿入してください。
画像
■ここまでの、レフトボックス内のソース
<div class="left">
<img src="ササクレメニューと描かれた画像までのパス">
<div class="left-menu"></div>
<img src="受け皿みたいな画像までのパス"></div>
できましたか？
そしたら、今度は、メニューのテキストの定義をつくっていきます。
まずは、下のソースのように、テキストリンクを書き込んでいってください。
<div class="left">
<img src="img/left-top.gif">
<div class="left-menu">
<a href="#">Yahooの検索エンジンが...</a>
<a href="#">質問メールにはURLつけてね...</a>
<a href="#">無言電話ってやだよね...</a>
<a href="#">牛肉には醤油でしょ？</a>
<a href="#">個室１</a>
<a href="#">個室２</a>
<a href="#">個室３</a>
<a href="#">個室４</a>
<a href="#">個室５</a>
<a href="#">カルボナーラの個室</a>
</div>
<img src="img/left-bottom.gif"></div>
改行<br>を入れないように注意して下さい。
この状態だと、めちゃくちゃで、メニューと呼べる代物にはなってませんよね。
でもこれから、いろんな定義を加えながら、順に整えていくので安心してください。
次は、アイキャッチとなる画像を入れていきます。
水色の点みたいなやつです。
画像
これを、
各リンク内（<a>〜</a>の間）に入れていきます。
<div class="left">
<img src="img/left-top.gif">
<div class="left-menu">
<a href="#">
<img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">Yahooの検索エンジンが...</a>
<a href="#">
<img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">質問メールにはURLつけてね...</a>
<a href="#">
<img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">無言電話ってやだよね...</a>
<a href="#">
<img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">牛肉には醤油でしょ？</a>
<a href="#">
<img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">個室１</a>
<a href="#">
<img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">個室２</a>
<a href="#">
<img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">個室３</a>
<a href="#">
<img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">個室４</a>
<a href="#">
<img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">個室５</a>
<a href="#">
<img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">カルボナーラの個室</a>
</div>
<img src="img/left-bottom.gif"></div>
<img>内を良く見てみると、
align="absmiddle" 、
border="0" と書き込んであるのが分かると思います。
align="absmiddle"は、この画像と、つづく
テキストとの位置関係を調節していて、
border="0"は、リンク時の画像にでてくる
「青い線」を表示させないためのもの。
両方とも、しっかりと定義してあげてください。
ココまでのサンプル >>
まだ、メニューにはなってないですよね。
ここまでで、下ごしらえができたので、
次は、いよいよテキストをいじってスッキリさせてあげます。
■メニューのテキスト部分の定義
.left-menu a{
display:block;
color:#FFFFFF;
text-decoration:none;
}
.left-menu a:hover{
color: #66FFFF;
}
上のような定義を新しくつくります。
まず、「
.left-menu a」について。
これは、
子孫セレクタをつかってます。
意味は、
「class名「
.left-menu」内の、
<a>についてこのようなスタイルシートを定義します」
という意味です。
注目してほしいのは、
display: block という箇所。
これはね、本来、
インライン要素であるテキストをブロック要素に変換します、
という指令を定義していて、
ブロック要素は、段組してあげないと、ヨコに並べないから、
自然と、テキストリンクが
タテに陳列していきます。
？？って感じかもしれませんけど、慣れてくれば分ってくると思います。
よくわからない人は、
<DIV>の仕組みを知っておこうを参照してください。
color はリンク色。
text-decoration: none は、アンダーラインを付けないという定義。
次は、「
.left-menu a:hover」。
コレも、子孫セレクタです。
意味は、
「class名「
.left-menu」内の、
<a>に
マウスカーソルが乗った時ついてこのようなスタイルシートを定義します」
という意味です。
リンクにオンマウスしたときに、リンク色を変更します、という定義をしています。
■このページまでのHTMLソース
（<body>〜</body>）
<body>
<div class="base">
<div class="header"><img src="img/title.gif" width="324" height="63"></div>
<div class="center">
<h1>Yahooの検索エンジンが...</h1>
はぁ。。。<br>
知ってます？<br>
今度Yahooの検索エンジンが変更されるみたいですよ。<br>
これね〜、ちょっとね〜、わたし的に少しだけマイナスなんですよね〜。。。<br>
現在の検索システムだと、「Yahoo掲載サイト」が検索結果の上位に表示されてますよね。<br>
じつは、、、、、、、、、これが無くなってしまうのです！・・・・が〜んっ。<br>
アクセス数が減ってしまうよー（涙）<br>
でも、わたしのことはさておき、検索エンジンとしては、使いやすくなると思うので、<br>
利用者にとってはイイコトなんですけどね〜・・・だけどね〜。<br>
で、新しい検索エンジンのベータ版が発表されたので、恐る恐る検索してみました。<br>
「うわぁ〜、ほんとに表示されてないや」っていうのが最初の印象。<br>
Yahooに対しても、SEOとかしないといけなくなるのか〜、Googleでさえ完璧じゃないのに。<br>
ってな感じで、かるくへこみながら、いろいろ検索してたんですが、<br>
あれれ？って思うようなことが。<br>
今まで、掲載サイトのクセに、７０位ぐらいに表示されてたキーワードで検索してみたら、<br>
なんとっ！、、、、順位が上がってました〜（笑）<br>
３０番台ぐらいまでに。<br>
たいして意識してなかったけども、結果オーライってことですかね。<br>
でも、すぐに激化してくると思うので、この順位を伸ばしていけるようにがんばりまっする☆
</div>
<div class="left">
<img src="img/left-top.gif">
<div class="left-menu">
<a href="#"><img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">Yahooの検索エンジンが...</a>
<a href="#"><img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">質問メールにはURLつけてね...</a>
<a href="#"><img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">無言電話ってやだよね...</a>
<a href="#"><img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">牛肉には醤油でしょ？</a>
<a href="#"><img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">個室１</a>
<a href="#"><img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">個室２</a>
<a href="#"><img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">個室３</a>
<a href="#"><img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">個室４</a>
<a href="#"><img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">個室５</a>
<a href="#"><img src="水色の点みたいな画像までのパス" align="absmiddle" border="0">カルボナーラの個室</a>
</div>
<img src="img/left-bottom.gif"></div>
<div class="footer"></div>
</div>
</body>
赤いテキスト部分が、このページでの作業範囲。
ここまでくれば、あとはちょろっとフッターボックスをいじるだけです。
