<>

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

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

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

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

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

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

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

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

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

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

追加cssに書き込む方法( 外観カスタマイズ )
外観カスタマイズの 追加CSS画面の場所と使いかた

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

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

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

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

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

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

関連記事はこちら

ラインの種類と CSS コード作成のしかた【基礎知識】

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

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

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

スタイルの作成 【 色枠 】

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

画像のclass クラスの使い方を分かりやすく図解
imgのあとに .(ドット)と名前(class クラス)をプラスします。

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

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

画像の影CSS-コードを分かりやすく図解
影の cssには “sas” というワードを使ってみました。

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

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

テキストエディタ クラスCSSへの記述画面

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


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

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