【CSS】全画像に自動で枠線と影を付ける方法

昔は1つ1つ画像を加工して枠を付けるっていう馬鹿みたいな事をやってたんですが、全自動で画像に枠を付ける方法を編み出したのでご紹介します。

 

#inner-content img.{
border: solid 2px #848484;
box-shadow: 2px 2px 3px #848484;
}

上のCSSをコピペすればこれで全ての画像に枠と影が付きます。でも枠を付けたくない画像も存在してたら困りますので、特定の画像から枠を取り除く方法もご紹介します。

 

img.aaa {
border:none !important;
box-shadow:none !important;
}

まず上のCSSをコピペして、次に枠を消したい画像1つ1つにCSSクラス『aaa』を指定する必要があります。

 

 

▼ビジュアルエディタを開く▼枠を消したい画像をクリック▼鉛筆マークをクリック
▼画像CSSクラス欄に与えたいクラス名(今回はaaa)を入力して更新▼aaaを指定した画像の枠だけが消えます。また、画像から直接指定できない場合は、HTMLでもCSSクラスを指定する事ができます。

 

<a href=”https://tripleparkers.com/”><img class=aaa src=https://tripleparkers.com/wp-content/uploads/2020/05/gazou.png></a>

画像を指定するコードの中にimg class=aaaを入れればオッケーです。

コンテンツ内の画像には枠を付け、ウェジェットの画像には枠を付けないという条件付きの命令もCSSで作れますが結構ゴチャゴチャするんで書きません。