今回はWordPressの画像設定に関して紹介します。

WordPressに挿入した画像に縁(枠線)を付けたいとか、画像の縁に色を付けたいといった編集をしたいという方も多いと思います。

ここで紹介する方法は画像編集を行わず、WordPressの設定のみ変更することにより以下を実現します。

・画像に縁(枠線)を付ける
・画像の縁(枠線)の色を変更する
・画像に影を付ける
・画像の角を丸くする

設定はプラグインは不要で、非常に簡単です。以下のやり方を参考に行ってみてください。

WordPressの画像設定「縁(枠線)・影・角丸」

では、今回はWordPressテーマの賢威を例に説明していきます。

それでは画像の例として以下の様な四角形を使用して説明します。画像に何も装飾設定していない状態です。

 

WordPressのダッシュボードにある
「外観」→「テーマエディター」をクリックします。

 

「design.css」をクリック。※賢威以外のテーマは「style.css」など。

 

「design.css」内に例えば以下のように入力します。

.post img {
	border:solid 1px #000000;
	border-radius: 7px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
} 

このように入力すると以下のように表示されます。

以下のように画像の装飾が変更されました。装飾を設定した2～4行目のコードを順番に解説します。
　→ → →　
 
 

■2行目の「border:solid 1px #000000;」
この記述で縁(枠線)を指定しています。

　solid：実線
　1px：1pxの太さ
　#000000：黒色

ここを変更すると縁を点線にしたり、線の太さを変えたり、色を変えたりすることができます。

例えば、

.post img {
	border:dotted 2px #ff0000;
	border-radius: 7px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
} 

と入力すると、以下のように表示されます。
　→ → →　
 
 

■3行目の「border-radius: 7px;」
この記述で角丸を指定しています。

この記述を削除すれば、丸くなくなり四角形になります。

例えば、

.post img {
	border:solid 1px #000000;

	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
} 

と入力すると、以下のように表示されます。
　→ → →　
 
 

■4行目の「box-shadow: 5px 5px 5px rgba(0,0,0,0.4);」
この記述で影を指定しています。
指定している記述は順番に「影の水平方向のオフセット量」、「影の垂直方向のオフセット量」、「ぼかしの距離」、「色」となります。

例えば、

.post img {
	border:solid 1px #000000;
	border-radius: 7px;
	box-shadow: 10px 10px 10px #000000;
} 

と入力すると、以下のように表示されます。
　→ → →　
 

以上のように、WordPressの画像の装飾設定「縁(枠線)・影・角丸」は「design.css」や「style.css」を編集することによって行うことができます。

ただし、注意点がありますので、以下のことには気をつけてください。

・装飾の設定はすべての画像に適用される。
・プラグインで設定しているわけではないので、WordPressのテーマ(テンプレート)を変更した場合は、変更後のテーマにも今回の設定を行う必要がある。

以上の点に問題がなければぜひ使用してみてください。
 

装飾の設定はすべての画像に適用されますが、個別で以下のように入力すれば装飾の設定を無しにできます。