WordPressで画像の周りに枠線を追加する方法

WordPressで画像の周りに枠線を追加したいですか？最近、あるユーザーからWordPressで画像の周りに枠線をつける簡単な方法を尋ねられました。CSSを使うこともできますが、初心者にはわかりにくいものです。この投稿では、HTMLやCSSコードを編集することなく、WordPressで画像の枠線を簡単に追加する方法を紹介します。

動画チュートリアル

動画が気に入らなかったり、もっと説明が必要な場合は、このまま読み進めてください。

方法1：WordPressで画像の枠線を追加するプラグインを使用する。

この方法は、HTMLやCSSを編集したくない初心者向けです。まず最初に、WP Image Bordersプラグインをインストールして有効化します。有効化したら、Settings ” WP Image Bordersでプラグインの設定を行います。

プラグイン設定の最初のセクションでは、画像をターゲットにすることができます。Add borders to all images in blog posts’オプションの隣にあるボックスにチェックを入れることで、WordPress投稿内のすべての画像に枠線を追加することができます。

また、特定のCSSクラスに枠線をつけることもできます。特定の画像にCSSクラスを追加する方法は、この投稿の後半で紹介します。今のところ、.border-imageのようなCSSクラスには何でも入れることができます。

プラグイン設定の2番目のセクションでは、枠線のカスタマイズができます。枠線のスタイル、幅、半径、色を選択できます。

設定ページの最後のセクションでは、画像にドロップシャドウを追加できます。水平方向と垂直方向の距離、ぼかしと広がり半径、ボックスシャドウの色を入力できます。画像にドロップシャドウを追加したくない場合は、これらのフィールドを空白のままにすることができます。

変更を保存]ボタンをクリックして、プラグインの設定を保存することを忘れないでください。

最初のオプション「ブログ投稿のすべての画像に枠線を追加する」を選択した場合は、他に何もする必要はありません。

すべてのブログ投稿画像に画像の枠線が表示されるはずです。

しかし、特定の画像だけに枠線を表示する2番目のオプションを選択した場合は、次のステップに進む必要があります。

WordPressで画像にCSSクラスを追加する

選択した画像だけに枠線をつけたい場合は、どの画像に枠線をつけるかをWordPressに指示する必要があります。そのためには、枠線が必要な画像にCSSクラスを追加します。

画像をアップロードし、投稿に追加します。画像を追加したら、ビジュアルエディターで画像をクリックし、ツールバーの編集ボタンをクリックします。

画像編集ポップアップが表示され、画像の詳細が表示されます。詳細オプションをクリックして展開し、画像のCSSクラスを入力する必要があります。

ヒント：プラグインの設定で.border-imageを選択したので、これは.border-imageです。

次に、更新ボタンをクリックして画像設定を保存・更新します。以上で、画像にクラスが追加されました。WP Image Bordersプラグインを使用しているので、この画像に枠線が表示されます。

方法2: HTMLとCSSを使ってWordPressに画像の枠線を追加する。

CSS/HTMLを使用して画像の枠線を追加する方法は、WordPressで画像の周りに枠線を付けるための、より速く素早い方法です。これにはさまざまな方法がありますが、すべてご紹介します。あなたに最適な方法を選んでください。

WordPressでインラインスタイルを使用して枠線を追加する

WordPressの投稿に画像をアップロードして挿入したら、テキストエディターに切り替えます。画像のHTMLコードが表示されます。このように表示されます：

[SKX1］
<img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300×203.jpg" alt="ブルーバード" width="300" height="203" class="alignnone size-medium wp-image-36" />
[SKX2］

このように、HTMLコードにCSSスタイルを簡単に追加することができます：

[SKX3］
<img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300×203.jpg" alt="ブルーバード" width="300" height="203" class="alignnone size-medium wp-image-36" style="border:3px solid #eeeeee; padding:3px; margin:3px;" />
[SKX4］

枠線の幅、色、パディング、マージンは自由に変更してください。

WordPressテーマや子テーマに画像の枠線を追加する

WordPressブログの投稿やページ内のすべての画像に枠線を恒久的に追加したい場合は、WordPressテーマや子テーマに直接CSSを追加することができます。

ほとんどのWordPressテーマは、すでにテーマのスタイルシート（通常はstyle.cssファイル）にこれらのスタイルルールが定義されています。既存のCSSを修正することもできますし、子テーマで独自のCSSを追加することもできます。

WordPressは、すべての画像に初期設定の画像クラスを追加します。投稿/ページ内の画像に画像の枠線があることを本当に〜してもよいですか？以下に簡単なCSSスニペットを示します：

[cbk1］

必要なときだけ画像の枠線を使いたい場合は、画像にCSSクラスを追加します（上記参照）。テーマまたは子テーマに、このCSSクラスのスタイリングルールを追加してください。

[cbk2］

この投稿がWordPressブログの画像に枠線を追加するのにお役に立てば幸いです。WordPressサイトを高速化するためにウェブ用に最適化された画像を保存する方法についてのガイドもご覧ください。

この投稿を気に入っていただけたなら、WordPress動画チュートリアルのYouTubeチャンネルをぜひご購読ください。Twitterや Facebookでもご覧いただけます。