株式会社火燵(こたつ)は、成果や売上にこだわる方のための動画マーケティング会社です。動画コンサルティング・動画制作・WEBマーケティング・動画制作内製化支援ならお任せください。

WordPressの画像挿入・編集方法【初心者向け/WordPressの使い方】

その他

みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。

画像ブロックアイコン

今回は、WordPressのエディター「Gutenberg」でよく使う「画像」ブロックを紹介しましょう。

画像ブロックの挿入方法

  1. 空白ブロックの右下にあるプラスボタンをクリックします。
  2. 画像」を選択します。
    画像ブロックの挿入
  3. 3つのボタンのうち、1つを選択します(今回は新しい画像をアップするため「アップロード」)画像の挿入選択画面
    • アップロード
      新しい画像をアップして掲載します
    • メディアライブラリ
      アップロード済みの画像を掲載します
    • URLから挿入
      画像のURLを指定します
  4. 画像が挿入されました。
画像ブロックの追加方法(アニメーション)
画像ブロックの挿入方法
画面左上のプラスボタンから画像ブロックを追加(アニメーション)
画面左上のプラスボタンからでも可能です。

「メディアライブラリ」からの画像挿入方法

メディアライブラリから画像を選択(アニメーション)
  1. 画像の選択画面が表示されます。
  2. クリックで画像を選びましょう。
  3. 右下の「選択」をクリックします。
  4. 挿入されました。
メディアライブラリから画像をクリックして選択する
メディアライブラリの画像選択方法

新規画像のアップと挿入を素早くする

新しい画像のアップと挿入をするときに、画像ブロックを作らなくても良い方法があります。

ファイルをWordPressにドラック&ドロップで挿入(アニメーション)
  1. フォルダーウィンドウから、アップしたいファイルを選択します。
  2. WordPressのエディターに、ドラッグ&ドロップしましょう。
  3. 挿入されました。

これで簡単に早く挿入できます。画像以外のメディア(ファイルや動画)でも使えます。覚えておきましょう。

画像をアップできないときの対処法

アップロードできない場合は、下記2点のいずれかに該当しているかもしれません。

  1. 画像の容量が大きすぎる
  2. WordPressが対応していない画像形式である

画像の容量が大きすぎる

アップロードファイルのサイズ容量が大きすぎる場合のエラーメッセージ

撮影したものをそのままではなく、必ず軽量化したものをアップしてください
アップできるできないに関わらず、重要なポイントです。

皆さんはネットを見る時、数秒待ってもページや画像を開けないと、他事をしたり別のページに移動しますよね。
つまり、ファイルが重ければユーザーはすぐに離脱してしまい、中身を見てくれません。

ファイルの軽量化は、それを防ぐためです。必ずしておきましょう。

WordPressが対応していない画像形式である

アップロードファイルの形式が対応していない場合のエラーメッセージ

画像をアップする場合、形式がこの3つ以外だとアップロードはできません

  • JPG
  • GIF
  • PNG

このいずれかに変換してください。

おすすめのツール

画像の軽量化、変換がよくわからない方に、おすすめのツールがあります。

どれもブラウザ上で、無料で利用できます。ダウンロードの必要はございません。
試してみて、使いやすいものをご活用ください。

Alt テキスト(代替テキスト)の記述

画像を挿入できたら、右メニューバーにある「Alt テキスト(代替テキスト)」に画像の説明文を入れましょう。

Altテキスト(代替テキスト)の入力エリア

問題が起きて画像が表示されなかった時の説明や、視覚障がい者の補助、SEOでは画像検索での表示など、重要な役割をもちます。忘れないようにしましょう。

「メディアライブラリ」から挿入する際にも、「代替テキスト」の欄があります。必ず入れておきましょう。

メディアライブラリのAltテキスト(代替テキスト)の入力エリア
メディアライブラリの「代替テキスト」入力エリア

「メディアライブラリ」で代替テキストを入れておくと保存されるため、再掲載のときに確認する必要がなくなり便利ですよ。

メディアライブラリで「代替テキスト」を入力すれば、挿入時に反映される(アニメーション)
画像を「選択」した後、右メニューバーの「Alt テキスト(代替テキスト)」に記入した内容が反映されます。

画像下のキャプション

画像キャプション

画像下の「キャプションを入力」には、説明文を追加できます。
リンクもつけられるため、素材サイトのクレジット表記にも利用できます。
テキストも装飾できます。装飾方法については、下記のページをご覧ください。

スタイルの変更

画像のスタイルも、右メニューバーから変更できます。

画像のスタイル変更(アニメーション)
画像のスタイル変更
別のテーマの画像スタイル一覧

中には、さまざまなスタイルを選べるテーマもあります。

画像サイズ変更

画像サイズ変更

「画像サイズ」では、画像の大きさを以下の4種類から選べます。

  • サムネイル
  • フルサイズ
画像サイズの選択肢

デフォルトでは「サムネイル」が一番小さく「フルサイズ」が一番大きいサイズです。

実際の画像サイズは、その下にある「画像の寸法」の「」と「高さ」で確認できます。
下にある各パーセンテージを選択すれば、更に画像を小さくできます。

リセット」をクリックすれば「画像サイズ」で選択した大きさに戻ります。

右メニューバーでの画像サイズ変更の方法(アニメーション)
画像サイズ変更方法

自由に指定のサイズを変えるには、「画像の寸法」から手入力できます。

エディタ画面と右メニューバーで画像サイズを調節できる

エディター内の画像の右端と下側にある、青い丸の部分をドラッグして調節する方法もあります。

エディタ画面と右メニューバーで画像サイズを調節(アニメーション)

配置変更

テキストと同じく、左、中央、右寄せに配置変更できます。
テーマによっては、幅広と全幅を選べるのもあります。

画像ブロックツールの配置変更メニュー
「配置を変更」をクリックした画面
配置の変更を試してみた画面(アニメーション)
配置を変更すると、このように表示されます。
全幅
画像をウィンドウサイズいっぱいに広げます。
幅広
画像をブロックの幅いっぱいに広げてくれます。
画像を小さくして左か右に寄せると、テキスト回り込みになる

画像を2つ並べたり、テキストを回り込ませたりするには、1つの画像を小さくし、左か右揃えに配置します。

画像配置左寄せでのテキスト回り込み(WordPressエディタ画面)
WordPressエディタ画面
画像配置左寄せでのテキスト回り込み(プレビュー画面)
プレビュー画面

ただしスマートフォンだと、画像サイズによってはうまく回り込み表示ができません。ご注意ください。

画像のテキスト回り込みをスマートフォンでプレビュー(アニメーション)
テキスト回り込みをデスクトップサイズからスマートフォンサイズでプレビューしてみた様子

ブロックツールの「リンク」のアイコンをクリックで、画像にリンクをつけられます。

画像ブロックツールの「リンク」挿入ボタン
「リンク」は配置変更アイコンの隣にあります。
画像ブロックツールのリンク設定メニュー

リンク先はURLの他に、画像の詳細ページ(添付ファイルのページ)やオリジナルサイズの画像(メディアファイル)も指定できます。

掲載画像が小さくて見えにくい、拡大画像を見せたいときに活用しましょう。

リンク設定の方法(アニメーション)
リンク設定

リンク設定
右端にある下向き矢印です。リンク先を新規タブで開く設定ができます。

リンクの編集と削除
編集
リンクの設定後に表示される鉛筆マークです。リンク先を変更できます。
リンクの削除
鉛筆マークの右隣にある×印です。リンクを削除します。

画像の切り抜き

リンク」の隣りにあるボタンでは、画像の切り抜きもできます。

画像ブロックツールの切り抜きボタン
切り抜きボタン

クリックすると、切り抜きアイコンが虫眼鏡アイコンと長方形のアイコン、左回りの丸い矢印のアイコンに変わります。

画像ブロックツールの切り抜きボタンのクリック後に表示されるボタン
切り抜きボタンをクリック後のブロックツール

虫眼鏡アイコンはズーム、長方形アイコンは縦横比、左回りの丸い矢印は回転のボタンです。

虫眼鏡アイコン=ズーム 長方形アイコン=縦横比 左回りの丸い矢印=回転
各ボタン説明
切り抜き方法(アニメーション)
ズーム
画像の拡大と切り抜きたい箇所の移動ができます。
縦横比
画像の比率を選択します。
回転
画像を右に90度ずつ回転させます。
適用
変更を決定します。
キャンセル
切り抜きをやめます。

選択できる比率の一覧は、こちらにまとめました。

比率の選択肢一覧
  • 正方形
  • 16:10
    WXGA(PC画面など)
  • 16:9
    ワイド(YouTubeなど)
  • 4:3
    スタンダード(アナログテレビなど)
  • 3:2
    デジタルカメラなどで撮影した写真で多い

それぞれ、方向を縦横選択できます。

切り抜いた画像は、別の画像としてメディアライブラリに追加されます。

切り抜き後の画像がメディアライブラリに保存される
切り抜いたうさぎの画像が、メディアライブラリに入っています。

このブロックツールでの切り抜きは、比率を選択して拡大で調整するため、直感的に自由なサイズで切り抜きできません。

それでは不便ですから、自由に切り抜く方法もご紹介しましょう。

メディアライブラリでの切り抜き

  1. メディアライブラリを開きます。
  2. 切り抜きたい画像を選択します。
    新しい画像の場合は、「ファイルをアップロード」からアップしましょう。
    メディアライブラリでの画像アップロード
  3. 画像を編集」をクリックします。
    「画像を編集」リンク
  4. 編集画面が開きました。
    メディアライブラリの編集画面
    切り抜きたい箇所をドラッグで選択しましょう。
  5. 画像のトリミング」の選択範囲で切り抜くサイズを確認できます。
    縦横比の指定もできます。
  6. 選択できたら「切り抜き」をクリックしましょう。
    • 他にも90度ずつの回転や反転もできます。
    • 「画像縮尺の変更」では画像サイズを変更できます。
  7. 変更が完了したら「保存」しましょう。
  8. 選択」をクリックします。
    メディアライブラリ右下の「選択」をクリック
一連の操作

しかし、これだけでは反映されません

メディアライブラリで画像を切り抜いても反映されない(アニメーション)
切り抜きが反映されない様子

まだ切り取った画像のURLではなく、元画像のURLが呼び出されている状態です。
呼び出す画像のURLを、切り取った方に変更する必要があります。

  1. 置換」をクリックします。
  2. メディアライブラリを開く」をクリックします。
    置換→メディアライブラリを開くを選択
  3. 切り取った画像をクリックします。
  4. 画面右下に「URL をクリップボードにコピー」とあるので、クリックしましょう。
    メディアライブラリの「URLをクリップボードへコピー」のボタン
    切り取った画像のURLがコピーされました。
  5. 右上の「×」でメディアライブラリを閉じます。
  6. 置換」をクリックし、「現在のメディアURL」の右にある「編集」をクリックします。
    置換→編集をクリック
  7. 先程コピーしたURLを貼り付けます。
  8. 入力エリアの右にある「送信」ボタンをクリックします。
    現在のメディアURLを変更する
  9. 今度こそ反映されました。
    切り抜き後の画像を反映
画像を切り抜き済みのものに差し替える方法(アニメーション)
切り抜き画像の反映方法をアニメーションで確認

編集した画像は元に戻せます。

  1. メディアライブラリを開き、「画像を編集」で編集画面に行きます。
    「画像を編集」リンク
  2. 元の画像を復元」という項目をクリックして開きます。
    元の画像を復元する
  3. 画像を復元」をクリックしましょう。
    「画像を復元」をクリックする
  4. 元の画像に戻りました。
    元の画像に戻った後の表示
画像を復元する(アニメーション)
編集した画像の復元方法

デュオトーンのフィルター

モノクロなど、デュオトーンのフィルターもかけられます。

デュオトーンフィルターがかかった犬の写真

「デュオトーン」とは、2色を組み合わせたデザインのことです。

画像のブロックツールバーにある丸い点線の円のアイコンが、デュオトーンフィルターを適用するボタンです。

画像ブロックツールのデュオトーンボタン
デュオトーンボタン
デュオトーンの色をパレットから選択する(アニメーション)

表示された配色を選択すると、写真が該当の2色で構成されます。

デュオトーンメニュー

」の色は写真の暗い部分に、「ハイライト」は明るい部分に配色します。

デュオトーンの配色選択方法

その他の色にしたい時は、2色のバーの下にある「」や「ハイライト」をクリックしましょう。パレットが表示され、この中からそれぞれ色を選べます。

カスタムカラー」か、両端にある丸を選択すれば、自由に色を変更できます。

クリア」をクリックすれば、フィルターが外れて元の写真に戻ります。

デュオトーンの配色変更方法(アニメーション)
デュオトーンの配色設定

以上、Gutenbergでよく使う「画像」ブロックの使い方を解説しました。
その他の画像関連ブロックの使い方も紹介しております。

次回は、YouTube動画などを埋め込む方法を紹介しましょう。

WordPressレクチャーシリーズ一覧

「その他」の関連記事


新着記事