WordPressの画像に枠線をつけてブログを見やすくする方法

WordPressの画像に枠線を表示する方法は、とても簡単です。
白い背景のブログに白い画像を載せると、境界がわからなくて残念な印象だったので、薄くボーダーラインを付けました。
修正したのは2点です。

style.cssの修正

「style.css」の最後に下記のコードを追加します。

/* 画像の枠線 */
img.border {
border: solid 1px #cccccc; /* スタイル,太さ,色 */
}


線のスタイルや太さ、色はお好みで変更してください。
子テーマを編集するときは、子テーマの「style.css」を変更します。

 

画像の設定

枠線を付けたい画像をクリックします。

WordPressの画像設定を開く

「 編集」ボタンをクリックします。

WordPressの上級者向け画像設定

画像詳細 > 上級者向け設定
「画像CSSクラス」に「border」と記入して「更新」ボタンをクリックします。

WordPressの枠線なし画像

背景と一体化してわかりにくかった画像が、

WordPressの枠線あり画像

断然見やすくなりました。嬉しい。

Gutenbergエディターで枠線を付けるときには、こちらをご覧ください。

Gutenbergで画像に枠線を表示する方法【WordPress】

まとめ

2ヶ所を変更するだけで、ブログの記事がぐっと見やすくなりました。
背景と同系色の画像を挿入するときには、枠線を付けるとわかりやすくて親切ですね。


画像ごとにボーダーの表示を指定するのではなく、すべての画像に無条件で表示することもできますが、広告にも枠が付いて目立ってしまうことがあるので注意が必要です。

関連記事

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

error: Content is protected !!