ローカルナビゲーション指定
サンプルサイトのローカルナビゲーションは<ul>タグを使用し、クラスセレクタを指定してあります。子カテゴリ数個作成するのであれば、下記部分をコピペして利用できます。
<p class="sidetitle">*** ローカルナビ ***</p> <ul class="localnavi"> <li><a href="#">*** リンク ***</a></li> <li><a href="#">*** リンク ***</a></li> <li><a href="#">*** リンク ***</a></li> <li><a href="#">*** リンク ***</a></li> <li><a href="#">*** リンク ***</a></li> </ul>
/* -- サイドバー内のタイトル -- */
#sidebar .sidetitle {
font-weight: bold;
margin-bottom: 0;
padding: 0.5em 0;
color: #006699;
background-color: #ffffff;
border-bottom: 1px solid #006699;
}
/* -- ローカルナビゲーション -- */
.localnavi {
list-style-type: none;
margin-bottom: 2em;
}
.localnavi li { display: inline; }
/* ローカルナビは一番簡単なロールオーバー指定 */
.localnavi a {
text-decoration: none;
display: block;
width: 190px;
padding: 0.5em 5px;
background: url(img/bg-localnavi.jpg) no-repeat 0 100%;
border-bottom: 1px solid #cccccc;
}
.localnavi a:hover {
text-decoration: none;
background: url(img/bg-localnavi.jpg) no-repeat -200px 100%;
}
使用画像
画像の高さを80pxとする事で、文字サイズの変更時の対応をしています。
ローカルナビゲーションはユーザーの使いやすさ(検索のしやすさ)を考慮して作成します。例えば服飾関係のショップの場合、商品カテゴリ(グローバルナビゲーション)を
- メンズ
- レディース
- キッズ
- *****
- ***** とします。
ユーザーが子供用のワンピースを検索する際、漠然とワンピースを探すよりも、「サイズ」や「ブランド」といった選択肢を増やしておけば、探しやすくなると共に、より確実な商品選び＝販売に結びつきやすくなります。
HTMLの入力の手間はかかりますが、一番に考えなければならない事は「ユーザー」の立場になる事です。それぞれのページ(階層)に見合ったローカルナビゲーションを配置しましょう。
。
