CSSで画像に影をつける方法【box-shadow】サイト内記事すべてに適用できる

CSSで画像に影をつける方法【box-shadow】サイト内記事すべてに適用

WordPressのテーマによっては、画像に枠装飾や影を付けられるものもあります。しかしながら、どちらかというとそれは少数派でしょう。

スタイルシート (style.css)にコピペするだけで、サイト内の記事すべてに影の装飾を付けられるコードをお伝えします。

画像に影をつけるCSS

/* 画像の影 */
#main img{
box-shadow:rgb(180, 180, 185) 0px 6px 12px 0px;
-webkit-box-shadow:rgb(180, 180, 185) 0px 6px 12px 0px;
-moz-box-shadow:rgb(180, 180, 185) 0px 6px 12px 0px;}

上記をスタイルシートにコピペするだけでOKです。

以下のように、すべての画像に影をつけることができます。もちろんレスポンシブにも対応していますし、スマホでもきれいに表示されます。

お好みで数値を調整して、よりサイトデザインに調和させてください。

こだわる場合の注意点

1点だけ注意があるとするなら、画像の配置を「中央」でない場合は左右いずれかの影がカットされるということ。

はじめの比較画像は配置「なし」を選択しているため、左側の影が見切れていますよね。同様に右側に表示させた場合、右側の影が消えます。(スマホ表示の場合、画像が大きければ中央配置となります)

その点だけ留意して使うだけで、その都度の装飾作業から解放されるわけですから、十分利用価値はあると感じます。

mac風のUIで、メリハリが効いていますよね。

お名前
メールアドレス





CSSで画像に影をつける方法【box-shadow】サイト内記事すべてに適用

ABOUT運営者情報

北海道出身、東京都在住。幼少期から音楽に触れ、ビジュアル系バンドでの活動を経て作曲家へ。その後、大手IT金融グループ社員を経て独立。現在はアフィリエイトやネットマーケティングのコンサルティングを通じて、研鑽の日々を送っています。