【画像のCSSカスタマイズ】 影や色枠を使い分ける
サイトページに掲載する画像に枠を付けるCSSカスタマイズ方法です。
枠や影を付けることによって 同じ画像でも全然違う印象になります。
また、白っぽい画像などはサイト自体との境目が分かりにくく
せっかくの画像がぼやけてしまいます。
3つを比べてみます。



画像自体に枠を付けることも出来ますが
時間もかかりますし、後で修正したい際に枠まで修正しなくてはなりません。
枠の太さや色なんかも統一されているほうが
サイト全体にみて見てもイメージアップ間違いなしです。^^
画像枠のCSSカスタマイズ【色】
ラインのプロパティは border といいます。
囲み枠にする場合は border のみ記述
上下左右の個別にラインだけを引く場合は
border-の後に top bottom left right を記述することで
その部分にだけラインを引くことができます。
例えば、border-top , border-bottom という感じです。
画像に色枠を付ける基本のCSS
1 2 3 4 5 |
/*画像の囲み枠【色】 */ img{ border:4px solid #d4d9b6; } |
クラス名の追加で 画像ごとに枠を使い分ける
画像の中には 枠を付けたくない画像も出てきます。
今回は色枠と影を付けるということも使い分けたいので
その方法を解説させて頂きます。
画像に合わせて複数の枠を使い分けるためには
imgのあとに .(ドット)と名前(class クラス)をプラスしてあげます。
これで何パターンでも枠のスタイルを設定する事ができます。
他のクラス名と重ならなければ、名前は何でも大丈夫です。
今回、かんたんな qqq というコードにしてみました。
必ず、 .(ドット) を忘れずに記述してください。
HTMLの記述のしかた
Luxeritas の場合、投稿エディタ画面で 簡単に記述するだけで
スタイルを指定できます。
記事に追加した画像の編集画面から【画像詳細】の 画像CSSクラス
に先ほど設定したクラスを記述します。
画像枠のCSSカスタマイズ【影】
1 2 3 4 5 |
/*画像の囲み枠【影】 */ img.sas{ box-shadow: 2px 5px 8px #bbb; } |
影のcssには “sas” というワードを使ってみました。
すべての画像に同じ影を付ける場合は .sas は削除してください。
影のスタイルもオリジナルでいろいろ試してみてくださいね。