WordPressのブロックエディタで挿入した画像に影を付けたり消したりする方法をご紹介します。
ご利用のWordPressのバージョンやテーマによってやり方が異なることがありますのでご参考程度にご覧ください。
この記事の説明で利用している環境はWordPressバージョン5.6.1、テーマはSimplicity2 バージョン2.8.7.1になります。
画像に影を付ける
WordPressで投稿した全ての画像に影を付ける方法と、特定の画像のみに影を付ける方法をそれぞれ説明します。
全ての画像に影を付ける
WordPressの管理画面から「外観」→「テーマエディター」をクリックします。
スタイルシート（style.css）に以下の内容を記述します。
.wp-block-image img {
box-shadow: 2px 2px 4px #000000;
}
box-shadowに指定した値は左から順に、水平方向の影の距離、垂直方向の影の距離、ぼかしの強さ、影の色となります。値を任意で変更し、調整してください。
wp-block-imageはブロックエディタで画像を挿入した場合に自動的に設定されるクラス名になります。
「ファイルを更新」をクリックしてスタイルシートを保存し、画像に影が付いているか確認してください。
特定の画像に影を付ける
全ての画像に影を付けるのではなく、特定の画像に影を付けたい場合は以下のようにします。
WordPressの管理画面から「外観」→「テーマエディター」をクリックします。
スタイルシート（style.css）に以下の内容を記述し、shadowというクラスを定義します。クラス名は任意で変更して構いません。
figure.shadow img {
box-shadow: 2px 2px 4px #000000;
}
figureはブロックエディタで画像を挿入した場合に自動的に設定されるブロック要素です。
「ファイルを更新」をクリックしてスタイルシートを保存してください。
次に記事の編集画面で影を付けたい画像を選択し、「高度な設定」→「追加CSSクラス」にshadowと入力します。
記事を更新して指定した画像に影が付いているか確認してください。
画像の影を消す
WordPressのテーマによっては、ブロックエディタで挿入した画像に初めから影が設定されている場合がありますのでその影を全て消す方法、また特定の画像の影のみを消す方法をそれぞれ説明します。
全ての画像の影を消す
WordPressの管理画面から「外観」→「テーマエディター」をクリックします。
スタイルシート（style.css）に以下の内容を記述します。
.wp-block-image img {
box-shadow: none;
}
box-shadowに指定した値noneは要素に影を付けない設定になります。
wp-block-imageはブロックエディタで画像を挿入した場合に自動的に設定されるクラス名です。
「ファイルを更新」をクリックしてスタイルシートを保存し、全ての画像の影が消えていることを確認してください。
特定の画像の影を消す
全ての画像に影が付いている状態で、特定の画像の影のみを消したい場合は以下のようにします。
WordPressの管理画面から「外観」→「テーマエディター」をクリックします。
スタイルシート（style.css）に以下の内容を記述し、noshadowというクラスを定義します。クラス名は任意で変更して構いません。
figure.noshadow img {
box-shadow: none;
}
figureはブロックエディタで画像を挿入した場合に自動的に設定されるブロック要素です。
「ファイルを更新」をクリックしてスタイルシートを保存してください。
次に記事の編集画面で影を消したい画像を選択し、「高度な設定」→「追加CSSクラス」にnoshadowと入力します。
記事を更新して指定した画像の影が消えているか確認してください。
コメント