WordPressの画像に枠線を付ける方法まとめ。CSSコピペでOK

wordpressの画像に枠線

WordPressで特定の画像に枠線を付けてメリハリ・境界を付けたいと考える人は多いと思います。

当サイトでも画像を使うことがありますが、写真ならまだしも背景や辺の一部が白い画像だと境界が無くて文字だか良くわからないときがあり枠線を付けたいと常日頃から思っており改善した次第です。

方法としては

  1. CSSを追加する
  2. 画像にCSSクラスを指定する

だけの簡単ステップでCSSの意味が分からなくてもOKなので、興味のある方は読み進めていただければと思います。

※以下が枠線を付けた結果。

妊婦のイラスト

 

分かりにくい画像の境界

では、特定の画像に枠線を付ける方法をサクッと紹介していきます!

WordPressのカスタマイズ画面を開く

まず最初にWordpressのカスタマイズ画面から追加CSSを開きます。

  1. ログインして自分のサイトを開きダッシュボード上部のカスタマイズをクリック
  2. 左メニューバーの下部から追加CSSをクリック
wordpressのカスタマイズ画面

CSSを追加する

文字通り見たまんまですが追加CSSを開いたら画像に枠線を付けられるようにCSS(スタイルシート言語)を追加しますが、黄色い枠で囲ってある3行をコピーして下さい。

以下の3行をコピー

img.w {
border:1px solid #c7c7c7c7;
}

以下の画像のように追加欄に貼り付けましょう。

cssカスタマイズ

貼り付けたら公開をクリックして保存。

 

ちなみにコピペしたCSSの意味としては

img.w {
border:1px solid #c7c7c7c7;
}

  • w:クラス名(任意の文字列でOK)
  • border:枠線をカスタマイズするよという命令
  • 1px:枠線の太さ
  • solid:枠線のスタイル
  • #○○○○○○:枠線の色

コピペしたCSSだとCSSクラスがwの画像を1pxの直線(solid)・グレー色(#c7c7c7)の枠線で囲うよ!

という意味です。

 

wは任意の文字列でOKなので、分かりやすくするためにwakusen・wakuなどでも構いません。

私は後でクラスを付けるときに作業が楽になるのでwの一文字にしています。

 

またsolidをdoubleにすると二重線になりますし、#○○○○○○部分は色指定なので自由に色も変えられます。

CSSについては取っ付きにくいですが5分もあれば基礎は理解できるので興味のある方は調べてみてください。

私自身もあまり詳しくはないので、、、

参考⇒border-style/枠線の種類

画像にクラスを付ける

後は画像に「w」というクラスを付けるだけですが、付け方はいたって簡単で記事投稿画面から画像をクリック⇒編集を開きます。

画像の編集

以下の編集画面が開くので画像CSSクラス欄に先程指定したクラス名「w」を入力して右下の更新をクリック。

wというクラスを指定

これで画像CSSクラスにwと入力した画像のみに枠線が付くようになります!

上の画像はクラス名を入力してないので枠線無しですが、下の画像はwと入力したので枠線付です。

※記事投稿画面上では枠線は確認できないので確認するには必ずプレビューをして下さい。

wというクラスを指定

使い方

追加CSSに一度書いてしまえば後は画像編集から画像CSSクラスにクラス名を入力するだけで枠線で囲われるようになります。

任意の画像だけを枠線で囲えるのでとっても便利でオススメ!

 

また追加CSSは枠線だけで何種類も追加できるので二重線や破線、色などを変えて楽しむことができます。

  • w:細いグレーの枠線
  • w1:太い黒い枠線
  • w2:破線の青い枠線

などなど、、、

他の方法

CSSなんて意味が分からない!

というときには画像編集ソフトを使って枠線を付けましょう。

私の愛用しているJTrimというソフトなら画像を開いて立体枠を付けるをクリックするだけでオサレな枠を付けることができます。

立体枠を付ける

既に見えてますが余計な物を取り払った完成系がコチラ。

へこませた画像

枠を付ける以外にもトリミングや切り抜きなど画像編集の使い勝手の良さはピカイチのオススメソフトです。

Jtrimのダウンロードはココから。

見やすさも重要

今回は画像に枠線を付けてみましたが、わざわざ付けた意味はページを見やすくするためです。

私自身が客観的に自分のサイト、特に画像を使った記事が見にくく思えたので改善した次第です。

自分自身のことは俯瞰で見るようにしていますが、これからは自分のサイトも俯瞰で見ていく所存です。

ぜひ皆さんも自分に関する全てのことを第三者的な視点から見てみましょう!

今まで気が付かなかった”改善点”が見えてくるはずですから、、、


副業で稼ぎたいあなたへ

副業で稼ぐために必要なノウハウやツールを無料でGETできるキャンペーンをまとめた特設ページを作りました。

本当にオススメできるキャンペーンのみを掲載&随時更新をしているのでぜひチェックしてください!


こちらでは私が副業アフィリエイトで稼げるようになった秘密をまとめた、『アフィリエイトで月収100万円を稼ぎたい”あなた”に見て欲しいマニュアル』をLINEで友達登録してくれた方に無料プレゼントしています。

アフィリエイトの基礎知識、具体的なノウハウ、そして副業が勤務先にバレない方法も収録しており、誰でも1から学べて始めることができます。

少しでも興味があれば気軽に登録して下さいね!

その他、副業全般に関する質問・相談も受付中ですm(_ _)m


⇒友達追加はココから

wordpressの画像に枠線


副業ブームの前に始めよう

アフィリエイトマーケットでは誰しもが稼げるようになる正しく再現性の高い方法を無料のメルマガ講座で公開中です。

そして登録いただいた方には『月収100万円を稼ぐための基礎知識・ノウハウを収録した限定マニュアル』をプレゼント中!

※日本政府が今年度中に副業を解禁するようですが、2018年6月現在では原則禁止です。

解禁されてからではなく、先行者利益を得られる今!ライバルが少ないうちにアフィリエイトを始めることをオススメします。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA