CSSカスタマイズをつかって画像に影や色枠を付けてみる｜WordPress ルクセリタス

サイトページに掲載する画像に 影を付けたり、色の枠を付けるカスタマイズです。

Webページの背景が白っぽい場合など 同系色の画像などは 境目が分かるようにしたいですよね。

事前に 画像自体に色枠などを付けるという方法もありますが編集に時間がかかるのと、
後から枠の線種・色など 修正したくなってしまった場合に大変な作業となってしまいます。

そこで CSSを使って好みのデザインを作成していきたいと思います！

CSSの作成と画像表示までの工程

WordPressテーマ ルクセリタスを使った CSS作成と
投稿画面でのメディア画像に枠を指定するまでの工程を かんたんに解説いたします。

CSSスタイルの作成

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

どちらに記述しても同じですが、外観カスタマイズでは
実際のサイト画面を確認しながら調整していくことができるので 最終的にこれ以上変更はない。
というものだけ子テーマに書き写すといった使いかたがおススメです。

メディアの追加と囲み枠の指定

使用する画像をメディアを追加 から投稿作成画面へ取り込みます。

１パターンだけの画像スタイルにする場合、
取り込んだ画像すべてに同じ囲み枠のスタイルが適応され 投稿画面で何もする必要はありません。

使い分ける場合でも Luxeritas では 投稿エディタ画面の画像の編集画面を開き
【画像詳細】の 画像CSSクラスに書きこむだけというもの。簡単です！

この 画像CSSクラスの項目に呼び出したいスタイル名を記述します。

記述してある “sss" というのがCSSで作成するときに使用するコードになります。

このクラスの名前を使い分けることで いくつものパターンを作成することができます。

メディア画像枠の デザインとCSS

画像に枠を付けるためのCSSは【 border = 線 】だけで作成できるものと【 box-shadow = 影】を使って作成するものがあります。

色枠だけの基本のコード

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

border なし！ 影 box-shadowのみの枠

影の枠は立体的なイメージで これなら 同系色でも画像との境目がちゃんとわかりますしカッコいい枠になりますね。

この box-shadowの 8px の部分が 影のぼかしの調整部分になります。

border + shadow  – border + 控え目なshadow –

先ほどの基本コードにうっすらと控えめな影を足してみました。

border + shadow  – 細いラインの枠 –

あとは応用になります。

border + shadow  – 同色の枠と影 –

border + shadow  – Gray＆Pink –

border + shadow  – Black＆yellow –

スタイル作成のしかた

複数のスタイル作成する場合は 先ほどの " sss " の部分、imgのあとに
.(ドット)と名前（class クラス）を変えていくという方法で作成していくのですが
気を付けていただくポイントは " 要素" や他のクラス名と重ならない名前を付けるということです。

長すぎても 今度は覚えるのが難しくなるので かんたんで分かりやすいコードを考えてみてください。

ラインに関する記事はこちら ↓
ラインの種類と CSS コード作成のしかた【基礎知識】
【囲み枠 – BOX】基本のCSSコードとHTMLの記述のしかた

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