こんにちは!いぐあいんです。
ブログ開始して6日経ち、今回は3本目の記事をアップロードします。
今日の記事テーマは「記事に編集した画像を挿入する方法」です。
当たり前の内容かもしれませんが、WordPress初心者の私が、WordPress上で画像の編集できないの?と困ったことがあったので、その解決方法をご紹介します。
目次
編集した画像を記事に挿入する方法
まず、記事に編集した画像を挿入する方法を整理します。
方法は大きく分けて2つです。
- 方法1
画像編集ソフトで画像編集 ⇒ 編集済の画像を記事に挿入する - 方法2
未編集の画像を記事に挿入 ⇒ 記事挿入後に画像を編集する
方法1は、WordPress上では画像編集しない方法です。残念ながら、WordPressの標準機能には画像編集機能は備わっていないため、事前に画像編集ソフトで画像を編集して、WordPressに挿入します。
但し、画像編集用のソフトを別途用意する必要があり、挿入した画像を再度編集したい場合は、画像編集ソフトで編集し直して、再度WordPressに挿入するという手間が発生します。
画像編集ソフトには有料/無料のものがありますが、文字列や枠線の追加などの簡単な編集であれば、無料の画像編集ソフトでも不足はないと思います。
方法2は、WordPressにプラグインをインストールして、画像編集機能を追加する方法です。枠線追加や文字列追加などの簡易な編集であれば、WordPress上で編集から挿入まで完結できるので、この方法が便利です。
今回の記事では方法2のやり方について紹介します。
画像編集機能を追加するプラグインとしては、文字列や枠線の追加などの最低限の編集機能が備わっている「WP Paint」を紹介します。
※2020/4/29時点の補足
「WP Paint」以外に「DrawIT」と言う画像編集用のプラグインも有名ですが、私のWordPress環境ではうまく機能しませんでした。インストールまでは出来ましたが、WordPress上で「DrawIT」編集画面が起動しません。推測ですが、WordPress5.4で動作未検証となっていたため、バージョン不整合が原因と思われます。今後のプラグインのバージョンアップで適用できるようになったら、そちらの使用方法についても記事にしたいと思います。
「WP Paint」プラグインのインストール方法
プラグインのインストール方法をここでは解説します。
プラグインのインストール経験はあるでしょうか。とっても簡単なので、初めての方もこの記事の通りに操作すればサクッとインストールできますので、一緒にやってみましょう。
「プラグイン」-「新規追加」を選択
【WordPressダッシュボード】画面のメニューから、「プラグイン」-「新規追加」をクリック
「WP Paint」のワードでプラグインを検索する
【新規追加】画面の右上の検索窓に「WP Paint」を入力して、検索をかける。
「WP Paint」をインストール
検索結果に「WP Paint」が表示されたら、「今すぐインストール」をクリックする
「WP Paint」の公式サイトが表示されたら、画面右下の「今すぐインストール」をクリックする
インストールしたプラグインを有効化する
検索結果に表示された「WP Paint」に「有効化」のボタンが表示されるので、そのボタンをクリックする
【WordPressダッシュボード】画面のメニューから、「プラグイン」-「インストール済みプラグイン」をクリックする。
インストール済みプラグインの一覧で、下記の通りの表示となっていれば、インストール&有効化されています。
「WP Paint」の使い方
ここからは「WP Paint」の使い方を簡単に説明します。
なお、「WP Paint」はクラシックエディタに対応したプラグインです。ブロックをクラシックモードに変更する必要がありますので、注意してください。
今回はこのワニさんを編集してみたいと思います。
クラシックモードのブロックを作成する
ブロックを選択し、右側の+ボタンをクリックすると、ブロック種別の一覧が表示される。
ブロック種別の一覧から「フォーマット」-「クラシック」をクリックする
画像ファイルをアップロードする
クラシックモードのブロックに表示されるメニューから、「メディアを追加」をクリックする
「メディアを追加」画面の「ファイルをアップロード」タブをクリックして、「ドラッグ&ドロップ」または「ファイルを選択」で挿入する画像ファイルを選択する
選択した画像ファイルが「メディアライブラリ」タブの画像一覧に表示されたことを確認する。
「WP Paint」の編集画面を立ち上げる
「メディアライブラリ」タブの画像一覧から、編集したい画像を選択する
(画像が青枠線で囲われる)
画像を選択すると、画面右側に「添付ファイルの詳細」が表示される
「添付ファイルの詳細」に表示されている「Edit Image using WP Paint」をクリックする
「WP Paint」の編集画面が表示される
「WP Paint」で画像を編集する(赤枠を追加する)
ここでは画像に赤枠を追加する手順を説明します。
ワニさんの左目を赤枠線で囲ってみたいと思います。
編集画面の左メニューから四角枠ボタンをクリックする
編集画面上の設定バーが以下のように表示される。
設定バーの各項目の意味は以下の通り。
- SIze:四角枠線が太くなる(値が大きい程)
- Radius:四角枠線の角が丸くなる(値が大きい程)
- Fill :ボタンが白色⇒枠線内が塗り潰されない
ボタンが青色⇒枠線内が塗り潰される
(Fillボタンをクリックすると切り替わる) - Squre:ボタンが白色⇒枠線が任意の長方形で引ける
ボタンが青色⇒枠線が正方形で引ける
(Squreボタンをクリックすると切り替わる)
また、編集画面の右側に表示される「カラーパレット」で色を選択できる。
各種設定を行い、画像上でドラッグすると(起点とする位置で左クリックし、左クリックしたままマウスを動かし、終点とする位置で左クリックをはなす)、以下のような四角枠線が描ける。

SIze:3、Radius:0、Fill:白色、Squre:白色、カラーパレット:赤色 を選択して描いた四角枠線
画像編集が終わったら、編集画面上部に表示される「Save Image」ボタンをクリックする
「Save Image」ボタンをクリックしたら、編集画面の右上の✖ボタンをクリックする
編集した画像をブロックに挿入する
元の「メディアを追加」画面に戻るので、編集した画像を選択する。
画面右下の「投稿に挿入」ボタンをクリックする
ブロックに編集した画像が挿入される
まとめ
今回の記事では以下を説明しました。
- 「WP Paint」プラグインのインストール方法
- 「WP Paint」プラグインを使用した画像編集&ブロック挿入方法
今回は四角枠線の追加方法について説明しましたが、「WP Paint」編集画面の左メニューから「Tマーク」のボタンをクリックすれば、テキストの追加も簡単に行えます。

テキストを挿入したい場合は、左メニューからTマークを選択する
本記事を参考に皆さんも各自で「WP Paint」の操作方法を習得してみてください。
それでは今日はここまで!ば~い!