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

FOXWP

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

  • HOME
  • WordPressブログの始め方
  • おすすめテーマ
  • おすすめプラグイン
  • お問い合わせ
FOXWP / WordPress / WordPressの使い方 / WordPressで画像に枠線を追加する方法

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

2018年1月12日 2020年4月12日

この記事を読めば…
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初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル

おすすめプラグイン

WordPressプラグイン「TablePress」の使い方

WooCommerceの設定方法と使い方

LuckyWP Table of Contentsの使い方と設定方法

【2018年版】コメント機能を改善するおすすめWordPressプラグイン

【2020年版】コメント機能を改善するおすすめWordPressプラグイン

おすすめテーマ

ポートフォリオ向けWordPressテーマ

ポートフォリオ向けWordPressテーマ|魅せるギャラリーが簡単にできる

おすすめ企業サイト向けWordPressテーマ

さっとクオリティの高い企業サイトを作成できるWordPressテーマ特集

ブログ・アフィリエイトにおすすめのWordPressテーマ

ブログ・アフィリエイトにおすすめのWordPressテーマ【2019年版】

ヘッダーに動画を設定できるWordPressテーマまとめ

ヘッダーに動画を設定できるWordPressテーマまとめ

Previous Post: « WordPressで右クリックを禁止する方法
Next Post: WordPressで投稿記事にパスワード保護をかける方法 »

Primary Sidebar

当サイトの利用テーマ

Genesis Theme Framework for WordPress
詳しく見る

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

Divi WordPress Theme
詳しく見る

あなたの悩みは?

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

カテゴリー

  • WordPress
    • WordPressのSEO対策
    • WordPressのセキュリティ対策
    • WordPressの使い方
    • エラー・トラブル
    • カスタマイズ
  • WordPressテーマ
    • Divi
    • おすすめテーマ
    • テーマカスタマイズ
  • WordPressプラグイン
    • プラグインカスタマイズ
  • WordPress入門講座
  • WordPress設定関連
  • お役立ち情報
    • メモ
  • アフィリエイト
    • Amazonアフィリエイト
  • ドメインレジストラ
    • お名前.com
  • レンタルサーバー
    • ColorfulBox
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
    • PBN Lab
    • Rank Tracker
WordPress学習方法
トップページへ

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