記事に編集した画像を挿入する方法（テキストや枠線を追加）

こんにちは！いぐあいんです。

ブログ開始して6日経ち、今回は３本目の記事をアップロードします。

今日の記事テーマは「記事に編集した画像を挿入する方法」です。
当たり前の内容かもしれませんが、WordPress初心者の私が、WordPress上で画像の編集できないの？と困ったことがあったので、その解決方法をご紹介します。

編集した画像を記事に挿入する方法

まず、記事に編集した画像を挿入する方法を整理します。
方法は大きく分けて２つです。

• 方法１
  画像編集ソフトで画像編集　⇒　編集済の画像を記事に挿入する
• 方法２
  未編集の画像を記事に挿入　⇒　記事挿入後に画像を編集する

方法１は、WordPress上では画像編集しない方法です。残念ながら、WordPressの標準機能には画像編集機能は備わっていないため、事前に画像編集ソフトで画像を編集して、WordPressに挿入します。
但し、画像編集用のソフトを別途用意する必要があり、挿入した画像を再度編集したい場合は、画像編集ソフトで編集し直して、再度WordPressに挿入するという手間が発生します。
画像編集ソフトには有料/無料のものがありますが、文字列や枠線の追加などの簡単な編集であれば、無料の画像編集ソフトでも不足はないと思います。

方法２は、WordPressにプラグインをインストールして、画像編集機能を追加する方法です。枠線追加や文字列追加などの簡易な編集であれば、WordPress上で編集から挿入まで完結できるので、この方法が便利です。

今回の記事では方法２のやり方について紹介します。
画像編集機能を追加するプラグインとしては、文字列や枠線の追加などの最低限の編集機能が備わっている「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ボタンをクリックすると切り替わる）

また、編集画面の右側に表示される「カラーパレット」で色を選択できる。

各種設定を行い、画像上でドラッグすると（起点とする位置で左クリックし、左クリックしたままマウスを動かし、終点とする位置で左クリックをはなす）、以下のような四角枠線が描ける。

画像編集が終わったら、編集画面上部に表示される「Save Image」ボタンをクリックする

「Save Image」ボタンをクリックしたら、編集画面の右上の✖ボタンをクリックする

編集した画像をブロックに挿入する

元の「メディアを追加」画面に戻るので、編集した画像を選択する。

画面右下の「投稿に挿入」ボタンをクリックする

ブロックに編集した画像が挿入される

まとめ

今回の記事では以下を説明しました。

• 「WP Paint」プラグインのインストール方法
• 「WP Paint」プラグインを使用した画像編集＆ブロック挿入方法

今回は四角枠線の追加方法について説明しましたが、「WP Paint」編集画面の左メニューから「Tマーク」のボタンをクリックすれば、テキストの追加も簡単に行えます。

本記事を参考に皆さんも各自で「WP Paint」の操作方法を習得してみてください。
それでは今日はここまで！ば～い！