WordPressの特定の投稿画像に枠線を付ける方法

WordPressの記事内で画像を挿入することがあると思いますが、

「画像に枠が付いていた方が見やすいし、見栄えも良くなるのにな～。」

と感じたことはありませんか？

例えば、画像のふちと記事背景色が同色だった場合、境界が分かりにくくなることがあります。サイトのキャプチャ画像を貼っていると、こういったケースがよく起こりますよね。

上の1行は、記事内の本文のように見えますが、実は画像です。パッと見て分かりませんよね。

枠線を付けると境界がはっきりと認識できるようになりました。

このように、同じ画像でも枠線の有無が記事の見やすさに影響を及ぼすことがあります。画像挿入時にクラスを指定することで、上記の画像のように必要に応じて枠線を付けることも可能です。

このページでは、記事内の特定の画像のみに枠線を付ける方法を解説します。

クラス名を指定して枠線のデザインを決める

まず、スタイルシートを編集してどのような枠線を付けるのか決定します。

WordPressの管理画面で「外観」⇒「テーマの編集」⇒「style.css」の編集画面へ

/* 画像に枠線を付ける */
img.waku {
    border: solid 1px #808080; /* 枠線のスタイル 太さ 色 */
    box-shadow: 0px 0px 5px #808080; /* 影の水平方向の距離 垂直方向の距離 ぼかしの距離 色 */
}

上記のコードでこのような枠線が付きます。これで良ければコピーして「style.css」に追記してください。

「waku」というクラス名は、お好みで変更してください。自分で分かりやすくて、入力しやすいものがいいかと思います。

「border」「box-shadow」の値についても、お好みで。

「style.css」に追記を終えたら、ひとまず通常通り画像を挿入してください。

挿入した画像をクリックしたときに出てくる、「編集ボタン」をクリック。

「上級者向け設定」の中にある「画像CSSクラス」に先ほど指定したクラス名を入力し、「更新」をクリック。

これで「style.css」に追記したデザインの枠線が適用されます。

<img class="waku" src="https://〇〇〇.png" />

上記のようにimg要素にクラスを指定すれば、「style.css」に追記したデザインの枠線が適用されます。

ここまではクラスを指定することで、個別に枠線を付けるかどうかを選択できる方法を紹介しましたが、少し別の方法を挙げてみます。

「個別に選択なんてしない、挿入する画像には全部枠線を付けたいんだ！」

そのような方はこちらの方法がいいかもしれません。

WordPressの管理画面で「外観」⇒「テーマの編集」⇒「style.css」の編集画面へ

/* 画像に枠線を付ける */
.post img {
    border: solid 1px #808080; /* 枠線のスタイル 太さ 色 */
    box-shadow: 0px 0px 5px #808080; /* 影の水平方向の距離 垂直方向の距離 ぼかしの距離 色 */
}

上記のコードを追記することで、すべての投稿画像に枠線が適用されます。各値は適宜変更してください。

ただし、アフィリエイトリンク等に含まれるimgタグにも適用されてしまうので注意が必要です。

画像を挿入する前に、あらかじめ枠付きの画像を用意するという方法。

無料で利用できる画像編集ソフトがたくさんあるので、そういったものを使い事前に枠付き画像を作っておき、記事執筆時にそれを挿入する。

あとから枠線のデザインを変更したいと思ったら、再度編集したり、画像を貼りなおしたり、といった作業がが必要になってきます。…少し面倒ですね。

記事執筆にあたり、こちらの記事を参考にさせていただきました。

個別にクラス名を入力することで、枠線を付ける画像と付けない画像が必要に応じて選べます。また、クラスを複数用意しておいて、いくつか使い分けることも可能です。

スタイルシートを編集すれば、あとからデザインを変更することも簡単にできます。

一括で付ける方法や編集ソフトを利用する方法も合わせ、自分に合った方法を選択して利用してください。