投稿や固定ページへの画像の挿入

ブロック一覧へ戻る

注意: このページではブロックエディターを使用します。クラシックエディターユーザーの方はこちらのページを参照ください。

WordPress の固定ページや投稿を作成したり、編集中に、「画像」ブロックを使用していつでも簡単に画像を挿入できます。

固定ページや投稿への画像ブロックの追加

固定ページや投稿に画像を追加するには、画像ブロックを追加します。

画像ブロックは、コンテンツの中から追加することもできます。 画像ブロックを追加したいブロックの上にカーソルを移動し、プラス記号をクリックします。 そして、表示されるブロックの中から「画像」ブロックを選択します。

ブロックを追加する方法の詳細な説明についてはこちらの記事を参照してください。

画像ブロックを追加すると、画像のアップロード、メディアライブラリからの画像の選択、URL からの画像の挿入のオプションが表示されます。

ブロックへの画像の追加

ブロックに画像を追加するには、4つの方法があります。 画像ブロックのプレースホルダーにあるボタンを使って追加する3つの方法と、ドラッグアンドドロップで記事やページに画像を追加する方法です。

1. コンピュータからのアップロード
   「アップロード」ボタンをクリックします。ダイアログボックスが開き、コンピュータのハードディスクの内容が表示されます。アップロードするファイルを選択し、「開く」ボタンをクリックしてください。

2. メディアライブラリから
   メディアライブラリから既存の画像を選択するには、「メディアライブラリ」ボタンをクリックします。

3. URL からの挿入
   「URL からの挿入」ボタンをクリックし、画像の URL をペーストまたは入力します。
   注意:
   1. URLは、「https://」とドメイン名で始まる完全修飾 URL で、自分のサイトへの相対的な参照ではない必要があります。
   2. URL で挿入された画像は、メディアライブラリに保存されません。URL のサイトから画像を参照し続けます。そのサイトがなくなれば、投稿やページから画像も消えます。

4. ドラッグアンドドロップ
   コンピュータのエクスプローラや Finder ウィンドウから画像を選択して、ブロックエディターウィンドウにドラッグアンドドロップできます。

ブロックツールバー

画像ブロックのブロックツールバーには、左側の「ムーバー」と「ドラッグアンドドロップハンドル」の他に、5つのボタンが表示されます。

• ブロックスタイルと変換
• 配置の変更
• 画像の置換
• リンクの挿入
• オプション

ブロックスタイル / 変換

このドロップダウンでは、画像の2つのスタイルが表示されます。

「デフォルト」スタイルは、画像をアップロードされたとおりに表示します。

「角丸」スタイルでは、画像の四隅が丸くなります。

変換

画像ブロックは、5つの別のブロックに変換できます。

グループブロック、ギャラリーブロック、カバーブロック、ファイルブロック、メディアとテキストブロックです。画像を使用するこれらのブロックの詳細についてはそれぞれのリンクをクリックしてください。

置換

ツールバーの「置換」ボタンをクリックすると、既存の画像を別の画像に置き換える3つのオプションが表示されます。メディアライブラリ経由、コンピュータからアップロード、URLから挿入です。このオプションはすでに上で説明したオプションと同じです。

リンクの挿入

「リンクを挿入」ボタンで画像にリンクを追加できます。 リンクのオプションは以下のとおりです。

• URLを貼り付け – 他のサイト、または、自身のサイトの異なる投稿や固定ページへのリンク。相対パスでも絶対パスでも可 (「/contact-page」または「https://google.com」)。キーワードを入力して検索すると、自身のサイトから固定ページやポストを検索します。
• メディアファイル – 画像のみのページへのリンク
• 添付ページ – 詳細な画像の説明が付いた WordPress 添付ページへのリンク

オプション:

追加設定を非表示

「追加設定を表示」オプションは、エディターのサイドバーにある「ブロック設定」パネルを表示 (または非表示) します。

複製

「複製」オプションを使用して、選択したブロックのコピーを作成できます。

前に挿入

選択したブロックの前に新しいブロックを挿入します。

後に挿入

選択したブロックの後に新しいブロックを挿入します。

HTMLとして編集

「HTML として編集」オプションでは、ブロックの HTML コードを変更することができます。

再利用ブロックに追加

「再利用ブロックに追加」オプションを使って、選択したブロックを再利用ブロックのリストに追加することができ、他の投稿やページでも使用することができます。

グループ化

ブロックのグループを作成して1つのユニットとして扱いたい場合は、「グループ化」オプションを選択します。例えば、共通の背景色や他のブロックをグループに追加することができます。

ブロックを削除

「ブロックを削除」で、選択したブロックをコンテンツから削除することができます。

ブロック設定

投稿や固定ページのコンテンツに新しいブロックを追加すると、自動的に右側のメニューにそのブロックの設定が表示されます。

スタイル

画像は2つの異なるスタイルで表示できます。

「デフォルト」スタイルでは、画像はアップロードされたままの形で表示されます。

「角丸」スタイルでは、画像の四隅は丸く表示されます。

「デフォルトスタイル」ドロップダウンからデフォルトで表示されるスタイルを選択できます。

画像設定

「画像設定」セクションには、代替テキスト、画像のサイズ、画像の寸法、高度な設定があります。

「Alt テキスト (代替テキスト)」設定では、画像を見られないユーザーのために、画像の説明を追加できます。この設定はアクセシビリティだけでなく、検索エンジン最適化 (SEO) にも役立ちます。

「画像サイズ」設定では、サムネイル、中、大、フルサイズから選択できます。

• サムネイル: 固定ページや投稿に、小さなサムネイルサイズの画像を表示します。注意: デフォルトではサムネイルサイズは正方形です。オリジナルの画像の一部が切り取られるかもしれません。
• 中: 固定ページや投稿に、中程度の大きさの画像を表示します。このサイズは、左寄せ、右寄せとの使用に適しています。反対側に十分なスペースができ、文字が読みやすくなります。
• 大: 固定ページや投稿に、大きな画像を表示します。注意: WordPress はテーマのコンテンツカラムの幅を判断し、その中で可能な限り大きく表示します。
• フルサイズ: 固定ページや投稿に、元の完全なサイズで画像を表示します。注意: WordPress はテーマのコンテンツカラムの幅を判断し、その中で可能な限り大きく表示します。オリジナルの画像サイズがこのカラムの幅よりも大きな場合、完全なサイズの画像は表示されない場合があります。

「画像の寸法」設定では、高さと幅を手動で設定したり、画像をフルサイズの25％、50％、75％、100％に設定できます。 また、変更した内容を元に戻す必要がある場合に備えて、リセットボタンも用意されています。

高度な設定

タイトル属性

「Alt テキスト」以外にも、画像に「title」属性を追加して、ページ内での画像の役割を簡潔に説明できます。

詳細については、HTMLの標準化団体であるW3.orgの説明へのリンクをご覧ください。

追加 CSS クラス

「追加 CSS クラス」セクションでは、ブロックに1つまたは複数のCSSクラスを設定できます。カスタムCSSを記述して、ブロックを自由にスタイリングできます。

画像キャプション

画像ブロックの画像の下には、キャプションを追加するオプションがあります。テキストを太字、斜体にしたり、リンクを追加できます。

関連情報

• 画像とファイル添付の利用
• オブジェクトの埋め込み – 異なるメディアタイプの挿入
• ギャラリー – 固定ページや投稿へのギャラリーブロックの挿入 

原文