≫メルマガにてブログ無料相談OKです。

WordPressに挿入した画像に枠線を付ける方法【CSSで簡単設定】

はじめ

  • WordPressに挿入した画像の縁に枠線を付けたい。
  • CSSを使って枠線を設定したい。
  • 画像編集ソフトを使わない方法が知りたい。

本記事では、上記の悩みを解消していきます。

この記事を読めば、WordPressに挿入した画像に枠線を付ける方法を知ることができますよ。

 

1. WordPressに挿入した画像に枠線を付ける方法【CSSで簡単設定】

CSSで簡単に画像に枠線を付けるための方法は以下の手順で行うことができます。

CSSで枠線を付ける方法
  1. CSSにコードを追記する。
  2. 枠線を付けたい画像のCSSクラスを指定する。

 

1-1. CSSにコードを追記する。

「外観→カスタマイズ→追加CSS」又は「外観→テーマ編集→style.css」で編集画面を開きます。

そこに、CSSに枠線のデザインコードを追記していきます。

「枠線のみ」のCSSコードは以下の通りです。

コード
img.grid {border: solid 2px #3E3E3E;}
変更箇所
  • 「img.grid」の黄色箇所は、class名なのでお好みのものでOK!
  • 「solid 2px」の黄色箇所は、枠線の太さを表す要素ですので、お好みの太さに設定してください。
  • #3E3E3E」の黄色箇所は、枠線の色を表す要素で、お好みの色に設定してください。

すると以下のように挿入した画像に枠線が表示されます。

 

「枠線+影」のCSSコードは以下の通りです。

コード
img.bigshadow {border: solid 2px #3E3E3E;box-shadow: 5px 5px 5px #d3d3d3;}
変更箇所
  • 「box-shadow: 5px 5px 5px」の黄色箇所は、「影の水平距離、垂直距離、ぼかしの大きさ」の要素となっているので、お好みの値に設定して下さい。
  • #d3d3d3」の黄色箇所は、影の色を表す要素で、お好みの色に設定してください。

すると以下のように挿入した画像に枠線と影が表示されます。

 

また、HTMLカラーコードがわからない方は、以下のサイトが参考になりますので活用してみてください。

以上のコードを追記したら、CSS設定は以上になります。

 

1-2. 枠線を付けたい画像のCSSクラスを指定する。

CSSの設定が終わったら、枠線を付けたい画像に「枠線」のCSSクラスを指定していきます。

まずは、画像を挿入します。

 

挿入した画像の「編集」を選択

挿入した画像の「編集」を選択します。

 

画像CSSクラスにクラス名を入力

画像詳細画面の「上級者向け設定→画像CSSクラス」に先ほど設定したクラス名を入力します。

本記事の例では「grid」もしくは「bigshadow」です。

 

また、HTMLコードで記載する場合は以下の通りです。

コード
<img class="grid" src="https://〇〇〇〇〇.jpg" />
 

すると以下のように画像にCSSが反映され、簡単に画像に枠線を付けることができます。

 

2. 画像編集ソフト「GIMP」を使って画像に枠線を付ける方法

はじめ

画像編集ソフトを使って枠線を付ける方法が知りたい。

続いて、上記のお悩みをお持ちの方のために、フリー画像編集ソフト「GIMP」を使って画像に枠線を付ける方法を解説します。

GIMPを使った枠線の付け方は以下の手順です。

GIMPで枠線を付ける方法
  1. GIMPを開き、枠線を付けたい画像をGIMPに読み込む
  2. 「選択→すべてを選択」をクリック
  3. 「選択→選択範囲の縮小」をクリック
  4. 「選択→選択範囲の反転」をクリック
  5. 「編集→描画色で塗りつぶす」をクリック

 

2-1. GIMPを開き、枠線を付けたい画像をGIMPに読み込む

まずは「GIMP」を開き、枠線を付けたい画像をGIMPに読み込みます。

 

2-2. 「選択→すべてを選択」をクリック

続いて、メニューバーから「選択→すべてを選択」をクリックします。

すると、画像全体が選択範囲となります。

 

2-3. 「選択→選択範囲の縮小」をクリック

メニューバーから「選択→選択範囲の縮小」をクリックします。

すると、数値の設定(縮小量)を求められますが、この数値が枠線の太さになる数値になるので、お好みで設定しましょう。

通常であれば、「2~3px」程度で大丈夫です。

 

2-4. 「選択→選択範囲の反転」をクリック

メニューバーから「選択→選択範囲の反転」をクリックします。

 

2-5. 「編集→描画色で塗りつぶす」をクリック

最後に「編集→描画色で塗りつぶす」をクリックします。

 

すると、画像に枠線ができ、完成となります。

 

また、枠線の色を変更したい場合は、以下の箇所で描画色の変更を行いましょう。

 

また、GIMPを使ってオシャレなアイキャッチ画像の作る方法についても以下の記事でお話していますのでご参考までに。

 

まとめ

今回は、WordPressに挿入した画像に枠線を付ける方法について解説してきました。

CSSで枠線を付ける方法
  1. CSSにコードを追記する。
  2. 枠線を付けたい画像のCSSクラスを指定する。

CSSを活用すれば、画像に簡単に枠線を付ける事ができます。

枠線を付けることで、文章と画像が一体になって見ずらいという点も解決できると思いますので、

画像に枠線を付けたいと考えている方は是非参考にしてみてください。

WordPressブログの画像を最適化する7つの施策【まとめ】