
WordPressに挿入した画像の縁に枠線を付けたい。CSSを使って枠線を設定したい。画像編集ソフトを使わない方法が知りたい。
本記事では、上記の悩みを解消していきます。
この記事を読めば、WordPressに挿入した画像に枠線を付ける方法を知ることができますよ。
1. WordPressに挿入した画像に枠線を付ける方法【CSSで簡単設定】

CSSで簡単に画像に枠線を付けるための方法は以下の手順で行うことができます。
- CSSにコードを追記する。
- 枠線を付けたい画像の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カラーコードがわからない方は、以下のサイトが参考になりますので活用してみてください。
色の名前とカラーコードが一目でわかるWEB色見本「原色大辞典」
以上のコードを追記したら、CSS設定は以上になります。
1-2. 枠線を付けたい画像のCSSクラスを指定する。(ClassicEditorの場合)
CSSの設定が終わったら、枠線を付けたい画像に「枠線」のCSSクラスを指定していきます。

まずは、画像を挿入します。
挿入した画像の「編集」を選択
挿入した画像の「編集」を選択します。
画像CSSクラスにクラス名を入力
画像詳細画面の「上級者向け設定→画像CSSクラス」に先ほど設定したクラス名を入力します。
本記事の例では「grid」もしくは「bigshadow」です。
また、HTMLコードで記載する場合は以下の通りです。
<img class="grid" src="https://〇〇〇〇〇.jpg">
すると以下のように画像にCSSが反映され、簡単に画像に枠線を付けることができます。

1-3.枠線を付けたい画像のCSSクラスを指定する。(Gutenbergの場合)
Gutenbergにてまず画像を記事内に挿入します。
画像ブロックの右側のウィンドウ(ブロックの詳細設定)の一番下にある「高度な設定」に以下のように記載します。

Gutenbergでは非常に簡単ですね。以上です。
ちなみに、高度な設定の表示が私と同じではない方も多いかと思います。この箇所はプラグインや使っているWPテーマによって表示が変わりますので気にしなくてOKです。
2.Gutenbergエディタに対応済みのWordPressテーマを導入すれば画像への枠・影付けは一瞬です。
まずは、上記の動画を見てください。
ね?簡単ですよね。
WordPressで画像に枠を付ける最も簡単な方法は、枠・影を付ける機能が元々付いている「WordPressテーマ(テンプレート)」を使う事です。
ちなみに、私のブログは「SWELL」という有料のWordPressテーマを使っていますが、もちろん画像に「枠・影・写真フレーム」にする機能がついています。
恐らく、多くの方は最初「有料のテーマを使いたくない!」と思うかなと。事実私がそうでしたので…。
でもね、ブログを続けていくと間違いなく有料テーマに移行したくなりますよw
何ていったって、機能性が格段にアップし記事を書くのが効率化させるんですから。
正直、もしこの記事を読んでくれているあなたが「収益を目的としたブログ」を運営しているなら尚更です。現にこのように画像に枠を付ける作業を検索しているわけですが、有料テーマを使えばこういった時間を削減し、最大限ブログ記事の執筆に充てることができますからね。
ブログ記事を書かない事には、ブログでお金は稼げませんからね。
なので、ブログ運営においてWPテーマは必要経費なので、個人的には機能性が高いWordPressテーマを購入することをおすすめします。
ちなみに私が使ってる「SWELL」は最高ですよ。
これまでにTCD(CORE)、ストーク・スワワー、SANGOと有料テーマを使って来ましたが、過去で最も機能性が高いWordPressテーマだと感じておりますので、間違いなく「SWELL」をおすすめします。
SWELL以外なら、以前まで使っていた「SANGO」がおすすめです。
3. 【番外編】画像編集ソフト「GIMP」を使って画像に枠線を付ける方法


画像編集ソフトを使って枠線を付ける方法が知りたい。
続いて、上記のお悩みをお持ちの方のために、フリー画像編集ソフト「GIMP」を使って画像に枠線を付ける方法を解説します。
GIMPを使った枠線の付け方は以下の手順です。
- GIMPを開き、枠線を付けたい画像をGIMPに読み込む
- 「選択→すべてを選択」をクリック
- 「選択→選択範囲の縮小」をクリック
- 「選択→選択範囲の反転」をクリック
- 「編集→描画色で塗りつぶす」をクリック
3-1. GIMPを開き、枠線を付けたい画像をGIMPに読み込む
まずは「GIMP」を開き、枠線を付けたい画像をGIMPに読み込みます。

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

すると、画像全体が選択範囲となります。
3-3. 「選択→選択範囲の縮小」をクリック
メニューバーから「選択→選択範囲の縮小」をクリックします。

すると、数値の設定(縮小量)を求められますが、この数値が枠線の太さになる数値になるので、お好みで設定しましょう。
通常であれば、「2~3px」程度で大丈夫です。

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

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

すると、画像に枠線ができ、完成となります。
また、枠線の色を変更したい場合は、以下の箇所で描画色の変更を行いましょう。

また、GIMPを使ってオシャレなアイキャッチ画像の作る方法についても以下の記事でお話していますのでご参考までに。
まとめ
今回は、WordPressに挿入した画像に枠線を付ける方法について解説してきました。
- CSSにコードを追記する。
- 枠線を付けたい画像のCSSクラスを指定する。
CSSを活用すれば、画像に簡単に枠線を付ける事ができます。
枠線を付けることで、文章と画像が一体になって見ずらいという点も解決できると思いますので、
画像に枠線を付けたいと考えている方は是非参考にしてみてください。

【PR】現役ブロガーの実践ノウハウをこっそり教えちゃいます。
当サイトでは、私が月7桁稼ぐまでに至ったノウハウ・現在実践しているノウハウを「ツヨシウェブSHOP」で有料コンテンツとして販売しております。実際にブログで月7桁稼いだ実績を持っており、また現在もブログ収益で生活をしていますので情報の信頼性は高いと感じています。
しかし、有料コンテンツで提供している情報は「楽して稼ぐ!」というものにはなっておらず、これから私と同じようにブログ・発信者として生活していきたい方に向けて書いておりますので「継続的に作業できる方のみ」ご購入いただければ幸いです。
また、コンテンツには自信を持って提供させて頂いておりますので、もし購入後ご不満がございましたら「返金対応」させて頂きます。