追加cssを使って画像に枠線をつけよう!

サイトが見えにくい問題、次は画像に関してです。

これまでのサイトのスクショです。スクリーンショットを使用しているので、どちらも背景が白。かなーりわかりにくいですよね。

視認性向上のため、取り込んだ画像に枠をつけたいと思います。

ここでも追加cssを使用します。以下のコードを使用します。

img{border: solid 1px #3E3E3E;}

コードをコピペして、追加css(外観→カスタマイズ→追加css)に追加!

枠線がつきました〜!!

特定の画像に枠線をつけたい場合は、クラスを確認して指定します。

検証ツールでクラスを確認(画像を選択して右クリック検証)

検証ツールの右下を確認すると、選択した画像のclassは wp-image-183だとわかります。

img.wp-image-183{border: solid 1px #3E3E3E;}

と書き直しみるとこの通り!

指定した画像だけ枠線をつけることができます!

追加cssを使える様になると、サイトの装飾ができるようになりますね〜