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

  • URLをコピーしました!
はじめ

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

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

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

お洒落なサイトが誰でも作れる!

ブログを書くのが楽になるテーマ「SWELL」

  • 誰でも簡単にオシャレなブログが作れます!
  • WordPressの使いやすさがアップします!
  • キャッシュ機能とページ高速遷移機能で初心者も簡単にWordPressの高速化が可能です!
  • アフィリンクの一元管理機能が標準装備されてます!

\一度使うと他のテーマには戻れません!/

※実際に私の当ブログは「SWELL」を使って運営しており、大満足のテーマです!

この記事を書いてる人

溝口 剛
Tsuyoshi Mizoguchi

   

1986年生まれ 33歳 札幌在住
8年間会社員として働くも会社員としての生き方が嫌になり、フリーランスへ。現在はブログより年間1,000万円の収益を得ています。

この記事の内容

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クラスを指定する。(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で枠線を付ける方法
  1. GIMPを開き、枠線を付けたい画像をGIMPに読み込む
  2. 「選択→すべてを選択」をクリック
  3. 「選択→選択範囲の縮小」をクリック
  4. 「選択→選択範囲の反転」をクリック
  5. 「編集→描画色で塗りつぶす」をクリック

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

【PR】現役ブロガーの実践ノウハウをこっそり教えちゃいます。

当サイトでは、私が月7桁稼ぐまでに至ったノウハウ・現在実践しているノウハウを「ツヨシウェブSHOP」で有料コンテンツとして販売しております。実際にブログで月7桁稼いだ実績を持っており、また現在もブログ収益で生活をしていますので情報の信頼性は高いと感じています。

しかし、有料コンテンツで提供している情報は「楽して稼ぐ!」というものにはなっておらず、これから私と同じようにブログ・発信者として生活していきたい方に向けて書いておりますので「継続的に作業できる方のみ」ご購入いただければ幸いです。

また、コンテンツには自信を持って提供させて頂いておりますので、もし購入後ご不満がございましたら「返金対応」させて頂きます。

月7桁をを達成したサイト設計方法です!

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。

  • 見込み客→キーワード選定→サイト導線が重要。
  • 「成約から近い見込み客」の考え方について解説。
  • 狙うべきキーワードについて解説。
  • サイト導線の考え方について解説。

\月7桁を達成したサイト設計方法が学べます!/

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
  • 見込み客→キーワード選定→サイト導線が重要。
  • 「成約から近い見込み客」の考え方について解説。
  • 狙うべきキーワードについて解説。
  • サイト導線の考え方について解説。

\月7桁を達成したサイト設計方法が学べます!/

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
  • 案件を選ぶ際の7つのポイントが学べます。
  • 購入されやすい商品の特徴。
  • 案件選びで重要な見るべきポイント。
  • 案件を取り組む際に確認すべき事項。

\アフィリ案件を選ぶ秘訣が学べます!/

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
この記事の内容
閉じる