入口 > お問合せ - お返事 > 入口メニューにオンマウスでアイコンを表示させたい件

入口メニューにオンマウスでアイコンを表示させたい件

ver.4-1
◆美村さま 

初めまして、テンプレ目に留めてくださってありがとうございます!

>メニューにマウスのカーソルを合わせると背景色が変化したり、メニューの前や上に画像アイコンが表示されるというタグがありました。……
>今出来るようになりたいことがメニューの前にアイコンが表示されるようになることで、下が支援サイトのタグを〜

とのことですが、そもそもHTMLソースの構造もclass指定も違いますので、残念ながら他サイトさんのスタイル指定そのままではうちのテンプレには使えません。必要な部分だけを抜き出し、HTMLに添って指定の仕方を変える必要がありますが、このへんのHTMLとCSSの基本については専用の解説サイトをご覧ください。(例えば老舗のこちらとかHTMLも含めた全体としてこちらとか、ある程度HTMLの枠組みがイメージできるならこちらなどもCSSについて端的に書かれててわかりやすいように思いました。)
うちのテンプレで、入口メニューの前にオンマウスでアイコン画像を表示させたいなら(こんな感じに)、下記のようにしてください。
1.まずテンプレHTMLの初め1/4あたりの↓ここにピンク背景部分を追加する。

<!--カテゴリ一覧-->
<!--category-->
<!--category_nosub-->
<ul class="ulTop ulTop_cat<%category_no>">
<li class="liTop">
<a class="aTop" href="<%category_link>"
title="「<%category_name>」ト&#12483;プへ"><span><%category_name></span></a>
</li>
</ul>
<!--/category_nosub-->
<!--category_parent-->
<ul class="ulTop ulTop_cat<%category_no>">
<li class="liTop">
<a class="aTop default" href="#null" title="click to fix"><span><%category_name></span></a>
<ul class="sub">
<!--/category_parent-->
<!--category_sub_hasnext-->
<li class="sub_li_cat<%category_no>"><span class="hojo">├</span><a href="<%category_link>"
title="「<%category_name>」ト&#12483;プへ"><span><%category_name></span></a></li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="cat<%category_no>"><span class="hojo">└</span><a class="last" href="<%category_link>"
title="「<%category_name>」ト&#12483;プへ"><span><%category_name></span></a></li>
</ul>



2.スタイルシート末尾に下記を挿入する。(ブルー背景部分はアイコン画像の幅に合わせて指定してください。)

/*入口メニューオンマウスアイコン用*/
ul.ulTop li.liTop a.aTop span,
ul.sub a span { padding-left:10px; }
ul.ulTop li.liTop a.aTop:hover span,
ul.sub a:hover span { background:url(http://画像アドレス) center left no-repeat; }
ul.ulTop li.liTop a.default:hover span { background: none; }




以上です。
もし親カテゴリ(うちの例でいうと「テンプレ」「展示例」「お問合せ」のところ)にもオンマウスでアイコンをつけたければ、追加していただいたスタイルシートのうち最下行(破線部分)を削除してください。

いかがでしょうか、思い描かれてる感じに近づけてますでしょうか?
宜しくお願い致します。

2013-01-04