おちゃのこ通信 Vol.141 - デザイン道場 - おちゃのこネットメールマガジン

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

皆さん、こんにちは。おちゃのこネットの刑部です。
今回は、CSS3を利用して写真枠等のボックス要素に影を付ける方法をご紹介します。
ただし、CSS3を利用しますので、ご利用ブラウザにより表示されません。
対応ブラウザ：IE9、Firefox3以上、Google Chrome、Safari3以上
※IE7、IE8では未対応となります。

	http://cafe0808.ocnk.net/

スタイルシートを編集する

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

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

.photo_line_80,
.photo_line_140,
.photo_line_250 {
-webkit-box-shadow : 5px 5px 10px 0px #666666;
-moz-box-shadow : 5px 5px 10px 0px #666666;
box-shadow: 5px 5px 10px 0px #666666;
}

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

なお、お問い合わせは下記ページからお願い致します。

https://www.ocnk.net/contact/index.php