Life Jam

専門知識ゼロの初心者がWordPressに挑戦中

WordPress

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

2016/10/26

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

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

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

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

画像枠線なし

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

画像枠線あり

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

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

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

スポンサーリンク

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

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

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

画像枠線サンプル

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

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

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

色は以下のサイトを参考に。
参考WEB色見本 原色大辞典 - HTMLカラーコード

画像挿入時にスタイルを適用させる

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

ビジュアルエディタの場合

画像枠線02

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

画像枠線03

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

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

テキストエディタの場合

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

枠線を付ける別の方法

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

一括で枠線を付ける

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

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

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

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

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

画像編集ソフトで枠線を付ける

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

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

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

参考サイト

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

WordPressの画像に枠線を付ける方法

まとめ

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

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

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

-WordPress

スポンサーリンク