【WordPress】記事内の画像に影をつける方法

自分のサイトに画像を載せたとき、そのまま平面に貼り付けるよりも
ちょっとした立体感を加えることで見栄えも随分良くなります。
今回はWordPressの記事内の画像に影をつける方法を紹介します。

画像に影をつけるにはプラグインで設定する方法と、CSSで設定する方法がありますが、影をつける程度なら、わざわざプラグインを導入するほどでもないので、CSSで設定することをオススメします。

画像に影をつけるCSSの設定方法

では具体的な作業手順です。
下記の枠内のタグをコピーします。

img.alignnone {
box-shadow: 5px 5px 8px #333333;
}

WordPressの「外観」→「テーマの編集」から
目的のCSSを探します。

スタイルシートの一番下のスペースに
先ほどのタグを貼り付けて保存します。

以上で設定完了です！

まるで画像加工ソフトで作成したかように影がつきます。

役立つ豆知識

先ほどのタグの内容について説明します。

img.alignnone {
box-shadow: 5px 5px 8px #333333;
}

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

左　　alignleft
中央　aligncenter
右　　alignright
なし　alignnone

今回はalignnone(なし)と設定しているので、
下方向の影(5px)、右方向の影(5px)、ぼかし範囲(8px)、色(#333333)の設定でうまく表示されます。
色の#333333は影の色をグレーに設定しているという意味です。

HTMLタグなどで色を指定する方法は主に2種類あります。
1つめは、#の後に(#FF0000など)6ケタの数字やアルファベットを用いる方法
2つめは、色の英語を直接記載する方法(font color=”red“など)
があります。憶えておくと便利ですよ！
(カラーコードについてはこちらを参照してみてください)

スポンサードリンク