【画像のCSSカスタマイズ】 影や色枠を使い分ける

サイトページに掲載する画像に枠を付けるCSSカスタマイズ方法です。
枠や影を付けることによって 同じ画像でも全然違う印象になります。

また、白っぽい画像などはサイト自体との境目が分かりにくく
せっかくの画像がぼやけてしまいます。

3つを比べてみます。

画像自体に枠を付けることも出来ますが
時間もかかりますし、後で修正したい際に枠まで修正しなくてはなりません。
枠の太さや色なんかも統一されているほうが
サイト全体にみて見てもイメージアップ間違いなしです。^^

画像枠のCSSカスタマイズ【色】

ラインのプロパティは border といいます。
囲み枠にする場合は border のみ記述

上下左右の個別にラインだけを引く場合は
border-の後に top  bottom  left  right を記述することで
その部分にだけラインを引くことができます。
例えば、border-top , border-bottom という感じです。

画像に色枠を付ける基本のCSS

クラス名の追加で 画像ごとに枠を使い分ける

画像の中には 枠を付けたくない画像も出てきます。
今回は色枠と影を付けるということも使い分けたいので
その方法を解説させて頂きます。

画像に合わせて複数の枠を使い分けるためには
imgのあとに .(ドット)と名前（class クラス）をプラスしてあげます。
これで何パターンでも枠のスタイルを設定する事ができます。

他のクラス名と重ならなければ、名前は何でも大丈夫です。
今回、かんたんな qqq というコードにしてみました。
必ず、 .(ドット) を忘れずに記述してください。

HTMLの記述のしかた

Luxeritas  の場合、投稿エディタ画面で 簡単に記述するだけで
スタイルを指定できます。
記事に追加した画像の編集画面から【画像詳細】の 画像CSSクラス
に先ほど設定したクラスを記述します。

画像枠のCSSカスタマイズ【影】

影のcssには “sas” というワードを使ってみました。
すべての画像に同じ影を付ける場合は .sas は削除してください。

影のスタイルもオリジナルでいろいろ試してみてくださいね。