HOME


上部の HOME、お買い物の流れ、決済について ~ カートの中を見る のボタンの色およびデザインを変えたいのですが、どうすればよろしいでしょうか。



これは、(124)トップメニュー(全商品) というフリーパーツで定義しているのですが、フリーパーツの中ではグラフィック部分については、一切記述していません。

例えば、HOMEというボタンについては、この様に記述しているだけです。
<div style="float: left;" id="menu101"><a href="[$$$domain]">HOME</a></div>

グラフィック部分は、brand.cssというスタイルシートファイルの中で定義しています。
(サーバでは、ドメインルートに設置されています。)

まず、HOMEという部分は、グラフィック素材としては、menu101.gifというファイルになります。



では、スタイルシートを見てみましょう。

/*--- 全商品用トップメニュー ---*/
#menu101 a {
background: url(/kiji/userfiles/Image/menu101.gif) no-repeat left top;
height: 30px;
width: 94px;
display: block;
text-indent: -9999px;
}
#menu101 a:hover {
background: url(/kiji/userfiles/Image/menu101.gif) no-repeat left -30px;
}

この2セットで、ひとつのボタンを表しています。

#はIDを表し、このmenu101というID名で、フリーパーツでの定義と連動します。

上半分が高さ30pxなので、通常上半分が表示されます。

a:hover というのは、マウスオンされた時の表示のさせ方なので、ここでY座標として-30pxとしているので、下半分が表示されるというわけです。
ここで、幅も94pxと定義されているので、ここも注意点です。

ですから、同様に2重構造のボタンを作ることがまず必要です。

この定義が、menu101~menu107までされています。

さらに、このボタン群の背景として、menu_back2.gifという画像を、横に繰り返して一連のメニューセットとして一体化させています。



この定義を、ヘッダブロックにしています。
各ページのヘッダブロックを確認してください。

背景画像を「あり」にして、menu_back2.gifという画像を、左下に設置し、これを横に繰り返し表示させています。
ですから、各2重構造のボタンと、背景の高さ30pxの帯となる画像を用意して、同様に設定することにより色やイメージを変更することが出来ます。

これら全てグラフィックツールでの作業となります。

Copyright © 2010 Ompookan Inc. All rights reserved