WordPressで画像の周りに境界線を追加する方法（簡単な3つの方法）

WordPressサイトの背景に画像が溶け込んでしまうと感じたことはありませんか？素晴らしいビジュアルを選んだのに、ページに表示されると平坦に見え、ほとんど存在しないかのようです。

これはよく起こります。特に、クリーンで白いレイアウトでは。そして、すべてが洗練されて見えていても、コンテンツが魅力に欠けるように感じられることがあります。

ここで、単純な境界線を追加することが大きな違いを生むことができます。

WPBeginnerでは、ページ全体の見た目を良くし、際立たせるために、スクリーンショットの周りにシンプルな境界線を追加するのが好きです。これは、エンゲージメントを高め、デザインのバランスを取り、よりプロフェッショナルな印象を与えるための、私たちのお気に入りのテクニックの1つです。

このガイドでは、WordPress で画像に境界線を追加する 3 つの簡単な方法を紹介します。最後まで読めば、画像を際立たせ、訪問者をコンテンツに惹きつける方法がわかるでしょう。🙌

WordPressで画像に境界線を追加する理由

境界線は、特に明るい背景や忙しい背景のページで、画像を他のコンテンツから際立たせるのに役立ちます。これにより、画像をより見やすく、注目を集めやすくする明確な視覚的な境界が作成されます。

画像はコミュニケーションのための強力なツールです。情報を素早く共有し、文字が多いページをより魅力的にすることができます。

ただし、画像がウェブサイトの背景に溶け込んでしまうことがあります。これは、背景画像を使用している場合や、サイトの色が画像の色と似ている場合に起こりやすいです。

視覚障害や色覚異常のある方も、画像と背景を区別するのが難しい場合があります。詳細については、WordPressサイトのアクセシビリティを改善する方法に関するガイドをご覧ください。

WordPress で画像の周りに境界線を追加すると、画像とサイトの背景が明確に区別されます。最も重要なビジュアルに注目を集めるための優れた方法でもあります。

これを踏まえて、WordPressブログの画像にボーダーを追加する方法を説明します。

この記事で説明するすべての方法の簡単な概要を以下に示します。

• 方法1：カスタムCSSクラスを使用してWordPressで画像の周りに境界線を追加する
• 方法2：ページビルダーを使用してWordPressで画像の周りに境界線を追加する
• 方法3：HTMLとCSSを使用してWordPressで画像にボーダーを追加する
• ボーナスのヒント：画像に境界線を追加するためのグラフィックデザインツールの使用
• よくある質問：WordPressで画像にボーダーを追加する
• WordPressでの画像の利用に関するその他のガイド

準備はいいですか？始めましょう。

方法1：カスタムCSSクラスを使用してWordPressで画像の周りに境界線を追加する

カスタムCSSクラスを作成することは、画像に境界線を追加するためのスマートで簡単な方法です。CSSクラスは、境界線、色、間隔などの同じスタイルをサイト上の複数の要素に適用できる、コードの再利用可能なブロックです。

そのため、画像を 1 つずつ編集する代わりに、境界線の設定を 1 か所で定義し、数回クリックするだけで必要な場所に適用できます。これは、サイト全体で複数の画像に境界線を追加する予定がある場合に最適です。

カスタムCSSクラスを作成するには、いくつかの方法があります。テーマカスタマイザー、フルサイトエディター、またはWPCodeプラグインを使用できます。

WPCodeプラグインは初心者にも使いやすく、テーマに依存しないため、常に使用することをお勧めします。これにより、別のテーマに切り替えても、カスタムCSSは引き続き機能します。

当社のパートナーブランド全体で、WPCodeを使用してカスタムコードスニペットを追加および管理しています。詳細については、WPCodeの詳細レビューをご覧ください。

それでは、WPCodeプラグインをインストールして有効化しましょう。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

有効化したら、コードスニペット » + スニペットを追加に移動します。

次に、「カスタムコードを追加（新規スニペット）」オプションにカーソルを合わせ、「スニペットを使用」をクリックします。

次の画面で、WPCodeはコードタイプを選択するように求めます。

WPCodeのデフォルト設定は「PHPスニペット」を指していることに気づくかもしれませんが、ここでは「CSSスニペット」をクリックする必要があります。

これでWPCodeエディタが開きます。ここから、カスタムスニペットに名前を付けることができます。たとえば、「border-black」を使用します。

CSSクラスを作成する際には、境界線の色と太さを指定する必要があることに注意してください。

たとえば、幅にピクセル (px)、色に 16 進数のカラーコードを設定できます。

次のコードスニペットでは、幅 5 ピクセルの黒い境界線を作成しています。

.border-black {
    border: #000 solid 5px;
}

上記のサンプルコードでは、border-black は CSS クラスの名前です（WPCode のカスタムコードスニペットと同じなので、整理しやすくなっています）。

好きな名前を使用できますが、境界線を作成したいときは毎回CSSクラス名を入力する必要があります。それを念頭に置いて、短くて覚えやすいCSSクラス名を作成することをお勧めします。

次に、このコードスニペットをWPCodeの「コードプレビュー」フィールドに次のようにコピーするだけです。

その後、トグルを切り替えてスニペットをアクティブにし、「スニペットを保存」または「更新」ボタンをクリックします。詳細な手順については、WordPressにカスタムCSSを追加する方法のガイドを参照してください。

必要なだけCSSクラスを追加できます。たとえば、異なる色の境界線を作成することもできます。

画像に境界線を追加するのは、非常に簡単です。

開始するには、WordPressのページまたは投稿上の画像をクリックしてください。次に、画面の右側にある「ブロック」タブを見て、「詳細設定」オプションを探してください。

セクションを展開するには、それをクリックしてください。

「追加のCSSクラス」フィールドに、画像に追加したいCSSクラス名を入力できます。

次の画像で見られるように、境界線はWordPressコンテンツエディターには表示されないことに注意してください。

訪問者にとって境界線がどのように表示されるかを確認するには、「プレビュー」ボタンをクリックしてください。

これで、境界線が適用された画像が表示されます。

境界線の見た目に満足したら、ページを発行または更新するだけです。

方法2：ページビルダーを使用してWordPressで画像の周りに境界線を追加する

別の方法として、ページビルダープラグインを使用する方法があります。

ドラッグアンドドロップページビルダーを使用すると、コーディングスキルなしで、ログインページや ランディングページなどのWebページを簡単にデザインおよびカスタマイズできます。テキスト、画像、その他の要素を追加できます。

これらのツールを使用すると、各画像にユニークな境界線を簡単に作成することもできます。多くの人にとって簡単なビジュアルベースのエディターを使用してデザインできます。

私たちは、SeedProd をお勧めします。これは、WordPress向けの最高のランディングページビルダーです。使いやすく、プロフェッショナルな見た目のページを簡単に作成できます。

このツールを推奨する理由については、SeedProd の完全なレビューをぜひご覧ください。

SeedProdには、組み込みの境界線オプションを備えた特別な画像ブロックがあります。影を追加したり、間隔を調整したりすることも簡単にできます。

まず、プラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

有効化したら、WordPressダッシュボードからSeedProd » Landing Pagesに移動しましょう。

SeedProdには数百ものプロフェッショナルにデザインされたテンプレートが用意されており、それらはカテゴリ別にグループ化されています。画面上部には、使用できるカテゴリが表示されています。

• 404ページを作成する。
• カスタムログインページを作成する。
• 美しい「近日公開」ページをデザインする。
• その他。

デザインを確認するには、テンプレートの上にマウスカーソルを合わせ、表示されたら虫眼鏡アイコンをクリックするだけです。

テンプレートのプレビューが表示されます。

テンプレートの外観に満足したら、「このテンプレートを選択」をクリックしてください。

「ページ名」フィールドに、ページの名前を入力します。デフォルトでは、SeedProd はこの名前をページの URL として使用します。

この自動生成された URL を変更したい場合は、「ページの URL」フィールドのテキストを編集するだけです。

情報を入力したら、「保存してページの編集を開始」ボタンをクリックできます。これにより、選択したテンプレートがSeedProdのドラッグアンドドロップエディターで開きます。

左側のメニューには、ドラッグアンドドロップを使用してWordPressページに追加できるすべてのブロックが表示されます。

単純に「画像」ブロックを見つけて、ページデザインにドラッグ＆ドロップします。

それが完了したら、「画像」ブロックをクリックして、ブロックをカスタマイズするために使用できるすべての設定を表示します。

左側のメニューで、「独自の画像を使用」をクリックします。

これで、WordPressメディアライブラリから任意の画像を選択できます。

その後、左側のメニューにある「詳細設定」タブをクリックします。

次に、「画像境界線」セクションを展開するためにクリックします。

デフォルトでは、SeedProdのすべての境界線の太さ設定は0になっており、画像に境界線がないことを意味します。

まず、これらの値を1以上に増やします。これにより、画像に表示可能な境界線が追加されます。

開始するには、「境界線の幅」フィールドをそれぞれクリックし、より大きな数値を入力するか、表示される矢印ボタンを使用します。

境界線の太さに満足したら、スタイルを設定し始めることができます。

1つのオプションは、「境界線の色」の横にあるフィールドをクリックして境界線の色を変更することです。これにより、新しい境界線の色を選択できるポップアップが開きます。

SeedProd は、ソリッド、ドット、ダッシュの 3 つのシンプルな境界線スタイルを提供しています。画像に最適なものをお選びいただけます。

これらの異なる境界線のスタイルを試すには、単に「境界線のスタイル」ドロップダウンを開き、リストからオプションを選択してください。

これで完了です！

他の画像に境界線を追加したい場合は、上記と同じ手順に従ってください。

ページのレイアウトに満足したら、「保存」ボタンをクリックし、「公開」を選択して公開できます。

方法 3: WordPress で画像を囲む境界線を追加するために HTML と CSS を使用する

HTMLとCSSを使用して境界線を追加することもできます。この方法ではプラグインは必要ありません。これは便利かもしれません。

ただし、境界線の外観をカスタマイズするにはコードの記述が必要なため、初心者には最適な選択肢ではないかもしれません。しかし、少しのコーディングに慣れているのであれば、この方法は大きな柔軟性を提供します。

まず、任意のページまたは投稿に画像を追加しましょう。

それが完了したら、右上隅にある3つのドットのアイコンをクリックし、「コードエディター」をクリックします。

WordPressは、ページまたは投稿を構成するすべてのコードを表示します。

これで、画像がページに追加されるコードセクションを見つけることができます。このコードは wp:image  から始まります。

ページに複数の画像がある場合は、img src=の値を確認してください。これはWordPressメディアライブラリ内の画像のURLであり、画像ごとに異なります。

コードの適切なセクションを見つけたら、次のステップは、境界線を追加し、そのスタイルを制御するコード行を記述することです。

たとえば、次のコードスニペットでは、境界線の幅は3ピクセルです。パディングとマージンも3ピクセル追加しています。

style="border:3px solid #000000; padding:3px; margin:3px;" />

上記のサンプルコードでは、`solid #000000` が境界線の色を設定します。 `#000000` の値は、黒色の16進数コードです。

そして、黒い境界線を作成したくない場合は、値を他の任意の16進コードに置き換えることができます。

境界線コードを決定したら、/></figure> セクションを見つけて、最初の / 文字の直前にコードを追加する必要があります。

例を見てみましょう。

<!-- wp:image {"id":1450,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10003/wp-content/uploads/2022/06/logo.jpeg" alt="" class="wp-image-1450" style="border:3px solid #000000; padding:3px; margin:3px;" /></figure>
<!-- /wp:image -->

コードに満足したら、「コードエディターを終了」をクリックしてコードエディターを終了します。

これで画像に境界線が表示されるはずです。無効なHTMLに関する警告が表示されても心配しないでください。これは正常であり、画像の表示方法には影響しません。

見栄えが良ければ、ページを通常どおり更新または公開できます。

さて、WordPressウェブサイトにアクセスすると、画像にボーダーが表示されます。

ボーナスのヒント：グラフィックデザインツールを使用して画像の周りに境界線を追加する

WordPressでは境界線を追加するためのいくつかの方法が提供されていますが、これらのオプションはスタイルやカスタマイズが制限される場合があります。そのため、画像を編集してからWordPressにアップロードするのはどうでしょうか？

ここでグラフィックデザインツールが役立ちます。

Adobe Photoshop は、プロ向けの豊富な機能を持つ主要なソフトウェアです。予算をかけたくない場合は、Affinity Photo が堅実な選択肢です。同様の機能を持っていますが、一度だけ支払うだけで済みます。

よりユーザーフレンドリーでブラウザベースの体験のために、Canva は優れたツールです。私たちのチームは、これを定期的に使用して、アイキャッチ画像やソーシャルメディアグラフィックを迅速にデザインしています。

そして、予算が気になる場合は、GIMP（GNU Image Manipulation Program）がおすすめです。完全に無料でオープンソースであり、有料ツールでできることの多くを実行できます。

GIMPは、初心者と経験豊富なユーザーの両方にとって優れた選択肢です。MacとWindowsで使用できます。

このチュートリアルでは、GIMPを使用して画像に境界線を追加する方法を説明します。

インストール後、GIMPのデスクトップアプリケーションを開きます。次に、**ファイル** » **開く**をクリックして、ローカルドライブから編集したい画像を選択します。または、GIMPのエディターにドラッグアンドドロップすることもできます。

画像がGIMPエディタに読み込まれたら、「長方形選択ツール」を使用して画像に境界線を描きましょう。このツールは左上のツールバーにあります。

次に、前景と背景の色設定を確認するとよいでしょう。

これは、GIMP が前景色を使用して線を描画するためです。したがって、境界線に特定の色を使用する必要がある場合は、前景色をクリックして調整できます。

これによりカラーピッカーが開きます。ここで、マウスをカラー選択エリアに移動するか、カラーの 16 進数コードを入力できます。

これが完了したら、「OK」をクリックできます。

境界線の色を設定したら、それを適用する時間です。**編集** » **ストローク選択**に移動すると、「ストローク選択」ポップアップが開きます。

ここで、線のスタイル、線の太さなどを調整できます。例えば、線の太さを5pxに設定しました。

これが完了したら、「ストローク」をクリックしてください。これで画像に境界線が追加されます。

WordPressにアップロードする前に、優れたサイトの速度とパフォーマンスを維持するために画像を最適化することをお勧めします。生の画像はサイズが大きいことが多いため、この手順は非常に役立ちます。

GIMPでは、画像を最適化してリサイズできます。

開始するには、まず 画像 » 画像のサイズ変更 に移動します。これにより、「画像のサイズ変更」ポップアップが表示され、そこで「画像サイズ」を次のように調整できます。

画像サイズを調整した後、「スケール」ボタンをクリックできます。

GIMPは画像をリサイズし、エディターで新しいバージョンを表示します。

完了したら、ファイル » エクスポート に移動して画像を保存できます。

次に、プロンプトに従って場所を選択し、ファイル名を付け、画像フォーマットを定義します。すべてが設定されたら、「エクスポート」をクリックします。

これで、画像を WordPress の投稿またはページにアップロードできます。これは、ブロックエディターでは次のようになります。

これで、グラフィックデザインツールを使用して画像に境界線を追加する方法を学びました！

この方法は、WordPressに画像をアップロードしたいときにいつでも使用できます。

よくある質問：WordPressで画像にボーダーを追加する

画像のスタイリングについて、まだ質問がありますか？ WordPress で境界線を追加する際のトラブルシューティング、カスタマイズ、および最大限の活用に役立つ一般的な FAQ を以下に示します。

すべての画像に同じ境界線を一度に追加できますか？

はい、カスタムCSSを使用して、メインのimgタグにスタイルを適用することでこれを行うことができます。ただし、これはロゴ、アイコン、またはウィジェット内の画像にも影響を与える可能性があります。

より詳細な制御のために、CSSクラスを作成し（方法1のように）、境界線が必要な画像にのみ適用することをお勧めします。

画像の境界線に角丸を作成するにはどうすればよいですか？

border-radius CSSプロパティを使用して、角を丸くすることができます。カスタムCSSスニペットにborder-radius: 15px;という行を追加するだけです。ピクセル値が高いほど、角はより丸くなります。

WordPressテーマが自動的に追加する境界線を削除できますか？

はい。これを上書きするには、カスタムCSSクラスを作成できます。たとえば、border: none !important; を持つ .no-border です。その後、ブロックまたは画像設定の「追加のCSSクラス」フィールドを使用して、特定の画像に適用できます。

CSS境界線を追加すると、ウェブサイトの速度が低下しますか？

いいえ、単純なCSSボーダーはコードの1行にすぎず、ページの読み込み速度に目立った影響はありません。パフォーマンスに影響を与えるのは画像自体のファイルサイズなので、常に画像をウェブ用に最適化するようにしてください。

WordPressでの画像の利用に関するその他のガイド

この記事がWordPressで画像の周りに境界線を追加する方法を学ぶのに役立ったことを願っています。

これがお役に立った場合は、次のガイドも参照してください。

• WordPressに画像を正しく追加する方法
• WordPressで基本的な画像編集を行う方法
• 画質を損なわずに画像をリサイズして大きくする方法
• WordPressで追加の画像サイズを作成する方法
• WordPressで画像を簡単に遅延読み込みする方法
• WordPressにおける画像代替テキストと画像タイトルの違い
• WordPressにヒーローイメージを追加する方法（すべてのテーマに対応）
• WordPress向けの最高のアイキャッチ画像プラグインとツール

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。