画像に枠線をつける－CSS

このオリジナルテーマ「ringo」では、以下の画像のように記事本文の画像は枠線がありませんでした。
そのままだとサイズが小さくて外側が白い画像は、以下のように背景に紛れてぱっと見ではわかりにくいです。

そのためCSSを書き加えて画像に枠線を表示させます。

やり方は、まず適当な記事ページを開いて「右クリック」→「検証」でデベロッパーツールを開きます。

デベロッパーツール部の左上の矢印をクリックして画像をクリックします。

するとその画像のHTML文がわかるので、それをセレクタとしてCSSを書き加えます。

WordPressの管理画面の「外観」→「テーマエディター」から「スタイルシート」を選択して、コードを書き加えます。

書き加えるコードは　border:　線の種類　線の太さ　色;　です。
私のサイトの記事部の画像のセレクタは「.wp-block-image」なので、コードは

.wp-block-image img{border: solid 1px;}

のようになりました。

その結果が以下の画像になります。

そのほかmarginやpaddingで余白を取ったり、余白部に色を付けたり、border-radiusで角を丸くできます。