WordPress標準ブロックエディタ「Gutenberg（グーテンベルグ）」での記事作成入門。第3回の今回は、記事に画像を追加する方法について見ていきましょう。
しっかりと内容のある文章を作ることも大切ですが、同時に目を引くような画像を記事に追加することで、読みやすく読者の目を引く記事を作ることも大切です。効果的に画像を追加することで、視聴数や平均滞在時間を増やし、記事の効果を上げることが期待できます。画像の追加方法を熟知し、よりよい記事を作っていきましょう。

WordPressブロックエディタに画像を追加する

それでは、実際にエディタを触っていきましょう。
（注　本記事ではバージョン: 5.8.1を使用していきます）

画像を追加する

さっそく画像を追加していきましょう。まず初めに、エディター右側にある黒い十字ボタンを押します。
すると、ブロックを選択する画面が出現しますので、「画像」ブロックを選択します。「画像」ブロックがない場合は、検索ボックスから「画像」ブロックを検索してください。

また別の方法として、「ブロックを追加するには / を入力」という文字が書かれている箇所に / を入力すると、下記のような代表的なブロックのリストが出現します。その中から、「画像」ブロックを選んで選択してください。

「画像」ブロックを追加すると、下記のようなブロックが挿入されます。
「アップロード」ボタンを押すとファイル選択のダイアログが立ち上がりますので、追加したい画像を選択してください。
もしアップロード済みの画像から選択したい場合は、その横の「メディアライブラリ」ボタンを押してください。

画像がアップロードされると。下記のような画像選択画面が立ち上がります。
追加したい画像を選択し、画面右下の「選択」ボタンを押します。
すると、エディターに画像が追加されます。

画像の揃え位置を変える

次に、画像の揃え位置を指定します。
対象の画像を選択し、画像の上部の装飾メニューを展開してください。

次に、メニューから三本線マークをクリックします（①）。
すると、下部に「左寄せ」「中央寄せ」「右寄せ」「幅広」「全幅」を選択するメニューが現れますので、指定したい揃え位置を選択します（②）。
「幅広」「全幅」を選択した場合は、画像が元の大きさより大きく表示され、画質が悪くなってしまう可能性があるため、画像の大きさに注意してください。

画像にリンクをつける

次に、画像にリンクを追加してみます。
リンクを追加したい画像を選択し、画像上部の装飾メニューを展開してください。

展開されたら、装飾メニューからリンクマークをクリックします（①）。
すると、下部にURLの入力欄が出現しますので、入力欄にリンク先のURLを入力し、右側の矢印「⤾ 」マークをクリックします（②）。
これで、リンクを追加することができました。

また、リンク先を別タブで開きたい場合は、URL入力欄下側の「新しいタブで開く」ボタンを押すことで、URLを別のタブで開くリンクを挿入できます。

画像を切り抜く

次に、画像を拡大して一部を切り抜いてみたいと思います。
切り抜きたい画像を選択し、画像上部の装飾メニューを展開してください。

展開されたら、装飾メニューから切り抜きマークをクリックします。

切り抜きマークをクリックすると、装飾メニューの内容が変化します。

新しく展開された装飾メニューから、虫眼鏡マークをクリックしてください（①）。
すると下部にダイアログが出現しますので、メーターを調整、または数値を入力して、ちょうどいい大きさまで画像を拡大ししますす（②）。

また、拡大後は画像をドラッグして、画像の位置をちょうどいい箇所に調整します。

調整が完了したら、「適用」ボタンを押して変更を保存してください。

もし、切り抜く画像の縦横比を変更したい場合は、虫眼鏡マークの隣の四角いマークをクリックします（①）。

すると、下部に縦横比を選択するダイアログが出現しますので、用意されたプリセットの中から好きな縦横比を選択することで、画像の縦横比を変更することができます（②）。

画像を回転させる

次に、画像を回転してみます。
回転したい画像を選択し、画像上部の装飾メニューを展開してください。

展開されたら、装飾メニューから切り抜きマークをクリックします。

切り抜きマークをクリックすると、装飾メニューの内容が変化します。

新しく展開された装飾メニューから、円形矢印マークをクリックしてください（①）。
すると、クリックするごとに画像が90度回転します。

調整が完了したら、「適用」ボタンを押して変更を保存してください。

画像にキャプションをつける

次に、画像にキャプションをつけてみます。
まずキャプションをつけたい画像を選択してください。

すると画像の下に、「キャプションを入力…」という文字列が出現しますので、この文字列をクリックします。
すると、キャプションを入力できるようになりますので、任意の説明文を入力してください。

画像を角丸にする

次に、画像の縁を角丸にしてみます。

画面右側の「画像」のブロックエディタメニューから「スタイル」メニューを展開し、スタイルの中から「角丸」を選択してください。

画像の大きさを変更する

次に、画像の大きさを変更してみます。

画面右側の「画像」のブロックエディタメニューから「画像設定」メニューを展開し、「画像サイズ」プルダウンメニューの中からちょうどいい大きさの画像を選択してください。

また、「画像の寸法」メニューから画像を任意の大きさで表示することもできます。
「幅」「高さ」に任意の数値を入力してください。ただし、元の数値より大きい値を設定すると画質が悪くなってしまいますので注意してください。

表示領域の大きさに応じて、何%で表示するかも設定することができます。
こちらを利用する場合は、小さめのサイズの画像を選択すると画質が悪くなってしまう場合がありますので、注意してください。

画像の検索用説明を追加する

次に、画像の検索用説明を追加してみます。
こちらの説明はページには表示されませんが、検索時にヒットするキーワードのヒントになりますので、可能な限り追加をお勧めします。

画面右側の「画像」のブロックエディタメニューから「画像設定」メニューを展開し、「Alt テキスト (代替テキスト)」下部のテキストエリアに検索用説明を入力してください。

本日のまとめ

画像の追加は、記事制作において大切な要素です。色々な見せ方のバリエーションをマスターすることで、読みづらい記事をなくしより読まれる記事を作っていくことができます。画像を活用することで、ご自身のWEBサイトの価値を高めていきましょう。

WordPressサイトの構築ならマックスストーン

マックスストーンでは、お客様の業種業態に合ったWordPressサイト構築のお手伝いをさせて頂いております。
WEBの知識や経験に乏しいお客様にも、一人ひとり丁寧にご説明差し上げております。
制作事例はこちらからご確認頂けます。ぜひご覧ください。