WordPressで画像に枠線をつける方法

こんにちは。

やらしみずです。

最近画像を貼ることが多いのですが、背景が白いので白の比率が多い画像を貼ると存在感がなくてとても見づらかったです笑

そこで、めちゃくちゃ簡単なことなんですが、Wordpressで画像に枠線をつける方法を共有していきたいと思います。

CSSを書く

投稿のテキストに直接CSSを書いても確かに画像の周りに枠線はつきますが、そうすると次にまた着けたいとなった時に困るので、全体の見た目を管理しているstyle.cssに書いていきます。

ただ、私はそれでも怖いので、次の方法でやります笑

自身のサイトを表示し、「カスタマイズ」画面を開きます。

カスタマイズ画面を開いたら、左のメニューから「追加CSS」を選択します。

選択するとCSSを書くための枠が出てくるので、そこに下記のコードを入れて、「公開」をクリックします。
※枠線の色等を変更したかったりした場合には、数値を変えて利用してください。

画像にclass名をつける

style.cssに書いたことで、class名「waku」をつけた画像ファイルには黒い枠が付くようになったはずです。
なので、投稿画面に戻り、枠線を着けたい画像にclassを追加してあげます。

以上で画像に枠線が追加されるようになったはずです！！

最後に

CSSで装飾ができると知っている方は結構いますが、同じ処理を書かないためのstyle.cssをうまく使えていない方が意外と多いです。

基本的には投稿のページでCSSを書くことはしない方が無難なので、他にも自分でなにか装飾を行いたい場合には、今回と同じようにclass名やidに対して装飾をする設定を書き、投稿自体にはclass名等を書くだけで済むようにしましょう。

修正も圧倒的に楽ですしね！！！