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

サイトページに掲載する画像に CSSカスタマイズを使って 枠を付けてみます。

背景が白い画像などは サイト自体との境目が分かりにくくなりますので
場合によって 枠や影を利用して画像の境界をつけてあげるというのも大事です。

また、枠や影を付けることによって 同じ画像でも全然違う印象になります。

3つの画像で 比べてみます。

枠のない画像を分かりやすく図解
枠のない画像
色枠を付けた画像を分かりやすく図解
色枠を付けた画像
影を付けた画像を分かりやすく図解
影を付けた画像

画像自体を編集する際に 枠を付けておくことも出来ますが 編集に時間がかかるのと、
後から枠の線種・色など 修正したくなってしまった場合に大変な作業となってしまいます。

また、サイト全体のイメージアップという意味でも ページごとにデザインが変わるよりも、
統一されている方が 断然、見やすく、印象の良いサイトとなるのではないでしょうか。

CSSカスタマイズの編集

カスタマイズは、外観カスタマイズを開き、追加CSSへ記述する方法と
Luxeritasの項目から 子テーマの編集を開き、スタイルシート:style.css に直接書き込む方法があります。

外観カスタマイズの 追加CSS画面の場所と使いかた
ダッシュボード画面 → Luxeritas項目 → 子テーマの編集
どちらも 同じ項目ですが、外観カスタマイズで サイト画面を表示しながら
画像イメージを調整していくことができるので、外観カスタマイズに書き込む方法がいいでしょう。

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

それでは、かんたんな囲み枠から カスタマイズのコードと使いかたを解説していきます。

画像枠のCSSコード分かりやすく図解

border

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

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

サイズ・線種・色の指定

後は、線の幅(サイズ)・線種・色の指定です。

こちらの項目に関しては別記事にて詳しく解説しています。
ラインの種類と CSS コード作成のしかた【基礎知識】

↓ 色のコード一覧はこちら
WEB色見本 大辞典

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

このコードを CSSに貼り付けて、後から 線種・色など お好みで編集できます。

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

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

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

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

HTMLの記述のしかた

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

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

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

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