このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。 おちゃのこネットの刑部です。
Vol.141では、CSS3を利用して写真枠等のボックス要素に影を付ける方法をご紹介しましたが、今回はその影を小さく、薄くすることで、ボタンを押したような効果を付ける方法をご紹介します。
※そのため、前回のカスタマイズをご利用でないショップさまは、ご利用いただくことはできません。
参考にご覧ください。

前回同様CSS3で付けた影を利用しますので、ご利用ブラウザにより表示されません。
対応ブラウザ：IE9、Firefox3以上、Google Chrome、Safari3以上
※IE7、IE8では未対応となります。

	http://cafe0808.ocnk.net/

管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。

スタイルシートの編集画面に下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。

.photo_line_80:hover,
.photo_line_140:hover,
.photo_line_250:hover {
-webkit-box-shadow : 2px 2px 5px 0px #CCCCCC;
-moz-box-shadow : 2px 2px 5px 0px #CCCCCC;
box-shadow: 2px 2px 5px 0px #CCCCCC;
}

指定について	2px 2px 5px 0px #CCCCCC 値は左から 水平方向への影指定。正の値で右方向、負の値で左方向に影をつける 垂直方向への影指定。正の値で下方向、負の値で上方向に影をつける 影のぼかし具合。 影の広がり具合。 影の色。
ブラウザ別指定	-webkit-box-shadow、-moz-box-shadowはブラウザ別の指定となりますので必要です。
対応ブラウザ	IE9、Firefox3以上、Google Chrome、Safari3以上　 ※推奨ブラウザ内のみ記載