みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。
今回は、WordPressのエディター「Gutenberg」でよく使う「画像」ブロックを紹介しましょう。
画像ブロックの挿入方法
新しい画像をアップして掲載します
アップロード済みの画像を掲載します
画像のURLを指定します
「メディアライブラリ」からの画像挿入方法
- 画像の選択画面が表示されます。
- クリックで画像を選びましょう。
- 右下の「選択」をクリックします。
- 挿入されました。
新規画像のアップと挿入を素早くする
新しい画像のアップと挿入をするときに、画像ブロックを作らなくても良い方法があります。
- フォルダーウィンドウから、アップしたいファイルを選択します。
- WordPressのエディターに、ドラッグ&ドロップしましょう。
- 挿入されました。
これで簡単に早く挿入できます。画像以外のメディア（ファイルや動画）でも使えます。覚えておきましょう。
画像をアップできないときの対処法
アップロードできない場合は、下記2点のいずれかに該当しているかもしれません。
- 画像の容量が大きすぎる
- WordPressが対応していない画像形式である
画像の容量が大きすぎる
撮影したものをそのままではなく、必ず軽量化したものをアップしてください。
アップできるできないに関わらず、重要なポイントです。
皆さんはネットを見る時、数秒待ってもページや画像を開けないと、他事をしたり別のページに移動しますよね。
つまり、ファイルが重ければユーザーはすぐに離脱してしまい、中身を見てくれません。
ファイルの軽量化は、それを防ぐためです。必ずしておきましょう。
WordPressが対応していない画像形式である
画像をアップする場合、形式がこの3つ以外だとアップロードはできません。
- JPG
- GIF
- PNG
このいずれかに変換してください。
おすすめのツール
画像の軽量化、変換がよくわからない方に、おすすめのツールがあります。
https://squoosh.app/
https://imagecompressor.com/ja/
https://www.iloveimg.com/ja
どれもブラウザ上で、無料で利用できます。ダウンロードの必要はございません。
試してみて、使いやすいものをご活用ください。
Alt テキスト（代替テキスト）の記述
画像を挿入できたら、右メニューバーにある「Alt テキスト（代替テキスト）」に画像の説明文を入れましょう。
問題が起きて画像が表示されなかった時の説明や、視覚障がい者の補助、SEOでは画像検索での表示など、重要な役割をもちます。忘れないようにしましょう。
「メディアライブラリ」から挿入する際にも、「代替テキスト」の欄があります。必ず入れておきましょう。
「メディアライブラリ」で代替テキストを入れておくと保存されるため、再掲載のときに確認する必要がなくなり便利ですよ。
画像下のキャプション
画像下の「キャプションを入力」には、説明文を追加できます。
リンクもつけられるため、素材サイトのクレジット表記にも利用できます。
テキストも装飾できます。装飾方法については、下記のページをご覧ください。
スタイルの変更
画像のスタイルも、右メニューバーから変更できます。
中には、さまざまなスタイルを選べるテーマもあります。
画像サイズ変更
「画像サイズ」では、画像の大きさを以下の4種類から選べます。
- サムネイル
- 中
- 大
- フルサイズ
デフォルトでは「サムネイル」が一番小さく「フルサイズ」が一番大きいサイズです。
実際の画像サイズは、その下にある「画像の寸法」の「幅」と「高さ」で確認できます。
下にある各パーセンテージを選択すれば、更に画像を小さくできます。
「リセット」をクリックすれば「画像サイズ」で選択した大きさに戻ります。
自由に指定のサイズを変えるには、「画像の寸法」から手入力できます。
エディター内の画像の右端と下側にある、青い丸の部分をドラッグして調節する方法もあります。
配置変更
テキストと同じく、左、中央、右寄せに配置変更できます。
テーマによっては、幅広と全幅を選べるのもあります。
画像をウィンドウサイズいっぱいに広げます。
画像をブロックの幅いっぱいに広げてくれます。
画像を2つ並べたり、テキストを回り込ませたりするには、1つの画像を小さくし、左か右揃えに配置します。
ただしスマートフォンだと、画像サイズによってはうまく回り込み表示ができません。ご注意ください。
リンクの挿入
ブロックツールの「リンク」のアイコンをクリックで、画像にリンクをつけられます。
リンク先はURLの他に、画像の詳細ページ（添付ファイルのページ）やオリジナルサイズの画像（メディアファイル）も指定できます。
掲載画像が小さくて見えにくい、拡大画像を見せたいときに活用しましょう。
リンク設定
右端にある下向き矢印です。リンク先を新規タブで開く設定ができます。
- 編集
リンクの設定後に表示される鉛筆マークです。リンク先を変更できます。 - リンクの削除
鉛筆マークの右隣にある×印です。リンクを削除します。
画像の切り抜き
「リンク」の隣りにあるボタンでは、画像の切り抜きもできます。
クリックすると、切り抜きアイコンが虫眼鏡アイコンと長方形のアイコン、左回りの丸い矢印のアイコンに変わります。
虫眼鏡アイコンはズーム、長方形アイコンは縦横比、左回りの丸い矢印は回転のボタンです。
- ズーム
- 画像の拡大と切り抜きたい箇所の移動ができます。
- 縦横比
- 画像の比率を選択します。
- 回転
- 画像を右に90度ずつ回転させます。
- 適用
- 変更を決定します。
- キャンセル
- 切り抜きをやめます。
選択できる比率の一覧は、こちらにまとめました。
- 正方形
- 16:10
WXGA（PC画面など） - 16:9
ワイド（YouTubeなど） - 4:3
スタンダード（アナログテレビなど） - 3:2
デジタルカメラなどで撮影した写真で多い
それぞれ、方向を縦横選択できます。
切り抜いた画像は、別の画像としてメディアライブラリに追加されます。
このブロックツールでの切り抜きは、比率を選択して拡大で調整するため、直感的に自由なサイズで切り抜きできません。
それでは不便ですから、自由に切り抜く方法もご紹介しましょう。
メディアライブラリでの切り抜き
新しい画像の場合は、「ファイルをアップロード」からアップしましょう。
縦横比の指定もできます。
- 他にも90度ずつの回転や反転もできます。
- 「画像縮尺の変更」では画像サイズを変更できます。
しかし、これだけでは反映されません。
まだ切り取った画像のURLではなく、元画像のURLが呼び出されている状態です。
呼び出す画像のURLを、切り取った方に変更する必要があります。
切り取った画像のURLがコピーされました。
編集した画像は元に戻せます。
デュオトーンのフィルター
モノクロなど、デュオトーンのフィルターもかけられます。
「デュオトーン」とは、2色を組み合わせたデザインのことです。
画像のブロックツールバーにある丸い点線の円のアイコンが、デュオトーンフィルターを適用するボタンです。
表示された配色を選択すると、写真が該当の2色で構成されます。
「影」の色は写真の暗い部分に、「ハイライト」は明るい部分に配色します。
その他の色にしたい時は、2色のバーの下にある「影」や「ハイライト」をクリックしましょう。パレットが表示され、この中からそれぞれ色を選べます。
「カスタムカラー」か、両端にある丸を選択すれば、自由に色を変更できます。
「クリア」をクリックすれば、フィルターが外れて元の写真に戻ります。
以上、Gutenbergでよく使う「画像」ブロックの使い方を解説しました。
その他の画像関連ブロックの使い方も紹介しております。
次回は、YouTube動画などを埋め込む方法を紹介しましょう。
