ブロックエディター「Gutenberg」に画像を挿入する方法

ブロックエディター「Gutenberg」に画像を挿入する方法

この記事では、WordPressの新エディターGutenbergで画像を追加する方法について説明します。

 

画像を記事に挿入する方法

はじめに、投稿に画像を挿入する方法を説明します。

Gutenbergでエディター上の任意の場所に画像を配置するには、「画像ブロック」を追加します。

まずは、画像を挿入したい場所で「ブロックの追加」(⊕マークのアイコン)をクリックし、「画像」を選択してください。

(もしくは、「画像の追加」ボタンをクリックして画像ブロックを追加してもOKです)

そして、下の画像のような画面になったら「メディアライブラリ」をクリックします。

「画像」ブロックを追加した時に表示される画面

すると、「メデイアの選択またはアップロード」という画面が表示されます。

この画面が出てきたら、「メディアライブラリ」(右側のタブ)を表示してください。

メディアライブラリにはすでにWordPressにアップロードしている画像が一覧で表示されるので、その中から使いたい画像を選択します。

そして、右下にある「選択」ボタンをクリックすると、画像を挿入することができます。

※もし、まだアップロードしていない画像を使用したい場合は、「ファイルをアップロード」(左側のタブ)を選択して、画像をアップロードしてから選択しても問題ありません。

 

Alt属性(代替えテキスト)を設定する方法

記事に使用する画像には「Alt属性」を設定しておくとユーザビリティをアップすることができます。

画像にAlt属性(画像が読み込めない時などに、画像の代替えとして設定するテキスト)を設定するには、サイドメニューに表示される「画像設定」から行えます。

サイドメニューに表示される画像設定画面

画像を選択した状態にし、右側のサイドメニューにある「画像設定」⇒「Altテキスト(代替えテキスト)」に直接入力してください。

こちらの記事も併せてどうぞ

htmlで画像を表示する方法を解説

 

ドラッグ・アンド・ドロップで画像ブロックを追加する

次に、「ドラッグ・アンド・ドロップで画像ブロックを追加する」方法を説明します。

「Gutenberg」のエディターは、直接エディターの中に画像をドラッグ・アンド・ドロップしてアップロードし、そのまま画像ブロックを追加することが可能です。

画像をドラッグ・アンド・ドロップするだけで、画像のアップロードとコンテンツへの画像の挿入が簡単に行なえます。

具体的な操作の流れとしては、まずエディターの上の画像を配置したい位置に、ローカルに保存されている画像を直接ドラッグします。

すると、エディター上にブルーのラインが表示されます。

Gutenbergに画像をドラッグアンドドロップして挿入する時の画面

そのラインが表示されているところでドロップすると、画像をその位置に配置することができます。

WordPressにアップロードしていない画像を投稿に挿入する場合は、ドラッグ・アンド・ドロップで画像を移すと簡単です。

クラシックエディターを使った画像のアップロード手順

WordPressで画像をアップロードする方法を解説

 

まとめ

以上、WordPressの新エディター「Gutenberg」で画像を挿入する方法について解説しました。

ブロックエディターのGutenburgは、画像ブロックをエディターに追加して画像を挿入することが可能です。「ブロックの追加」ボタンから画像ブロックを追加して、希望する位置に画像を挿入することができます。

もしくは、ローカルの画像をエディター上にドラッグ・アンド・ドロップして画像を挿入することも可能です。

この場合は、画像のアップロードとエディターへの配置が一度の操作でできて簡単なので、ぜひ試してみてください。

ブログのつくり方カテゴリの最新記事