WordPressで写真に影を付ける

ブログの記事に入れた画像が背景と近い色の場合は、ちょっと見づらくなってしまいます。記事部分との境を分かりやすくするために、画像に影を付けてみます。このためのプラグインもありますが、影を付けるだけならば、CSSに直接記述したほうが簡単です。

スポンサーリンク

box-shadowプロパティを指定する

CSSで影を付けるには、画像のclassに対して、box-shadowプロパティを指定します。WordPressの場合、画像を挿入すると、挿入時に指定した配置に対し、自動で下記のようなプロパティが付けられます。

左  alignleft
中央 aligncenter
右  alignright
なし alignnone

20160318-shadow-04

ですので、この配置に対応するclassに指定していきます。

外観」-「テーマの編集」で、目的のCSSに記述します。たとえば配置位置が「なし」に対して指定するなら次のようになります。

img.alignnone {
    box-shadow: 4px 4px 3px #CECECE;
}

20160318-shadow-03

それぞれの値は、次のようになります。縦方向と横方向のみ必須です。

box-shadow: 横方向 縦方向 ぼかし 広がり 色  向き(外内)

影を指定する前は、下のようだった画像が

20160318-shadow-01

次のように影が付きます。

20160318-shadow-02

スポンサーリンク

シェアする

フォローする