WordPressでブログを書いていると画像によっては外枠を付けたいものがありますよね。こんなふうに。
↓これは画像に外枠罫線が付いたものです。
画像の枠と背景の違いが分かりにくいと外枠との境目がわかりにくくなってしまいます。
↓この下の画像はさっきと同じ画像だけどテキストなのか画像なのかわかりにくいですよね。
パソコンやスマホのスクリーンショットはとくに画像なのかテキストなのか分かりにくいです。
あらかじめ画像編集ソフトを使えば外枠付きの画像を作ることもできますけど加工の手間が煩わしいのでなるべく画像とは別に枠線を付ける方法をやってみます。
ちなみにWordPressでビジュアルエディタを使っている人向けの内容です。HTMLを直接書くテキストエディタモードの人やMarsEditなどのブログエディタソフトを使う人は対象ではないのでご注意ください。
※追記：画像の貼り付けがコピペでできてclass名を自動で挿入してくれるプラグインを使えばもっと簡単に外枠を付けられます。WordPressでブログ書いてる人は必見です。⇒「OnePress Image Elevator」の使い方と設定まとめ
もくじ
CSSに枠線を指定する
CSSファイルに以下の記述を追記します。
|
1 2 3 |
img.qwq { border:1px solid #dddddd; } |
「img.qwq」はimgタグの中のclass=”qwq”の部分を指定しています。
なぜqwqという意味の無い文字を使っているかというと他のclassとかぶることがなく左手で簡単に入力出来るからです。
class名はqwqである必要はないので自分の使いやすいclass名を作ってください。
枠線の色はよく使われる #dddddd にしていますがここも自分の好きな色にしてください。自分は1pxのグレー線（#d9d9d9）を使っています。
画像を挿入する
まずビジュアルエディタで普段と同じように外枠が無い画像を挿入します。そして画像をクリックすると鉛筆マークのボタンが現れるのでクリックします。
すると画像の詳細な編集画面が出てくるので、
「画像CSSクラス」の欄に枠線用に作成したclass名を入力します。
するとめでたく画像に外枠が追加されます。
ちなみに他に設定してあるclassがあったとしても上書きではなく追記されます。
例えば中央揃えのclassが指定されている画像に外枠用のclassを付けると両方とも適用されます。なので単機能のclassを作っておけば何かと使い勝手が良いです。
CSSのclassを使って枠線を付けるメリット
この方法だとclass名を自分で作る下準備がめんどくさいですがいろいろメリットがあります。
画像にあらかじめ外枠を付ける必要が無い
後から外枠を付けたい画像だけを編集するので画像を用意する時間を短縮することができます。
デザインを後から変更できる
CSSでデザインを変更すれば設定してある画像すべてを一括で変更することができます。ブログのイメージに合わせて色を変えたいとか太さを変えたいとか、要望が出てきた時に一括で変更することができます。
外枠の有り無しを使い分けられる
境界線がハッキリしている画像は外枠を付ける必要はありませんし広がりを見せるために外枠を付けたくない画像もあります。
他のclassが適用してあっても気にせずにborderだけを追記できる
先程も書きましたが最初から設定されているCSSはそのままで外枠用のclassが追記されるのでデザインが崩れることをあまり心配する必要無く使うことができます。
簡単に外枠を付けられる
クリック3回→class名の入力→Tab4回→Enter
これだけで外枠を設定できます。画像編集ソフトで外枠を付けて保存する操作よりは楽かなぁと。ただし枚数が多い場合は画像編集ソフトで一括処理をしたほうが楽なこともあります。
外枠の有り無しを使い分けたい場合に使う
「全部の画像に外枠が付くようにすれば良いじゃん」という声が聞こえてきそうですが逆に外枠を付けたくない画像もあるんですよね。アプリのアイコンとか。
↓外枠を付けるとこんな感じになってしまいます。
まとめ
- WordPressのビジュアルエディタのままブログを書きたい
- 画像によって外枠の有り無しを使い分けたい
- でも画像編集ソフトで外枠を付けるのが面倒くさい
という人向けのやり方かなと。
同じように思っている人のヒントになれば良いなと思います。
WordPressでビジュアルエディタを使っているならOnePress Image Elevatorのほうがおすすめです。
他にもカスタマイズ系の記事として見出しのデザインの記事などもあるのでどうぞ。
[…] WordPressの画像に枠線を付ける方法 […]