お得な入会キャンペーンいろいろ
PR

WordPress 画像編集方法

WordPress 写真の編集方法 ブロックエディタ
この記事は約9分で読めます。

WordPress ブロックエディタ(Gutenberg)画像ブロックの編集方法です。

画像ブロックとは

画像ブロックを利用すると、投稿や固定ページに画像を挿入することができます。

ブロックエディターでは画像ブロックの設定により画像の表現の幅が広がりました。

画像を編集するとメディアライブラリに編集用の新しい画像がコピーされます。元の画像は影響を受けないので複数投稿で利用できます。

画像ブロックツールバー

画像ブロックを選択すると表示されるメニューです。

  1. ブロックタイプ変更
  2. ブロックのドラッグ
  3. 上下に移動
  4. デュオトーンフィルターを画像に追加(画像の色を変更できるフィルター)
  5. 配置を変更する (テーマに依存。左 ・ 中央 ・ 右、幅広、全幅のオプション)
  6. 画像にリンクを設定(添付ファイルページ、元のメディアファイル、カスタム URL を開くように選択できます)
  7. 画像編集ツール(切り抜きなど)
  8. 画像上にテキストを追加(画像ブロックがカバーブロックになります)
  9. 別の画像に変更する
  10. 追加オプション
WordPress 画像ブロックツールバー

デュオトーンフィルタ

デュオトーンフィルターとは、デュオトーンの名前の通り2色の色調を画像に反映させるフィルターです。

元の画像を失わずに、ツートンカラー効果を作成します。

適用

例として「青と赤」を適用します。

[デュオトーンフィルターを適用]を押します。

WordPress デュオトーンフィルターを適用

デュオトーンメニューが表示されるので[青と赤]を押します。

WordPress デュオトーンのツートンカラー効果を作成

適用されました。

WordPress デュオトーンフィルター 青と赤を適用

色の変更

カラーバーのドットを選択すると色の変更が可能です。

  • 正方形のフィールドからトーン
  • 上バーで色
  • 下バーで濃淡
カラーモデルの選択肢

HEX:カラー値

WordPress デュオトーンフィルター 色の変更

RGB

WordPress デュオトーンフィルター RGB

HSL

WordPress デュオトーンフィルター HSL

影とハイライト

影 ハイライトでは下のパレットから色を選択できます。

WordPress デュオトーンフィルター 影とハイライト

リセットとクリア

リセットでフィルターの取り消し、クリアでデュオトーンフィルターを解除できます。

WordPress デュオトーンフィルター リセットとクリア

配置

配置ツールを利用すると、画像表示位置を設定できます。

  • なし:標準位置
  • 幅広:テーマ依存
  • 全幅:テーマ依存
  • 左寄せ
  • 中央揃え
  • 右寄せ
WordPress 画像の配置

例として全幅を選択すると幅いっぱいに画像が配置されました。

WordPress 画像を全幅

画像にリンク設定

画像ブロックの画像を選択して、ブロックツールバーの[リンクアイコン]を押すと、リンクウインドウが表示されます。

WordPress 画像にリンク設定

「URL をペーストまたは入力して検索」欄にリンクを作りたいアドレスをペーストして Enter を押します。

WordPress 画像にURL をペーストまたは入力して検索

「URL をペーストまたは入力して検索」欄右にある[矢印]を押すとメニューが開きます。

新しいタブを開くなど必要事項があれば設定してください。

  • 新しいタブで開く
  • リンク REL 属性
  • リンク CSS クラス
WordPress 画像のリンク先を新しいタブで開く

メディアファイル

主に画像の保存先アドレスへリンクします。

下記画像リンクを押すとメディアファイルに移動します。

WordPress 画像のリンク先がメディアファイル
画像のリンク先がメディアファイルの例

添付ファイルのページ

主に画像に付与する情報や説明ページへリンクします。

下記画像リンクを押すと添付ファイルのページに移動します。

WordPress 画像のリンク先が添付ファイル
画像のリンク先が添付ファイルの例

置換

画像ブロックの画像ファイルを変更できます。

[置換]を押すと変更する画像を選択するメニューが開きます。

  • メディアライブラリを開く
  • アップロード
  • 現在のメディア URL を直接編集

画像を選択すると置換が完了です。

WordPress 画像の置換方法

リンクの詳細は下記ページで紹介しています。

切り抜きツール

ツールバーの[切り抜き]アイコンを押すと編集ツールが表示されます。

WordPress 画像切り抜きツール

画像編集ツール

  • ズーム
  • 縦横比
  • 回転
WordPress 画像編集ツール

ズーム

ズームツールを利用して画像を表示するサイズやコンテンツに合わせて切り抜きます。クリックとドラッグでズームする部分を操作します。

[ズーム]アイコンを押すと、ズームツールが開きます。

WordPress 切り抜きのズームツール

[バー]か[数値]で拡大率を変更できます。

WordPress

画像上のカーソルが[十時矢印]の状態で左クリックを押している間は、画像をつかみ表示位置を変更できます。

WordPress 切り抜きのズームツール ドラッグで移動

拡大比率と位置が決まったら[適用]を押して確定します。

WordPress WordPress 切り抜きのズームツール適用

ズームツールで指定した位置が切り抜かれます。

WordPress WordPress 切り抜きのズームツールで切り抜き完了

ズームの最大値は 300% です。

WordPress 切り抜きのズームツール 最大倍率は300%

縦横比

幅と高さの比率で画像を切り抜きます。

  • 元のサイズ
  • 正方形
  • 横方向
    • 16:10
    • 16:9
    • 4:3
    • 3:2
  • 縦方向
    • 10:16
    • 9:16
    • 3:4
    • 2:3

例として正方形を切り抜きます。

[縦横比]アイコンを押すと、選択メニューが開くので[正方形]を押します。

WordPress 切り抜きの縦横比ツール

切り抜きされる部分がハイライトされるので問題なければ[適応]を押します。

WordPress 画像を正方形に切り抜く方法

正方形に切り抜きました。

WordPress 写真を正方形に切り抜いた

回転

画像を回転します。

  • 1回押すと 90°
  • 2回押すと 180°
  • 3回押すと 270°
  • 4回押すと 360°

例として2回押して 180° 回転しています。

[回転]アイコンを押すと、画像が回転します。[適応]を押して確定します。

WordPress 切り抜きの回転ツール

画像上にテキストを追加する

ツールバーの[画像上にテキストを追加する]アイコンを押すと画像ブロックがカバーブロックになります。

カバーブロックとは名前の通り、元のブロックを覆う形で別のブロックを前面に適応することができるブロックです。

WordPress 画像上にテキストを追加

「ブロックを選択するには「/」を入力」を押します。

WordPress 画像ブロックをカバーブロックへ変換

段落ブロックが表示され、文字入力できる状態になります。

WordPress カバーブロックの段落ブロック

文字を入力します。

WordPress カバーブロックに文字入力

カバーブロックツールバー

配置

  • なし
  • 幅広:テーマ依存
  • 全幅:テーマ依存
  • 左寄せ
  • 中央揃え
  • 右寄せ

例として幅広を設定します。

[配置]アイコンを押すと選択メニューが表示されるので[幅広]を押します。

WordPress カバーブロックの配置

幅広に設定できました。

WordPress カバーブロックを幅広に設定

コンテンツ位置を変更

カバーブロックの要素を画像上の上・下・左・右・斜の 8方向に配置します。

例として右下に配置します。

[コンテンツ位置を変更]アイコンを押すと位置選択メニューが表示されるので[右下]を選択します。

WordPress カバーブロックのコンテンツ位置を変更

フルハイトの配置

名前の通り最大限の高さで画像を表示するように設定します。

クリックすると表示されるブロックのツールバーで「フルハイトを切り替え」アイコンを押すと常に最大限の高さで画像を表示します。

WordPress カバーブロックのフルハイトの配置

文字色を変更する

  1. カバーブロックの文字色を変更するテキストを選択して、右上の[歯車]マークを押します。
  2. 右カラムにメニューが表示されるので[ブロック]タブを選択すると追加設定が表示されます。
  3. [色]内[テキスト]を選択すると[カラーパレット]が表示されるのでテキスト色を変更してください。
WordPress カバーブロックの文字色を変更

カバーブロックを明るくする方法(オーバーレイ)

カバーブロックに変更するとオーバーレイがかかり画像が暗く見えます。

オーバーレイの不透明度を調整して画像を明るくする方法です。

  1. カバーブロックを選択して、右上の[歯車]マークを押します。
  2. 右カラムにメニューが表示されるので[ブロック]タブを選択すると追加設定が表示されます。
  3. [色]内[オーバーレイの不透明度]のバーかテキスト入力を利用してオーバーレイの係具合を調整してください。
WordPress カバーブロックを明るくする方法

キャプション

画像に見出しや説明文を表示する機能です。

画像の下にある[キャプションを追加]を押すとキャプションが入力できます。

WordPress 画像のキャプションは説明文
キャプションの説明のキャプション

下記が適用できます。

  • 太字
  • イタリック
  • リンク
  • インラインコード
  • インライン画像
  • キーボード入力
  • ハイライト
  • 上付き
  • 下付き
  • 打ち消し線
WordPress 画像のキャプション 文字の装飾
キャプションに太字を適用

画像ブロックの設定

ブロックの追加設定方法です。

メインカラムで追加設定するブロックを選択して、右上の[歯車]マークを押します。

右カラムにメニューが表示されるので[ブロック]タブを選択すると追加設定が表示されます。

追加設定の内容はテーマに依存する可能性があります。

WordPress 画像ブロックの設定

スタイル

画像のスタイルを変更できます。

各スタイルをポイントするとプレビューが表示されます。

  • デフォルト:挿入した元画像が表示されます
  • 角丸:画像の角が円形
  • Clarendon
  • Gingham
  • Moon
  • Lark
  • Reyes
  • Juno
  • Slumber
  • Crema
  • Ludwig
  • Aden
  • Perpetua
  • Mono

サイトに使用しているテーマに依存しています。見本は Cocoon テーマです。

WordPress 画像スタイル

設定

Alt テキスト

Alt テキスト(代替テキスト)欄には画像の説明を追加することができます。特に意味の無い画像なら空欄でも問題有りません。

画像サイズ

  • サムネイル
  • フルサイズ

から選択できます。

サイズの基準は[ダッシュボード]左メニュー[設定]内[メディア]を押します。

メディア設定から画像サイズの元となるサイズを入力できます。

WordPress メディア設定の画像サイズ

画像の寸法

画像の寸法が変更できます。

  • 幅と高さ:サイズ入力
  • 割合:25% , 50% , 75% , 100% の割合入力
  • リセット:変更したサイズを元のサイズに戻します。

画像サイズはメインカラムの画像のハンドルをドラッグして変更することができます。

WordPress 画像サイズの変更方法

枠線と角丸

画像の枠に色を付けたり、角に丸みを加えることができます。

  1. 枠線色とスタイルピッカー
  2. サイズ入力
  3. 個別に指定する
  4. 枠線オプション
WordPress 枠線と角丸のメニュー

枠線

画像に枠線を追加できます。

  • 色と太さの変更
  • 上下左右を個別指定
枠線色とスタイルピッカー

[枠線色とスタイルピッカー]を押すと色が選択できるカラーパレットが表示されます。

WordPress 枠線色とスタイルピッカー

例:赤で 5PX の枠線

WordPress 画像枠線の例

例:上下左右を別々の枠線

WordPress 画像個別の枠線

角丸

画像の角を丸くできます。

  • 丸みのサイズ変更
  • 角ごとの丸みの個別指定

例:角丸 50PX

WordPress 画像の角丸例

例:角別に指定

WordPress 画像の角丸 個別例

枠線と角丸は一緒に利用できます。

WordPress 画像の枠線と角丸

リセット

枠線右横の[︙]メニューを押すとリセットメニューが表示されます。

リセット項目を押して、適用した内容を解除できます。

  • 枠線
  • 角丸
  • すべてリセット
WordPress 枠線と角丸のリセット

高度な設定

ブロックに下記要素を追加できます。

タイトル属性

ページでの画像の役割を説明することができます。

HTML アンカー

アンカーを制作するとページのこのセクションに直接リンクできるようになります。

追加 CSS クラス

複数クラスを半角スペースで区切ります。

まとめ

WordPress の画像を編集する方法でした。

画像ブロックは挿入してから、画像に文字を追加するなど HTML では複雑な内容も簡単に利用できます。

記事の書き方によっては、画像の編集がグッと楽になる可能性があります。

ブロックエディタ
りゅうをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
りゅう

普段の疑問を解決した方法が中心で書きたいことをどんどん書いてます。

りゅうをフォローする
とは

コメント

タイトルとURLをコピーしました