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

外枠アイキャッチ画像

WordPressでブログを書いていると画像によっては外枠を付けたいものがありますよね。こんなふうに。

↓これは画像に外枠罫線が付いたものです。

外枠罫線のテスト

画像の枠と背景の違いが分かりにくいと外枠との境目がわかりにくくなってしまいます。

↓この下の画像はさっきと同じ画像だけどテキストなのか画像なのかわかりにくいですよね。

外枠罫線のテスト

パソコンやスマホのスクリーンショットはとくに画像なのかテキストなのか分かりにくいです。

あらかじめ画像編集ソフトを使えば外枠付きの画像を作ることもできますけど加工の手間が煩わしいのでなるべく画像とは別に枠線を付ける方法をやってみます。

ちなみにWordPressでビジュアルエディタを使っている人向けの内容です。HTMLを直接書くテキストエディタモードの人やMarsEditなどのブログエディタソフトを使う人は対象ではないのでご注意ください。

※追記:画像の貼り付けがコピペでできてclass名を自動で挿入してくれるプラグインを使えばもっと簡単に外枠を付けられます。WordPressでブログ書いてる人は必見です。⇒「OnePress Image Elevator」の使い方と設定まとめ

スポンサーリンク

CSSに枠線を指定する

CSSファイルに以下の記述を追記します。

「img.qwq」はimgタグの中のclass=”qwq”の部分を指定しています。

なぜqwqという意味の無い文字を使っているかというと他のclassとかぶることがなく左手で簡単に入力出来るからです。

class名はqwqである必要はないので自分の使いやすいclass名を作ってください。

枠線の色はよく使われる #dddddd にしていますがここも自分の好きな色にしてください。自分は1pxのグレー線(#d9d9d9)を使っています。

画像を挿入する

まずビジュアルエディタで普段と同じように外枠が無い画像を挿入します。そして画像をクリックすると鉛筆マークのボタンが現れるのでクリックします。

画像編集ボタン

すると画像の詳細な編集画面が出てくるので、

クリップボード01

「画像CSSクラス」の欄に枠線用に作成したclass名を入力します。

するとめでたく画像に外枠が追加されます。

外枠罫線のテスト

ちなみに他に設定してあるclassがあったとしても上書きではなく追記されます。

例えば中央揃えのclassが指定されている画像に外枠用のclassを付けると両方とも適用されます。なので単機能のclassを作っておけば何かと使い勝手が良いです。

CSSのclassを使って枠線を付けるメリット

この方法だとclass名を自分で作る下準備がめんどくさいですがいろいろメリットがあります。

画像にあらかじめ外枠を付ける必要が無い

後から外枠を付けたい画像だけを編集するので画像を用意する時間を短縮することができます。

デザインを後から変更できる

CSSでデザインを変更すれば設定してある画像すべてを一括で変更することができます。ブログのイメージに合わせて色を変えたいとか太さを変えたいとか、要望が出てきた時に一括で変更することができます。

外枠の有り無しを使い分けられる

境界線がハッキリしている画像は外枠を付ける必要はありませんし広がりを見せるために外枠を付けたくない画像もあります。

他のclassが適用してあっても気にせずにborderだけを追記できる

先程も書きましたが最初から設定されているCSSはそのままで外枠用のclassが追記されるのでデザインが崩れることをあまり心配する必要無く使うことができます。

簡単に外枠を付けられる

クリック3回→class名の入力→Tab4回→Enter

これだけで外枠を設定できます。画像編集ソフトで外枠を付けて保存する操作よりは楽かなぁと。ただし枚数が多い場合は画像編集ソフトで一括処理をしたほうが楽なこともあります。

外枠の有り無しを使い分けたい場合に使う

「全部の画像に外枠が付くようにすれば良いじゃん」という声が聞こえてきそうですが逆に外枠を付けたくない画像もあるんですよね。アプリのアイコンとか。

↓外枠を付けるとこんな感じになってしまいます。

まとめ

  • WordPressのビジュアルエディタのままブログを書きたい
  • 画像によって外枠の有り無しを使い分けたい
  • でも画像編集ソフトで外枠を付けるのが面倒くさい

という人向けのやり方かなと。

同じように思っている人のヒントになれば良いなと思います。

WordPressでビジュアルエディタを使っているならOnePress Image Elevatorのほうがおすすめです。

他にもカスタマイズ系の記事として見出しのデザインの記事などもあるのでどうぞ。

スポンサーリンク

このページのシェア・保存はこちら

Amazonでの買い物について

大きな買い物をするならAmazonチャージがおすすめ。チャージ金額に応じて余分にポイントがもらえます。
プライム会員ならさらにポイント上乗せ(学生はPrime Student

スポンサーリンク
スポンサーリンク

著者のフォローはこちら

名前:
Twitter
YouTube

ーーー

制作物:「ノイズレスサーチ

プロフィール
問い合わせフォーム
当サイトご利用時の注意事項

記事が良いと思ったら、Twitterでツイートしたり、ブログなどで紹介してくださると嬉しいです。よろしくお願いします。

『WordPressの画像に枠線を付ける方法』へのコメント

  1. 名前:WordPressの特定の投稿画像に枠線を付ける方法 - Life Jam 投稿日:2016/10/19(水) 22:43:16 ID:b8dae56ea 返信

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

  2. 名前:記事の画像に枠をつけたい – Paper's Program Note 投稿日:2018/03/15(木) 23:14:14 ID:aa0754fc6 返信

    […] こちらにそのままの記事がありましたので ご紹介します http://pasokatu.com/2450 […]

  3. […] パソ活ラボ『WordPressの画像に枠線を付ける方法』 […]

  4. 名前:WordPressの画像に枠線をつけてみた | カッパチャレンジ 投稿日:2019/03/24(日) 10:49:26 ID:bff81566a 返信

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

コメント(本文のみでOK。URL含むコメントは承認待ちになります)

メールアドレスが公開されることはありません。