WordPress上でアイキャッチ画像を作成・編集できるプラグイン「Hwinote iCatch Editor」を、Ver2.0.0へアップデートしました。
Ver2.0.0は、公開版Ver1.6.0からの大型アップデートです。
これまでのアイキャッチ画像作成機能に加えて、
- Gutenbergの画像ブロック編集
- メディアライブラリ画像の編集
- 背景画像・画像レイヤーのクロップ
- 複数レイヤーの選択とグループ化
- 画像の一部分をコピーして画像レイヤー化
- カスタムフォントファイルの登録
- PNG・JPEGなどの保存形式選択
- 既存のメディア画像を同じ添付ファイルIDのまま直接置き換える機能
など、多くの機能を追加しました。
Ver1.6.0までは、主に「WordPressでアイキャッチ画像を作成するためのツール」でした。
Ver2.0.0では、アイキャッチ画像だけでなく、記事内の画像やメディアライブラリの画像までWordPress管理画面内で編集できる画像編集ツールへと機能を拡張しています。
この記事では、Hwinote iCatch Editor Ver2.0.0の新しい機能、特徴、基本的な使い方を紹介します。
Hwinote iCatch Editorとは？
Hwinote iCatch Editorは、WordPressの投稿編集画面やメディアライブラリーで動作する画像編集プラグインです。
ブラウザー上のキャンバスを使って、
- 背景画像
- 文字
- 図形
- 線
- 吹き出し
- マーカー
- 別の画像
などを組み合わせ、ブログやWebサイトで使用する画像を作成できます。
Ver2.0.0では3か所から画像を編集
Ver2.0.0では、大きく分けて3つの方法でHwinote iCatch Editorを利用できます。
1．アイキャッチ画像
従来と同じように、投稿や固定ページなどの編集画面からアイキャッチ画像を編集できます。
記事タイトルを使ったアイキャッチ画像の作成はもちろん、背景画像に文字・図形・別の画像などを追加して自由にデザインできます。
2．Gutenbergの画像ブロック
Ver2.0.0では、ブロックエディターで選択している画像ブロックの画像をHwinote iCatch Editorで編集できます。
たとえば、
「スクリーンショットに矢印を追加する」
「画像の一部分を囲む」
「画像に説明文を追加する」
といった作業を、記事を編集しながら行えます。
3．メディアライブラリ
WordPressのメディアライブラリに登録済みの画像も編集できます。
編集した画像を別の画像として保存するだけでなく、条件を満たしている画像では元画像を直接置き換えることもできます。
設定画面について
Hwinote iCatch Editorをインストール・有効化したら、
WordPress管理画面 → 設定 → Hwinote iCatch Editor
を開きます。
ここで主に次の項目を設定します。
- 画像ブロック連携
- 保存形式
- JPEG品質
- フォントの読み込み方式
最初に自分のサイトに合った設定をしておけば、通常の画像編集時には毎回変更する必要はありません。
⓵ 画像ブロック連携の設定
Ver2.0.0では、Gutenbergの画像ブロックからHwinote iCatch Editorを起動できます。
設定画面では、この画像ブロック連携を使用するかどうかを設定できます。
画像ブロック連携を有効にすると、選択している画像ブロックからHwinote iCatch Editorを起動する操作が追加されます。
起動方法として、ブロックエディターのツールバーやサイドバーから利用できます。
画像ブロックを編集する必要がなく、
「Hwinote iCatch Editorはアイキャッチ画像の作成だけに使いたい」
という場合は、画像ブロック連携を使用せずに従来と同じ使い方をすることもできます。
② 保存形式の設定
Hwinote iCatch Editorで生成する画像の保存形式を設定できます。
Ver2.0.0では、編集対象や画像形式に応じて、
- PNG
- JPEG
- 元画像と同じ形式
などを利用できます。
PNG
PNGは、
- 文字を中心とした画像
- 図形を多く使った画像
- スクリーンショット
- 透過を使用する画像
などに向いています。
操作説明用の画像や、文字を中心としたアイキャッチ画像にも使いやすい形式です。
JPEG
JPEGは、
- 写真を中心としたアイキャッチ画像
- 背景に写真を大きく使用する画像
- ファイルサイズを抑えたい画像
などに向いています。
JPEGでは透明部分を保持できないため、透過を必要とする画像ではPNGを使用してください。
元画像と同じ形式
画像ブロックやメディアライブラリの画像を編集する場合は、対応している画像で元画像と同じ形式を利用できます。
③ JPEG品質の設定
JPEG形式で画像を保存する場合の画質を設定できます。
JPEGでは、画質を高くすると画像がきれいになりますが、ファイルサイズも大きくなります。
逆に画質を下げるとファイルサイズは小さくなりますが、写真や文字の周囲などに圧縮による劣化が目立つ場合があります。
ブログで使用する場合は、画像の見た目とファイルサイズのバランスを確認しながら調整してください。
PNGで保存する場合、このJPEG品質設定は使用されません。
④ フォントの読み込み方式
Hwinote iCatch Editorでは、記事タイトル、テキストボックス、文字入り図形、吹き出しでカスタムフォントを使用できます。
選択できる方式は次の3種類です。
- 自動判定（推奨）
- 端末フォント
- サイト登録フォント
通常は、初期設定の**「自動判定（推奨）」**を使用してください。
自動判定（推奨）
現在のブラウザーで利用できる端末フォントと、Hwinote iCatch Editorに登録したサイト内フォントから、利用可能なフォントを判定します。
ブラウザーが端末フォントに対応していない場合でも、サイトに登録したフォントを利用できます。
端末フォント
現在使用している端末にインストールされたフォントを使用します。
ただし、利用できるフォントはブラウザーによって異なります。macOS版のChromeやEdgeなどでは利用できる場合がありますが、Safariではユーザーが追加した端末フォントを基本的に使用できません。
また、別の端末に同じフォントが入っていない場合は、表示が異なることがあります。
サイト登録フォント
Hwinote iCatch Editorを通じて、WordPressサイトへ登録したフォントを使用します。
対応形式は次のとおりです。
- WOFF2
- WOFF
- TTF
- OTF
登録したフォントはWordPressサイト内に保存されるため、端末に同じフォントがインストールされていなくても利用できます。Hwinote iCatch Editor Ver2.0.0では、これらのフォント形式をサイトへ登録し、同一サイト内で安定して描画する機能が用意されています。
次のような場合は、サイト登録フォントがおすすめです。
- Safariを使用する
- WindowsとMacで同じ表示にしたい
- 複数の端末やユーザーで編集する
- 使用するフォントをサイト全体で統一したい
どの方式を選べばよい？
通常は**「自動判定（推奨）」**を使用してください。
端末にインストールしたフォントだけを使う場合は「端末フォント」、Safariを使用する場合や複数の端末で同じ表示にそろえたい場合は「サイト登録フォント」が適しています。
アイキャッチ画像を作成する
ここからは実際の編集機能を紹介します。
投稿や固定ページなどを開き、Hwinote iCatch Editorのアイキャッチ画像編集画面を開きます。
Ⓐ プレビューだけを拡大・縮小
大きな画像を編集するとき、キャンバス全体を画面内に表示するのが難しい場合があります。
実際に保存する画像サイズを変えずに、編集画面上のプレビューだけを拡大・縮小できます。
全体を確認するときは縮小し、細かな位置を調整するときは拡大する、といった使い方ができます。
プレビュー倍率を変更しても、保存される画像の縦横サイズには影響しません。
Ⓑ Undo・Redo
操作を間違えた場合には、
Undo（元に戻す）と Redo（やり直す）
を利用できます。
文字や図形の移動だけでなく、各種編集操作を履歴から戻せます。
装飾だけリセットは背景以外のものをリセットします。
すべてをリセットは閉経を含むすべてものをリセットすることが出来ます。
⓵ キャンバスサイズを設定
最初に作成する画像のサイズを設定します。
用意されているプリセットのほか、任意の幅と高さを指定できます。
作成可能なキャンバスサイズは最大4000×4000ピクセルです。
サイトで使用しているアイキャッチ画像のサイズに合わせて設定すると、毎回同じサイズの画像を作成できます。
② 背景を設定
背景には、
- 現在のアイキャッチ画像
- WordPressのメディアライブラリ
- パソコンからアップロードした画像
を利用できます。
画像を使用せず、背景色だけを設定することもできます。
背景画像には、
- 拡大・縮小
- 表示位置
- 明るさ
- コントラスト
- 彩度
- ぼかし
などの調整を行えます。
キャンバスサイズを変更したときの背景画像の扱いも設定できます。
③ 背景画像をクロップ
Ver2.0.0の大きな追加機能の一つがクロップです。
背景画像を見ながら、使用したい部分だけを選択できます。
クロップ範囲はマウス操作で移動・拡大・縮小できます。
縦横比は、
- 自由
- 1:1
- 4:3
- 16:9
から選択できます。
たとえば横長の写真から人物が写っている部分だけを使ったり、アイキャッチ画像に適した構図へ調整したりできます。
④ 図形を追加
画像にはさまざまな図形を追加できます。
主なものとして、
- 四角形
- 円・楕円
- 矢印
などがあります。
色や枠線などを変更して、画像の一部分を目立たせたり、デザイン用のパーツとして使用したりできます。
横書き・縦書きの文字を追加
記事タイトル以外にも、自由な文字を追加できます。
通常の横書きテキストだけでなく、縦書きのテキストボックスにも対応しています。
サブタイトルや補足説明、画像内の注釈など、複数の文字要素を配置できます。
文字にもフォント、色、影、縁取り、回転、アーチなどを設定できます。
丸付き数字・英字マーカー
手順画像を作成するときに便利な丸付きマーカーも利用できます。
- 丸付き数字
- 丸付き大文字アルファベット
- 丸付き小文字アルファベット
に対応しています。
開始する数字や文字も選べます。
たとえば、
① メニューを開く
② 設定を選択
③ 保存する
といった説明画像を作成できます。
線を追加
線についても複数の種類を利用できます。
- 直線
- 二重線
- 破線
- 点線
- 波線
- 矢印付き線
などを選択できます。
矢印を使って操作する場所を示したり、画像内の要素を結んだりする用途にも使用できます。
吹き出しを追加
説明画像などで便利な吹き出しも利用できます。
吹き出しのしっぽ部分も調整できるため、説明したい対象に向けて配置できます。
スクリーンショットへ簡単な解説を入れたい場合にも便利です。
画像を追加
背景とは別に、画像を「画像レイヤー」として追加できます。
画像レイヤーには、
- メディアライブラリ
- パソコンからアップロード
- クリップボード
の画像を利用できます。
追加した画像は背景とは独立しているため、自由に移動・拡大・回転できます。
カスタムフォントの設定
カスタムフォントの設定方法には2通りの方法があります。
⓵ フォントでカスタムフォントを選択くすると、カスタムフォント名の入力欄が表示されます。
そこにシステムで使用できるフォント名を入力するとフォントが追加され反映されます。
※ Mac や Safari などを使用している場合は、システムフォントがブラウザーで使用できない場合がります。
② システムフォントが使用できない。または、iCatch Editor だけでカスタムフォントを使用できるようにしたい場合は、フォントファイルをアップロードして使用することが可能です。
カスタムフォントを選択をクリックすると追加されたフォントの一覧、その下に、フォントファイルのを選択のボタンが表示され、クリックしアップロードするファイルを選択してアップロードします。
画像レイヤーのデザイン
画像レイヤーには、
- 枠線
- 角丸
- 影
- 透明度
- 左右反転
- 上下反転
- 位置
- サイズ
- 回転
などを設定できます。
単に別の画像を重ねるだけでなく、デザインの一部として使用できます。
円形・楕円形に画像を表示
画像レイヤーは、
- 四角形
- 角丸四角形
- 円
- 楕円
などの形で表示できます。
プロフィール画像を丸く表示したり、写真の一部分だけを円形で見せたりできます。
画像レイヤーもクロップ
クロップ機能は背景画像だけではありません。
追加した画像レイヤーにも使用できます。
画像レイヤーのクロップは、元の画像ファイルを直接切り取るのではなく、Hwinote iCatch Editor上で表示する範囲を指定する非破壊方式です。
さらに、
画像そのものの縦横比固定 と クロップ範囲の縦横比固定 は、それぞれ独立してON・OFFできます。
そのため、
「表示する画像サイズは自由に変更する」
「切り抜く範囲だけは1:1に固定する」
といった編集もできます。
キャンバスの一部分をコピーして画像にする
キャンバス上の一部分を選択し、新しい画像レイヤーとしてコピーできます。
コピーする範囲は、
- 四角形
- 円形
- 楕円形
から選べます。
たとえば操作画面のスクリーンショットを背景にして、
「このボタン部分だけをコピーして拡大表示する」
といった説明画像も作成できます。
外部の画像編集ソフトで切り抜き画像を別途作る必要がありません。
レイヤー一覧で各要素を管理
追加した文字、図形、画像などはレイヤー一覧から管理できます。
各レイヤーでは、
- 選択
- 表示・非表示
- ロック・ロック解除
- 削除
- 前面へ移動
- 背面へ移動
などを操作できます。
画像内の要素が多くなった場合でも、レイヤー一覧から目的の要素を選択できます。
複数レイヤーをまとめて選択
Ver2.0.0では、複数の要素を同時に選択できます。
たとえば、
- 矢印＋説明文
- 写真＋枠＋文字
- 複数の図形
などをまとめて選択できます。
複数の要素を一度に移動したいときに便利です。
グループ化
複数選択した要素は、1つのグループとしてまとめられます。
グループ化した要素は、まとめて、
- 移動
- 拡大・縮小
- 回転
- 複製
できます。
複数の要素の位置関係を崩さず、そのまま別の場所へ移動できます。
必要になればグループを解除して、再び各要素を個別に編集できます。
複製
1つのレイヤーだけでなく、作成したグループ全体を複製できます。
同じデザインの説明パーツを複数配置したい場合などに便利です。
ガイド線とスナップ
文字や図形を配置するときには、ガイド線とスナップを利用できます。
キャンバスの中央やほかの要素との位置関係を確認しながら配置できます。
Ver2.0.0では、
スナップ機能 と ガイド線の表示
をそれぞれ独立して設定できます。
「位置合わせはしたいけれどガイド線は表示したくない」といった使い方もできます。
⑤ 記事タイトルを配置
投稿タイトルを画像内へ表示できます。
タイトルはキャンバス上でドラッグして移動でき、
- サイズ
- フォント
- 文字色
- 縁取り
- 影
- 回転
- アーチ
などを設定できます。
記事タイトルをそのまま利用できるため、タイトルをコピーして画像編集ソフトへ貼り付ける必要がありません。
キーボード操作
編集を効率よく行うためのキーボード操作にも対応しています。
Escapeキーについても、現在行っている編集内容に応じた優先処理が行われるようになっています。
マウスだけでなくキーボードも組み合わせることで、よりスムーズに編集できます。
編集した画像を保存
画像が完成したら保存します。
Hwinote iCatch Editorで生成された画像は、WordPressのメディアライブラリへ登録されます。
保存後にはWordPressの添付ファイル情報も作成され、
- サムネイル
- 中サイズ
- 大サイズ
- テーマやプラグインが登録した画像サイズ
なども生成・更新されます。
アイキャッチ画像として保存する場合
アイキャッチ画像編集から保存した場合は、生成した画像がメディアライブラリへ登録され、その投稿のアイキャッチ画像として設定されます。
Gutenberg画像ブロックを編集する
画像ブロック連携を有効にしている場合は、ブロックエディター上で画像ブロックを選択し、Hwinote iCatch Editorを開きます。
選択中の画像を背景として読み込み、
- 文字
- 矢印
- 図形
- 別の画像
- 吹き出し
などを追加できます。
保存方法を選んで保存
編集後は、
新しい画像として保存 または、元の画像を直接置き換える を選択し保存できます。
新しい画像として保存
「新しい画像として保存」を選択すると、編集結果が新しいメディアライブラリの添付ファイルとして保存されます。
元画像はそのまま残ります。
選択していた画像ブロックは、新しく作成した画像へ切り替わります。
ここで重要なのが、画像を保存したあとに投稿または固定ページ自体も更新する必要があることです。
Hwinote iCatch Editorで新しい画像を作成しただけでは、画像ブロックの変更はまだ投稿内容として保存されていません。
画像を保存した後、WordPressの「更新」または「保存」を行ってください。
元画像を直接置き換える
対応している画像では、現在選択しているメディアライブラリの画像を直接置き換えることもできます。
直接置き換えでは、新しい添付ファイルを作るのではなく、同じ添付ファイルIDを維持したまま画像ファイルと画像情報を更新します。
そのため、同じメディア画像を使用している別の記事やウィジェットなども、新しい画像へ変わります。
URLを変更せず既存画像を修正したい場合に便利です。
直接置き換えを使う場合の注意点
直接置き換えは非常に便利な機能ですが、通常の「新しい画像として保存」とは性質が大きく異なります。
直接置き換えると、同じメディアライブラリの添付ファイルを使用しているすべての場所に影響します。
たとえば1枚の画像を複数の記事で使用していた場合、そのすべてが置き換え後の画像になります。
また、Hwinote iCatch Editorには、置き換え前の画像へ戻す機能はありません。
重要な画像を編集する場合は、事前にバックアップを作成するか、「新しい画像として保存」を利用してください。
保存前には確認画面が表示されるため、内容と保存方法を確認してから実行してください。
4000ピクセルを超える画像について
元画像の縦または横が4000ピクセルを超えている場合、直接置き換えは利用できません。
Hwinote iCatch Editorのキャンバスサイズは最大4000×4000ピクセルのため、元の大きな画像を意図せず縮小してしまうことを防ぐためです。
この場合でも、新しい画像として保存する方法は利用できます。
画像を置き換えたのに以前の画像が表示される場合
直接置き換えでは、画像URLが同じまま更新される場合があります。
そのため、画像を変更した直後でも、
- Webブラウザー
- WordPressのキャッシュプラグイン
- Webサーバー
- リバースプロキシ
- CDN
などに以前の画像が残っていると、古い画像が表示されることがあります。
画像が変わらない場合は、これらのキャッシュを削除して再読み込みしてください。
保存後は1枚の完成画像になります
Hwinote iCatch Editorを使用する際に覚えておきたい重要な点があります。
作成した画像を保存すると、
- 文字
- 図形
- 画像レイヤー
- クロップ情報
- 編集履歴
などは、すべて1枚の完成画像として統合されます。
編集用のプロジェクトデータとして保存されるわけではありません。
そのため、一度保存した画像をもう一度開いて、
「前回追加した文字だけを変更する」
「前回の矢印を動かす」
「前回作ったグループを編集する」
といった操作はできません。
保存前に内容を確認してから完成画像として保存してください。
メディアライブラリ画像を編集
メディアライブラリから編集する場合は、
- WordPressのメディアライブラリを開く
- 編集したい画像を選択する
- 「さらに詳細を編集」を開く
- 「この画像を編集」からHwinote iCatch Editorを起動する
という流れで利用できます。
編集後は、
- 新しい画像として保存
- 元画像を置き換える
方法を選択できます。
JPEG、PNG、WebPなど、対応している画像で直接置き換えを利用できます。
デスクトップとタブレットに対応
Hwinote iCatch Editorは、デスクトップPCとタブレットでの利用に対応しています。
Ver2.0.0では、
- iPad
- iPad Mini
- 縦向き
- 横向き
なども考慮して、編集画面のレイアウトを調整しています。
一方、スマートフォンでは編集領域が小さく、すべてのキャンバス操作を行うことが難しいため、Hwinote iCatch Editorを起動する操作は表示されません。
基本的には、PCまたはタブレットで利用してください。
日本語・英語に対応
Hwinote iCatch Editorのソースインターフェースは英語で作成されています。
日本語の翻訳ファイルも同梱しているため、WordPressを日本語環境で使用している場合は日本語で操作できます。
Ver2.0.0では翻訳ファイルも現行の機能に合わせて更新しています。
Hwinote iCatch Editorの基本的な使い方
最後に、それぞれの用途での基本的な流れをまとめます。
アイキャッチ画像を作る
- 投稿または固定ページを開きます。
- Hwinote iCatch Editorを開きます。
- キャンバスサイズを設定します。
- 背景画像または背景色を設定します。
- 必要に応じて背景画像をクロップします。
- 記事タイトルのデザインを調整します。
- 文字・図形・線・画像などを追加します。
- 必要に応じてグループ化や位置合わせを行います。
- 完成状態を確認します。
- 保存してアイキャッチ画像に設定します。
記事内の画像へ説明を追加する
- ブロックエディターで画像ブロックを選択します。
- Hwinote iCatch Editorを開きます。
- 矢印や囲み枠を追加します。
- 必要に応じて説明文やマーカーを追加します。
- 新しい画像として保存するか、元画像を置き換えるか選択します。
- 新しい画像として保存した場合は投稿を更新します。
ブログの操作説明やマニュアル記事などで便利な使い方です。
メディアライブラリ画像を修正する
- メディアライブラリから画像を選択します。
- 画像の詳細編集画面を開きます。
- Hwinote iCatch Editorを起動します。
- クロップや文字・図形追加などの編集を行います。
- 新しい画像として保存するか、元画像を置き換えるか選択します。
元画像を残しておきたい場合は、「新しい画像として保存」をおすすめします。
Ver1.6.0からVer2.0.0で何が変わった？
Ver1.6.0と比べると、Ver2.0.0では利用できる範囲が大きく広がりました。
| 機能 | Ver1.6.0 | Ver2.0.0 |
|---|---|---|
| アイキャッチ画像作成 | ○ | ○ |
| Gutenberg画像ブロック編集 | ― | ○ |
| メディアライブラリ画像編集 | ― | ○ |
| 元画像の直接置き換え | ― | ○ |
| 背景画像クロップ | ― | ○ |
| 画像レイヤークロップ | ― | ○ |
| 円・楕円などの画像表示 | ― | ○ |
| キャンバス範囲の画像コピー | ― | ○ |
| 複数選択 | ― | ○ |
| グループ化 | ― | ○ |
| グループ全体の複製 | ― | ○ |
| カスタムフォントファイル | ― | ○ |
| プレビュー拡大・縮小 | ― | ○ |
| PNG・JPEGなどの保存形式 | 拡張前 | ○ |
| タブレット向けレイアウト | 基本対応 | 改善 |
Ver1.6.0では「アイキャッチ画像を作る」という用途が中心でした。
Ver2.0.0では、
WordPressで使用する画像を、その場で作成・修正する
という用途まで広がっています。
こんな使い方におすすめ
Hwinote iCatch Editorは、たとえば次のような場合に便利です。
ブログのアイキャッチ画像を手軽に作りたい
記事を書いたあと、そのままWordPress上でアイキャッチ画像を作れます。
スクリーンショットへ矢印を追加したい
画像ブロックを直接編集できるため、別の画像編集ソフトを開かずに説明画像を作れます。
画像の一部分を拡大して説明したい
キャンバス範囲のコピー機能を使って、一部分を新しい画像レイヤーとして配置できます。
メディアライブラリの画像を少しだけ修正したい
クロップや文字追加などの簡単な修正であれば、WordPress管理画面の中だけで完了できます。
画像URLを変更せず修正したい
対応している画像では、同じ添付ファイルIDを維持した直接置き換えを利用できます。
さいごに
Hwinote iCatch Editor Ver2.0.0では、これまでのアイキャッチ画像作成機能を大幅に拡張しました。
特に大きな追加機能は、
Gutenberg画像ブロックの編集
メディアライブラリ画像の編集
背景・画像レイヤーのクロップ
複数選択とグループ化
キャンバス範囲のコピー
カスタムフォント
PNG・JPEGなどの出力設定
既存メディア画像の直接置き換え
です。
また、設定画面から画像ブロック連携、保存形式、JPEG品質、フォントの読み込みなどをサイトに合わせて設定できます。
Ver1.6.0では主にアイキャッチ画像を作成するためのプラグインでしたが、Ver2.0.0では、記事内の説明画像やメディアライブラリ画像の編集まで行えるようになりました。
本格的な画像編集ソフトの代わりを目指すものではなく、
「ブログやWebサイトで使う画像を、WordPressから離れず手軽に作成・修正する」
ことを目的とした画像編集ツールです。
記事を書きながら画像もその場で作成・修正したい方は、Hwinote iCatch Editor Ver2.0.0をぜひお試しください。
コメント