今回は、WordPressの投稿に表示する画像に対してCSSで枠線を付けてあげる方法を紹介します。
投稿に画像を入れるとデフォルトではそのまま表示されます。背景色と別の色合いの画像なら気にする事は無いが、背景と同色の画像だと何処から画像なのかが分かりづらくなってしまいます。
枠線を付ける事でそれが解消されるかと思いますので、今回のCSSを参考にしてみて下さい。
WordPressの投稿画像のCSSクラス
今回紹介する投稿用のエディタはGutenbergと言われるWordPressの標準エディタです。
まずは投稿画像のCSSクラスを調査します。
下記の写真の通り、デベロッパーツールでクラスを調査すると「.wp-block-image」と言うクラスが付けられているのが分かります。
画像に枠線を付ける
続きまして、上記で見つけたCSSクラスに対して枠線を付けていきます。（コピペでOK）
枠線は「border: solid」を使っていきます。実際の記述は下記の様な感じです。
/*投稿画像の枠線*/
.wp-block-image {
border: solid 2px #ddd;
}
デフォルトの場合だと、下記の様な白い画像だと背景と同化してどこまでが画像なのかが分かりづらいです。
しかし先ほどのCSSを追加すると、薄い枠線で画像が囲われていてどこまでが画像なのかがはっきりと分かる様になりました。
※テーマによっては「.wp-block-image」のクラスを消している、もしくは別の名前に変更している場合もあります。その場合はデベロッパーツールで該当するクラス名を見つけ出して下さい。（大抵は.wp-block-imageになっているかと思います。）
以上が「WordPressの投稿画像全てに枠線を付ける方法：CSSクラス」でした。
画像は頻繁に使う要素だと思うので、今回の様なちょっとしたデザインの追加がページの全体の見易さに繋がってくると思います。
