メディア&テキストブロック


ブロック一覧に戻る

メディアとテキストブロックでは、画像または動画をテキストと横並びに配置できます。

メディアとテキストブロックを追加する

このブロックを追加するには、ブロック挿入ツールアイコンをクリックしてブロックライブラリを開き、「メディアとテキスト」ブロックを選択します。

新しい段落ブロックで /media と入力して Enter キーを押すことでも、すばやく追加できます。

Slash command to insert the Media & Text block.
メディアとテキストブロックを挿入するスラッシュコマンド。

ブロックの追加に関する詳細な手順

コンテンツを追加する

画像または動画をブロックに追加するには、コンピューターからファイルをアップロードするか、既存のメディアライブラリから選択するためのオプションを使用できます。

How to add content to the Media & Text Block.

テキストを追加するには、テキストボックスへの入力を開始するだけです。通常の段落ブロックと同じテキスト編集オプションが表示されます。ブロック挿入ツールを使って、コンテンツ領域に他のブロックを追加することもできます。

ブロックツールバー

ブロックツールバーを表示するには、ブロックをクリックします。するとツールバーが表示されます。各ブロックには、エディター内で直接ブロックを操作できる、ブロック固有のコントロールがあります。メディアとテキストブロックのツールバーには、次のオプションがあります。

Block toolbar for the media & text block.
メディアとテキストブロックのブロックツールバー。

これらのオプションを使用して、次の操作を行えます。

変換

ブロックをカラム、グループ、画像(画像の代わりに動画メディアファイルがある場合は動画)、またはカバーブロックに変換します。

Transform options for the Media & Text Block.
メディアとテキストブロックの変換オプション。

ブロック移動ハンドル

ブロック移動ハンドルを使うと、エディター内でブロックを上下に移動できます。6つの点のアイコンを使って Gallery ブロックをドラッグ&ドロップし、ページ上の任意の場所に配置します。または、上下の矢印をクリックしてブロックを上下に移動します。

エディター内でのブロック移動について詳しくは、こちらをご覧ください。

配置

ブロックを、配置なし、幅広、全幅の表示(サイトのテーマが対応している場合)の間で切り替えます。

Alignment options for the Media & Text block.
メディアとテキストブロックの配置オプション。

垂直方向の配置を変更

「垂直方向の配置を変更」オプションを使って、コンテンツを上、中央、下のいずれかに垂直方向に配置できます。

Example of "align top" in the change vertical alignment option for the media & text block.
ここでは「上に配置」オプションが選択されています

メディアを左または右に表示

次のオプションを使って、メディアコンテンツを左または右に表示できます。

Example of "show media on the left" option for the media & text block.
ここでは「メディアを左に表示」オプションが選択されています
Example of "show media on the right" option for the media & text block.
ここでは「メディアを右に表示」オプションが選択されています

対応していないファイルをアップロードしようとすると、ブラウザーの左下にエラーメッセージが表示されます。

Example error message when uploading an unsupported file type.
エラーメッセージの例

リンク

ブロックツールバーのリンクアイコンを使って、ブロック内の画像にリンクを挿入できます。画像は外部 URL またはサイト内のページにリンクできます。また、画像自体のメディアファイルや添付ファイルページにリンクすることもできます。

Adding link to the image in the Media & Text block
画像にリンクを挿入

置換

ブロックツールバーの置換ボタンを使って、すでに挿入したメディアファイルを置き換えます。

その他のオプション

これらのコントロールを使って、ブロックのコピー、複製、HTML としての編集を行えます。

これらの設定やその他の設定について読む

ブロック設定

すべてのブロックには、ブロックツールバーにあるオプションに加えて、エディターのサイドバーに固有のオプションがあります。サイドバーが表示されない場合は、「公開」または「保存」ボタンの横にある設定アイコンをクリックしてください。

Block settings button next to the Save button

設定タブ

Settings tab

メディアの幅

スライダーを調整するか、希望する割合を入力して、メディアとテキストブロック全体におけるメディアの占める割合を調整できます。範囲は15%から85%です。

モバイルで縦に積み重ねる

モバイル端末ではメディアとテキストを上下に積み重ねるオプションが表示されます。これは、小さな画面でサイトを閲覧するユーザーに便利です。

モバイルでブロック内のメディアとテキストを横並びのままにすると、モバイル端末では小さすぎて見づらくなる場合があります。モバイルで縦に積み重ねるを有効にすると、左側のコンテンツが右側のコンテンツの上に表示されます。これにより、モバイル訪問者により良い体験を提供できます。

画像を切り抜いて塗りつぶす

画像がカラム幅全体に収まらない場合、このオプションをオンにすると、カラム全体を満たすように画像が自動的に切り抜かれます。また、写真の最も重要な部分を中央に配置するための円形の焦点も設定できます。切り抜きが発生する可能性があるためです。

代替テキスト

画像の内容を説明する alt テキストを画像に追加できます。これはアクセシビリティ(スクリーンリーダーなど)や検索エンジン最適化に役立ちます。

解像度

ドロップダウンメニューから希望するサイズを選択して、フルサイズ、大、中、またはサムネイルの画像を表示できます。

Media & Text focal point picker for cropped images

焦点ピッカー

画像を切り抜くと、焦点ピッカーが表示されます。このツールを使うと、画像内の主な注目点を指定して強調できます。ピッカーをクリックして目的の位置までドラッグするか、画像の下にある左位置と上位置の割合を使って手動で設定します。

スタイルタブ

Styles tab

メディアとテキストブロックには、テキスト、背景、リンクの色を変更するための色設定オプションがあります。候補から色を選択するか、カラーピッカーを使う、またはカラーコードを追加してカスタムカラーを設定します。

色の変更について詳しくは、このガイドをご覧ください。

タイポグラフィ

メディアとテキストブロックには、フォントファミリー、外観、行の高さ、文字間隔、装飾、文字の大文字・小文字、フォントサイズを変更するためのタイポグラフィ設定があります。

タイポグラフィ設定の変更について詳しく見る

寸法

メディアとテキストブロックには、パディングとマージンを追加するための寸法設定オプションがあります。

寸法コントロールについて詳しく見る

ボーダー

メディアとテキストブロックには、ボーダーの色、幅、角丸を追加するためのボーダー設定オプションがあります。

詳細については、こちらのサポート記事をご覧ください: ボーダー設定の概要

高度な設定

メディアとテキストブロックには、HTML アンカー、追加 CSS クラス、追加 CSS、スタイル、許可されているブロックの高度な設定オプションがあります。

高度な設定について詳しく見る

変更履歴

  • 更新日 2026-05-25(@kjoyner @awetz583 に謝意)
    • 「高度な設定」セクションを新しい概要ページへの参照に更新
  • 更新日 2026-03-17(@femkreations @carolinan @awetz583 @healthydigital @mmjoubert に謝意)
    • 動画と設定のスクリーンショットを更新
    • ボーダー情報を追加
    • 高度な設定のスクリーンショットと「許可されているブロックを管理」ボタンに関する情報を更新
  • 更新日 2023-04-03
    • 切り抜いた画像の焦点ピッカーに関する情報を追加
  • 更新日 2022-11-22
    • モバイル表示用に画像を配置
    • 重複するコンテンツを置き換え
  • 更新日 2022-11-10
    • 色設定を削除し、「色の概要」ページへのリンクを追加
    • 寸法とタイポグラフィの設定を追加し、それぞれの概要ページにリンク
    • 6.1向けにさらにいくつかのスクリーンショットを更新。
    • ブロックツールバーの「リンクを挿入」に関する情報を追加
  • 更新日 2022-11-01
    • WP 6.1向けに動画を更新
    • WP 6.1向けに画像を更新
    • メディアとテキストブロックのコンテンツロックの画像を追加
    • 代替テキストを更新
    • 「カバー」への変換オプションを追加
    • エラーメッセージの例を追加
  • 更新日 2022-06-02
    • WP 6.0向けに画像を更新ブロックツールバーの変更
      • 配置に「なし」を追加配置から「垂直方向」という用語を削除変換に「カラム」を追加

      その他への変更

      • “移動”を追加“ロック”を追加“非表示”を追加

      “Media + Text”のすべてのインスタンスを“Media & Text”に更新

    • テキスト&メディアブロック設定の変更
      • 色のテキストと背景のオプションを更新し、グラデーションを追加
      • “アンカーテキスト”を追加
      • “画像のトリミング”を追加
      • “altテキスト”を追加
      • “画像サイズ”を追加
      • “メディア幅”を追加
  • 2020-08-23を更新
    • 画像をWP 5.5向けに更新
  • 2020-06-04を更新
    • 再利用可能なブロック2個を通常のブロックに変換
    • 見出しの変更
    • ブロックツールバーの変更
      • 垂直方向の配置オプションを追加
      • 新しい画像を追加
      • “その他のオプション”ブロックを追加