【コピペで1分】WordPressの画像に自動で「枠線（ボーダー）」をつける超カンタンな方法

ブログ記事にスクリーンショットや、背景が白いイラスト・図解を載せたとき、「画像の境界線が分からなくなって、どこからどこまでが画像なのか見づらい…」と困ったことはありませんか？

特に記事の背景色（白）と、画像の背景色（白）が同じだと、完全に同化してしまってレイアウトが引き締まりません。

かといって、アップロードする前に1枚ずつペイントやPhotoshopで枠線をつけに行くのは、あまりにも面倒で時間がかかりますよね。

今回は、CSSをたった数行コピペするだけで、ブログ内のすべての画像に自動で「うっすらとした上品な枠線と影」をつける超カンタンな方法を解説します！

ビフォー・アフターで見る効果

実際に、枠線があるかないかでどれくらい見やすさが変わるか比較してみましょう。

Afterの方が、記事の文字と画像の境界線がはっきりして、本物の「本」や「メディア」のようにグッと洗練された印象になりますよね。

コピペで1分！自動で枠線をつけるCSSコード

以下のコードをお使いのWordPressの「外観」＞「カスタマイズ」＞「追加CSS」に貼り付けるだけで、これまでに投稿した過去の画像も含めて、すべてに一瞬で適用されます。

/* 記事内のすべての画像に自動で薄い枠線と影をつける */
.single .contents_area img {
    border: 1px solid #e2e8f0; /* 薄いグレーの枠線 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* ふんわりとした影 */
    border-radius: 4px; /* 角をほんの少し丸くする */
    box-sizing: border-box;
}

これだけで、記事内の画像（.single .contents_area img）すべてに、自動的に枠線と影、そして角丸が適用されます！

【注意点】すべての画像に効かせたくない場合の対策

基本的にはこの記事内の画像すべてに効くのが便利ですが、たまに「アフィリエイトのバナーや、透過させたいアイコン画像には枠線をつけたくない！」というケースがあります。

そんな時は、特定のクラスがついた画像を除外するように、先ほどのCSSに「除外ルール」を1行書き足してあげるのがプロの実務テクニックです。

/* 「border-none」クラスがついた画像には枠線をつけない */
.single .contents_area img:not(.border-none) {
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    box-sizing: border-box;
}

このように :not(.border-none) と書いておくことで、画像ブロックの高度な設定から「追加のCSSクラス」に border-none と手動で入力した画像だけ、枠線を無効化することができます。

まとめ

ほんの数行のCSSを追加するだけで、ブログ内の視認性（読みやすさ）は劇的にアップします。画像1枚ずつの加工から解放され、記事執筆の時間を増やしていきましょう！