みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。
![画像ブロックアイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/icon_img-block.png)
今回は、WordPressのエディター「Gutenberg」でよく使う「画像」ブロックを紹介しましょう。
画像ブロックの挿入方法
![画像ブロックの挿入](https://kotatsu.info/blog/wp-content/uploads/2021/09/img-block-add.png)
![画像の挿入選択画面](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-insert-select-1024x245.png)
新しい画像をアップして掲載します
アップロード済みの画像を掲載します
画像のURLを指定します
![画像ブロックの追加方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/vl0e058prk-min.gif)
![画面左上のプラスボタンから画像ブロックを追加(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/VqPbSph61f-min.gif)
「メディアライブラリ」からの画像挿入方法
![メディアライブラリから画像を選択(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/kJWYx4cn0d-min.gif)
- 画像の選択画面が表示されます。
- クリックで画像を選びましょう。
- 右下の「選択」をクリックします。
- 挿入されました。
![メディアライブラリから画像をクリックして選択する](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-media-window-select-1.jpg)
新規画像のアップと挿入を素早くする
新しい画像のアップと挿入をするときに、画像ブロックを作らなくても良い方法があります。
![ファイルをWordPressにドラック&ドロップで挿入(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/47XYy2w6A1-min.gif)
- フォルダーウィンドウから、アップしたいファイルを選択します。
- WordPressのエディターに、ドラッグ&ドロップしましょう。
- 挿入されました。
これで簡単に早く挿入できます。画像以外のメディア(ファイルや動画)でも使えます。覚えておきましょう。
画像をアップできないときの対処法
アップロードできない場合は、下記2点のいずれかに該当しているかもしれません。
- 画像の容量が大きすぎる
- WordPressが対応していない画像形式である
画像の容量が大きすぎる
![アップロードファイルのサイズ容量が大きすぎる場合のエラーメッセージ](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-error-upload-over.png)
撮影したものをそのままではなく、必ず軽量化したものをアップしてください。
アップできるできないに関わらず、重要なポイントです。
皆さんはネットを見る時、数秒待ってもページや画像を開けないと、他事をしたり別のページに移動しますよね。
つまり、ファイルが重ければユーザーはすぐに離脱してしまい、中身を見てくれません。
ファイルの軽量化は、それを防ぐためです。必ずしておきましょう。
WordPressが対応していない画像形式である
![アップロードファイルの形式が対応していない場合のエラーメッセージ](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-error-upload-filetype.png)
画像をアップする場合、形式がこの3つ以外だとアップロードはできません。
- JPG
- GIF
- PNG
このいずれかに変換してください。
おすすめのツール
画像の軽量化、変換がよくわからない方に、おすすめのツールがあります。
![Squoosh](https://kotatsu.info/blog/wp-content/uploads/2021/08/site-squoosh.jpg)
https://squoosh.app/
![Optimizilla](https://kotatsu.info/blog/wp-content/uploads/2021/08/site-optimizilla.jpg)
https://imagecompressor.com/ja/
![iLoveIMG](https://kotatsu.info/blog/wp-content/uploads/2021/08/site-iloveimg.jpg)
https://www.iloveimg.com/ja
どれもブラウザ上で、無料で利用できます。ダウンロードの必要はございません。
試してみて、使いやすいものをご活用ください。
Alt テキスト(代替テキスト)の記述
画像を挿入できたら、右メニューバーにある「Alt テキスト(代替テキスト)」に画像の説明文を入れましょう。
![Altテキスト(代替テキスト)の入力エリア](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-alt-text.jpg)
問題が起きて画像が表示されなかった時の説明や、視覚障がい者の補助、SEOでは画像検索での表示など、重要な役割をもちます。忘れないようにしましょう。
「メディアライブラリ」から挿入する際にも、「代替テキスト」の欄があります。必ず入れておきましょう。
![メディアライブラリのAltテキスト(代替テキスト)の入力エリア](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-media-library-alt-text.jpg)
「メディアライブラリ」で代替テキストを入れておくと保存されるため、再掲載のときに確認する必要がなくなり便利ですよ。
![メディアライブラリで「代替テキスト」を入力すれば、挿入時に反映される(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/wHZMDVHPW0-min.gif)
画像下のキャプション
![画像キャプション](https://kotatsu.info/blog/wp-content/uploads/2021/07/img-caption-text-deco.jpg)
画像下の「キャプションを入力」には、説明文を追加できます。
リンクもつけられるため、素材サイトのクレジット表記にも利用できます。
テキストも装飾できます。装飾方法については、下記のページをご覧ください。
スタイルの変更
画像のスタイルも、右メニューバーから変更できます。
![画像のスタイル変更(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/image5-min.gif)
![別のテーマの画像スタイル一覧](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-style-select.jpg)
中には、さまざまなスタイルを選べるテーマもあります。
画像サイズ変更
![画像サイズ変更](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-size-setting.png)
「画像サイズ」では、画像の大きさを以下の4種類から選べます。
- サムネイル
- 中
- 大
- フルサイズ
![画像サイズの選択肢](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-size-select.png)
デフォルトでは「サムネイル」が一番小さく「フルサイズ」が一番大きいサイズです。
実際の画像サイズは、その下にある「画像の寸法」の「幅」と「高さ」で確認できます。
下にある各パーセンテージを選択すれば、更に画像を小さくできます。
「リセット」をクリックすれば「画像サイズ」で選択した大きさに戻ります。
![右メニューバーでの画像サイズ変更の方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/G9tyAVmczy-min-1.gif)
自由に指定のサイズを変えるには、「画像の寸法」から手入力できます。
![エディタ画面と右メニューバーで画像サイズを調節できる](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-size-drag.jpg)
エディター内の画像の右端と下側にある、青い丸の部分をドラッグして調節する方法もあります。
![エディタ画面と右メニューバーで画像サイズを調節(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/kxvVa1qaja-min.gif)
配置変更
テキストと同じく、左、中央、右寄せに配置変更できます。
テーマによっては、幅広と全幅を選べるのもあります。
![画像ブロックツールの配置変更メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-align.jpg)
![配置の変更を試してみた画面(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/0GmBgtbzNN-min.gif)
画像をウィンドウサイズいっぱいに広げます。
画像をブロックの幅いっぱいに広げてくれます。
![画像を小さくして左か右に寄せると、テキスト回り込みになる](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-align-left.png)
画像を2つ並べたり、テキストを回り込ませたりするには、1つの画像を小さくし、左か右揃えに配置します。
![画像配置左寄せでのテキスト回り込み(WordPressエディタ画面)](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-align-editer-view.jpg)
![画像配置左寄せでのテキスト回り込み(プレビュー画面)](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-align-browser-view.jpg)
ただしスマートフォンだと、画像サイズによってはうまく回り込み表示ができません。ご注意ください。
![画像のテキスト回り込みをスマートフォンでプレビュー(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/Mflpw5E3PU-min.gif)
リンクの挿入
ブロックツールの「リンク」のアイコンをクリックで、画像にリンクをつけられます。
![画像ブロックツールの「リンク」挿入ボタン](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-link-btn.png)
![画像ブロックツールのリンク設定メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-link-menu.png)
リンク先はURLの他に、画像の詳細ページ(添付ファイルのページ)やオリジナルサイズの画像(メディアファイル)も指定できます。
掲載画像が小さくて見えにくい、拡大画像を見せたいときに活用しましょう。
![リンク設定の方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/T5eeNe2sA0-min.gif)
![リンク設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-link-menu-setting.png)
リンク設定
右端にある下向き矢印です。リンク先を新規タブで開く設定ができます。
![リンクの編集と削除](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-link-edit.png)
- 編集
リンクの設定後に表示される鉛筆マークです。リンク先を変更できます。 - リンクの削除
鉛筆マークの右隣にある×印です。リンクを削除します。
画像の切り抜き
「リンク」の隣りにあるボタンでは、画像の切り抜きもできます。
![画像ブロックツールの切り抜きボタン](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-trimming-btn.png)
クリックすると、切り抜きアイコンが虫眼鏡アイコンと長方形のアイコン、左回りの丸い矢印のアイコンに変わります。
![画像ブロックツールの切り抜きボタンのクリック後に表示されるボタン](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-trimming-menu-btn.png)
虫眼鏡アイコンはズーム、長方形アイコンは縦横比、左回りの丸い矢印は回転のボタンです。
![虫眼鏡アイコン=ズーム 長方形アイコン=縦横比 左回りの丸い矢印=回転](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-trimming-menu-1024x155.png)
![切り抜き方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/qFrG8iSHfe-min.gif)
- ズーム
- 画像の拡大と切り抜きたい箇所の移動ができます。
- 縦横比
- 画像の比率を選択します。
- 回転
- 画像を右に90度ずつ回転させます。
- 適用
- 変更を決定します。
- キャンセル
- 切り抜きをやめます。
選択できる比率の一覧は、こちらにまとめました。
![比率の選択肢一覧](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-trimming-ratio-list-964x1024.png)
- 正方形
- 16:10
WXGA(PC画面など) - 16:9
ワイド(YouTubeなど) - 4:3
スタンダード(アナログテレビなど) - 3:2
デジタルカメラなどで撮影した写真で多い
それぞれ、方向を縦横選択できます。
切り抜いた画像は、別の画像としてメディアライブラリに追加されます。
![切り抜き後の画像がメディアライブラリに保存される](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-media-library-add-trimming.jpg)
このブロックツールでの切り抜きは、比率を選択して拡大で調整するため、直感的に自由なサイズで切り抜きできません。
それでは不便ですから、自由に切り抜く方法もご紹介しましょう。
メディアライブラリでの切り抜き
新しい画像の場合は、「ファイルをアップロード」からアップしましょう。
![メディアライブラリでの画像アップロード](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-media-library-upload.png)
![「画像を編集」リンク](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-media-library-edit-btn.jpg)
![メディアライブラリの編集画面](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-media-library-edit.png)
縦横比の指定もできます。
- 他にも90度ずつの回転や反転もできます。
- 「画像縮尺の変更」では画像サイズを変更できます。
![メディアライブラリ右下の「選択」をクリック](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-media-library-select.jpg)
しかし、これだけでは反映されません。
![メディアライブラリで画像を切り抜いても反映されない(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/gg4lgxGPAo-min.gif)
まだ切り取った画像のURLではなく、元画像のURLが呼び出されている状態です。
呼び出す画像のURLを、切り取った方に変更する必要があります。
![置換→メディアライブラリを開くを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-replacement.png)
![メディアライブラリの「URLをクリップボードへコピー」のボタン](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-media-library-url-copy.jpg)
切り取った画像のURLがコピーされました。
![置換→編集をクリック](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-replacement-url-edit.jpeg)
![現在のメディアURLを変更する](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-replacement-url-paste.jpg)
![切り抜き後の画像を反映](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-trimming-after-by-media-library.jpg)
![画像を切り抜き済みのものに差し替える方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/jE4l1xatdU-min.gif)
編集した画像は元に戻せます。
![「画像を編集」リンク](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-media-library-edit-btn.jpg)
![元の画像を復元する](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-media-library-edit-restore.jpg)
![「画像を復元」をクリックする](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-media-library-edit-restore-btn.jpg)
![元の画像に戻った後の表示](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-media-library-edit-restore-after.jpg)
![画像を復元する(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/yFN6LSnF6Z-min.gif)
デュオトーンのフィルター
モノクロなど、デュオトーンのフィルターもかけられます。
![デュオトーンフィルターがかかった犬の写真](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-duotone-visual.jpg)
「デュオトーン」とは、2色を組み合わせたデザインのことです。
画像のブロックツールバーにある丸い点線の円のアイコンが、デュオトーンフィルターを適用するボタンです。
![画像ブロックツールのデュオトーンボタン](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-duotone-btn.png)
![デュオトーンの色をパレットから選択する(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/nxcajg8fDa-min.gif)
表示された配色を選択すると、写真が該当の2色で構成されます。
![デュオトーンメニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-duotone-menu-explanation.jpg)
「影」の色は写真の暗い部分に、「ハイライト」は明るい部分に配色します。
![デュオトーンの配色選択方法](https://kotatsu.info/blog/wp-content/uploads/2021/08/img-block-tool-duotone-color-explanation.jpg)
その他の色にしたい時は、2色のバーの下にある「影」や「ハイライト」をクリックしましょう。パレットが表示され、この中からそれぞれ色を選べます。
「カスタムカラー」か、両端にある丸を選択すれば、自由に色を変更できます。
「クリア」をクリックすれば、フィルターが外れて元の写真に戻ります。
![デュオトーンの配色変更方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/JgtxYHr8EC-min.gif)
以上、Gutenbergでよく使う「画像」ブロックの使い方を解説しました。
その他の画像関連ブロックの使い方も紹介しております。
次回は、YouTube動画などを埋め込む方法を紹介しましょう。