Wordpress 投稿画面 画像 影 プラグイン
当記事では、記事内の画像に影をつけて画像を立体的に魅せる方法を解説します。

記事の画像はそのまま貼り付けるよりも少しシャドウを落とした方が、画像がとても映えて見えますよね。
クオリティの高いページに魅せるには、画像のような視覚的な部分に工夫を凝らすと、瞬間的にサイト訪問者のイメージに働きかけることができます。

WordPressの投稿記事の画像に影をつけるには、CSSでスタイルをつけていきますが、やり方はいくつかありますので、ぜひ使いやすいやり方でやってみてくださいね^^

 

 

個別に影のスタイルを指定する

画像一つ一つに影にスタイルを付ける方法です。
個別にスタイルを指定するので、柔軟に影のスタイルを変えることができますが、画像のhtmlを一つ一つ設定していかなければならないため、若干の手間はあります。

 


1. design.cssにCSSを追加する

まず、テーマファイルを編集していきます。

ダッシュボードメニュー>外観>テーマの編集>design.css

にアクセスします。

この中に以下の形でCSSを記述します。
(場所はどこでもいいですが、分かりやすく一番下がいいでしょう。)

.(クラス名) {
 (CSS)
}

クラス名は任意の英数字の名前をつけます。
(CSS) には、影をつけるCSSプロパティ box-shadow を記述していきます。

例えば、こんな感じですね。

.shadow1{
	-webkit-box-shadow: 0 10px 6px -6px #777;
	-moz-box-shadow: 0 10px 6px -6px #777;
	box-shadow: 0 10px 6px -6px #777;
}

追加したら、「変更を保存」をクリックしてください。

 


2. 画像にCSSクラス名を追加する

次に、投稿画面のテキストモードを見ます。

画像は、このような形で記述されていますね。

<img class=”aligncenter” src=”(画像URL)” alt=”○○○” width=”***” height=”***” />

この中の class=”   “ の中に、1で指定したクラス名を追加します。
(class=”   ” がなければ追加します)

<img class=”(クラス名) aligncenter” src=”(画像URL)” alt=”○○○” width=”***” height=”***” />

前述の例だと、クラス名は shadow1 ですね。

すると、こんな影がつきます。

770_11

 

違うスタイルの影も作ってみましょう。

今度は shadow2 というクラス名でCSSを作成して、design.cssに記述します。

.shadow2 {
	  -webkit-box-shadow: 3px 3px 5px 1px #777;
	  -moz-box-shadow:    3px 3px 5px 1px #777;
	  box-shadow:         3px 3px 5px 1px #777;
}

そして同じように、画像のコードの class=”   “ の中に、今度は shadow2 と記述します。

すると、今度はこんな感じの影になりました。

770_13

 

 

画像の配置位置別に影をつける

一つ一つに影をつけるのが面倒という場合は、画像の配置位置で影を指定することができます。

WordPressの投稿画面での画像の配置位置は、

左 中央 右 なし

が選べますが、ここに影のCSSを指定することによって、画像の配置位置別に影のスタイルを使用する方法です。

例えば、「画像を中央に配置したときのみ影を付けたい」、あるいは、「中央に配置したときと左に配置したときの影のスタイルを別々にしたい」などとという時はこちらの方法がおすすめです。

 


■■ 実装方法

ダッシュボードメニュー>外観>テーマの編集>design.css に以下のように記述を追加していきます。

配置位置が「左」の画像に影をつける場合
img.alignleft {
(CSSプロパティ)
}
配置位置が「中央」の画像に影をつける場合
img.aligncenter {
(CSSプロパティ)
}
配置位置が「右」の画像に影をつける場合
img.alignright {
(CSSプロパティ)
}
配置位置が「なし」の画像に影をつける場合
img.alignnone{
(CSSプロパティ)
}

例えば、中央に配置した画像に影をつける場合は、このようになりますね。

img.aligncenter {
	-webkit-box-shadow: 0 10px 6px -6px #777;
	-moz-box-shadow: 0 10px 6px -6px #777;
	box-shadow: 0 10px 6px -6px #777;
}

この方法では、特にテキストモードの画像のコードをいじる必要はありません。
このままで自動的に、画像の配置位置によって指定した影のスタイルが表示されます。

 

 

投稿記事内の画像全てに影をつける

最後に、投稿記事内の画像全てに影をつける方法です。

配置位置に関わらず、個別の投稿記事にある画像に、全て同じスタイルの影が自動で付けられます。
CSSを記述しておけば、特に投稿の編集画面での手間はないですが、記事内の画像全てに影が付加されるため、影をつけたくない画像がある場合は不向きです。

 


■■ 実装方法

ダッシュボードメニュー>外観>テーマの編集>design.css に以下のように記述を追加していきます。

.post img {
    (CSSプロパティ)
}

こんな感じですね^^

.post img {
	-webkit-box-shadow: 0 10px 6px -6px #777;
	-moz-box-shadow: 0 10px 6px -6px #777;
	box-shadow: 0 10px 6px -6px #777;
}

こちらも画像のコードをいじらなくても、記事内の全ての画像に影が付加されます。