• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / WordPress / WordPressで画像に枠線を追加する方法

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

最終更新日:2021年10月6日

この記事を読めば…
WordPressで画像に枠線を追加する方法がわかります。全ての画像でも特定の画像でもお好みに合わせて枠線を追加することができます。

WordPressで画像を記事に画像を配置したとき、なんか見づらいと感じたことはありませんか?

画像の背景とWordPressの背景が一緒だったり、画像と背景が同化してしまっていたり。追加する画像とWordPressのデザインによって、印象はかなり異なります。

そんなときには、画像に枠線を追加しみてはいかがでしょうか?

目次 非表示
1 WordPressで画像に枠線をプラグインで追加する方法
1.1 特定の画像のみに枠線を追加する方法

WordPressで画像に枠線をプラグインで追加する方法

ここでは、HTMLやCSSといったコードを書くことなくプラグインで追加する方法を紹介します。この方法は、WordPress初心者でも簡単に行えるおすすめの方法です。

使用するプラグインは、「WP Image Borders」です。まずは、プラグインをインストールしましょう。

WordPress管理画面へログインし、プラグイン検索画面から「WP Image Borders」と検索します。

プラグインを検索する

検索リストから「WP Image Borders」を見つけインストールを行います。

プラグインのインストール

もし、プラグイン検索で見つからない場合は、WordPressプラグインディレクトリからプラグインファイルをダウンロードし、インストールを行いましょう。

WordPressプラグインディレクトリからダウンロード

詳しいプラグインのインストール方法は、WordPressでプラグインをインストールする方法を参照してください。

インストールし、WP Image Bordersプラグインを有効化すると、設定メニューにWP Image Bordresの項目が追加されます。

プラグインの設定画面を開く

これをクリックするとWP Image Bordersの設定画面が表示されます。

プラグインの設定画面

設定項目は、セクションごとに分かれています。

  • Target Images – 全ての画像に枠線を追加するか設定できます。また、特定の画像に枠線を追加するためのクラスを指定できます。
  • Customize Image Borders – 画像に追加する枠線のスタイルを設定できます。
  • Add Drop Shadows to Images – 画像に追加する影のスタイルを設定できます。

枠線と影のスタイルは、お好みに合わせて設定しましょう。

もし、WordPrssの記事に挿入する全ての画像に枠線を追加したい場合は、Target ImagesにあるAdd borders to all images in blog postsにチェックを入れてください。

画像全てに枠線を追加する場合

これだけで、WordPressで投稿した画像全てに枠線が追加されます。

特定の画像のみに枠線を追加する方法

特定の画像のみに枠線を追加した場合は、少し作業が必要となります。

まずは、Target ImagesのAdditional CSS classesに文字列を追加します。

特定の画像に枠線を追加する場合

追加する文字列は「.〇〇〇」のように、最初に「.」が必要になりますので注意しましょう。「.add-border」や「.image-border」など、枠線を追加することがわかりやすい文字列にしておきます。

設定画面で必要な設定は以上です。あとは、枠線を追加したい画像ごとに設定を行います。枠線と影のスタイルの設定は、忘れずにしておきましょう。

枠線を追加したい画像がある投稿編集画面を表示し、ビジュアルエディターを選択します。そして、枠線を追加したい画像をクリックし(①)、表示される編集ボタンをクリックします(②)。

枠線を追加する画像を編集

画像詳細ウィンドウが表示されます。上級者向け設定の右側にある三角印をクリックします。

画像詳細ウィンドウ

上級者向け設定の項目に画像CSSクラスという項目があります。ここに、Target ImagesのAdditional CSS classesに入力した「.」を除いた文字列を追加します(①)。追加したら、「更新」ボタンをクリックしてください。

CSSクラスを追加s

これで画像に枠線を追加できました。しかし、ビジュアルエディターでは何も変わっていないでしょう。テキストエディターに変更してみましょう。

枠線クラスの追加を確認

すると、画像CSSクラスに追加した文字列があるのを確認できます。それでは、WordPressのブログ画面で画像を確認してみましょう。

画像に枠線が追加されていることを確認(WordPress)

ちゃんと画像に枠線が追加されていますね。

枠線や影の設定を変更すれば、様々な見た目に変更することができます。色々試してみましょう。

影付きの枠線を追加
影付きの枠線を追加

カテゴリー:WordPress

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル
Previous Post: « WordPressで右クリックを禁止する方法
Next Post: WordPressで投稿記事にパスワード保護をかける方法 »

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
レビューを見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressでおすすめのバックアッププラグイン5選
  • WordPressのPHP設定を変更する方法(php.ini)
  • WordPressでおすすめの画像圧縮プラグイン5選
  • WordPressの投稿編集画面でその投稿を表示する方法
  • WordPressの管理画面に再利用ブロックの管理を追加する方法

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2023 FOXWP All rights reserved.