【画像の CSSカスタマイズ】 影や色枠を付けてみる

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

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

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

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

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

また、デザインを 統一させることで サイトの イメージアップにもつながること間違いなしです！

CSS カスタマイズ 編集画面へ

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

追加cssに書き込む方法（ 外観カスタマイズ ）

Luxeritas子テーマの編集画面

どちらも 同じ項目ですが、外観カスタマイズで サイト画面を表示しながら
画像イメージを調整していくことができるので、外観カスタマイズに書き込む方法がいいでしょう。

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

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

基本のコードはこんな感じで ラインの幅・ 線種・色など を指定していきます。

ラインに関しては 別記事にてまとめています。

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

画像枠もいくつか使い分けたいので その場合の スタイルの作成と
投稿画面での指定のしかたについて を解説していきます。

スタイルの作成 【 色枠 】

クラス名を追加することで 色枠を いくつでも作ることができます。

imgのあとに .(ドット)と名前（class クラス）をプラスします。

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

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

影の cssには “sas” というワードを使ってみました。

投稿画面で 囲み枠を指定する

最後に、記事に使用する画像に枠を指定する方法です。

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

---

最後に、先ほどの 色枠も同じですが 使い分けない場合、
色枠 または 影枠のどちらか一つのスタイルを使用する場合は クラスの追加は不要となりますのでお間違いなく。

以上、【画像の CSSカスタマイズ】 影や色枠を付けてみる でした！