画像に枠線をつける-CSS

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

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

画像枠線なし
画像枠線無し

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

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

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

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

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

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

のようになりました。

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

画像枠線あり
画像枠線あり

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です