記事作成ノウハウ

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

how-to-edit-image

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

ブログ開始して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:白色 の設定で、ワニさんの目を赤い四角枠線で囲う

SIze:3、Radius:0、Fill:白色、Squre:白色、カラーパレット:赤色  を選択して描いた四角枠線

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

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

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

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

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

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

まとめ

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

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

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

テキストを挿入したい場合は、左メニューからTマークを選択する

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

  • この記事を書いた人

いぐあいん

東証一部上場企業で働くサラリーマン。 都内在住。 2020/4に人生初のブログを開設。 社会的・経済的に自由な生活を求めて、 副業による新たな収入源の確保を模索中。 ブログ運営・ポイ活・フリマ販売などの ノウハウを情報発信していきます。

-記事作成ノウハウ
-,

Copyright© 副業ミチシルベ , 2022 All Rights Reserved Powered by AFFINGER5.