【WordPress】3分でできる画像に影をつける方法

記事内の画像に影をつける方法を紹介します。

別に影なんかついてなくてもいいのですが、個人的には影がついてたほうがいい気がする。語言化できないけどなんかいい気がする。

影をつけるとこんな感じ。

CSSをチョロっといじるだけなので一瞬で終わります。ということでやっていきましょー。

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

結論から言うと以下をCSSファイルに記述すればOKです!

 

順番に説明しますね。

まず、影を適用する対象は以下のClassです。

これらのClassはWordPressで記事内に画像を挿入した際に勝手に付与されるClassで、選択して表示位置によって付与されるClassが異なります。

  • alignleft(配置位置:左)
  • aligncenter(配置位置:中央)
  • alignright(配置位置:右)
  • alignnone(配置位置:なし)

対象のClassに対して『box-shadow』プロパティを指定するのですが、名前からも想像つくようにこいつが影をつけるプロパティです。

box-shadow』プロパティに指定している値は左から順に以下のように解釈されます。

  • 1番目の値:水平方向の影の距離。正の値を指定すると右へ、負の値を指定すると左へ影が移動する。
  • 2番目の値:垂直方向の影の距離。正の値を指定すると下へ、負の値を指定すると上へ影が移動する。
  • 3番目の値:影のぼかし距離。値が大きいほど影端のぼかしが強くなる。
  • 4番目の値:影の色。

ここの設定値はお好みですが、当ブログの場合は『box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);』を指定しています。

 

記述先のCSSファイルについて

記述先のCSSファイルはここだ!と決まりがあるわけではないですが、子テーマが用意してあるなら子テーマのCSSに記述してください。

※親テーマのCSSに記述すると、テーマを更新した際にファイルが上書きされ追記した内容が消えてしまうことがあるため。

当ブログではテーマにLION MEDIAを利用しているので、

外観 > テーマの編集 > LION MEDIA Child を選択 > style.css を選択して編集しました。

 

簡単にできるので、ぜひ試してみてください!