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

ブロック一覧へ戻る

メディアとテキストブロックを使うと、画像や動画の横にテキストを並べて配置できます。

このレイアウトを作るには、ブロックを追加アイコンをクリックしてブロックライブラリを開き、メディアとテキストブロックを選びます。

空のブロックへ /media (または /メディア)と入力して Enter キーを押す方法でも、簡単に追加できます。

ブロック追加の詳しい方法はこちらをご覧ください。

コンテンツの追加 コンテンツの追加

画像または動画をブロックへ追加するには2つの方法があります。お使いのコンピューターからファイルをアップロードするか、既存のメディアライブラリから選択してください。

テキストを追加するには、テキストボックスに入力してください。通常の段落ブロックと同じテキスト編集オプションが表示されます。

トップ ↑

ブロックツールバー ブロックツールバー

ブロックツールバーを表示するには、ブロックをクリックします。ほとんどのブロックには固有のツールバーアイコンとコントロールがあり、エディター内でブロックを操作できます。

メディアとテキストブロックのツールバーには以下のオプションがあります。

  • 変換またはスタイル変更
  • 移動用ハンドル
  • 配置を変更
  • 垂直配置を変更
  • メディアを左に表示
  • メディアを右に表示
  • 他のオプション

変換またはスタイル変更

メディアとテキストブロックグループカラム画像(または動画)ブロックへ変換できます。また、スタイルをデフォルト枠線の2種類から選べます。

移動用ハンドル

上下の矢印を使って、ドキュメント内でブロックを上下に移動できます。

エディター内でブロックを移動する詳しい方法はこちらをご覧ください。

配置を変更

  • 幅広 – ブロックの幅をコンテンツ幅に合わせます。
  • 全幅 – 画面の幅いっぱいまでブロックの幅を広げます。

垂直配置を変更

コンテンツの垂直配置を指定できます。

  • 上揃え – ブロックの上に揃えます。
  • 中央揃え – ブロックの垂直方向の中央に揃えます。
  • 下揃え – ブロックの下に揃えます。

メディアを左(右)に表示

メディアとテキストの位置を入れ替えできます。

メディアを左に表示を選んだ場合
メディアを右に表示を選んだ場合

ヒント: メディアとテキストの境界線を左右にドラッグすると、メディアとテキストの配分を変更できます。

他のオプション

追加設定を表示(非表示)

追加設定を表示(非表示)オプションを使うと、エディターのサイドバーにあるブロック設定パネルを表示する(または隠す)ことができます。

コピー

コピーを使うと、選択したブロックをコピーしてエディター内の好きな位置へ貼り付けできます。

複製

複製を使うと、選択したブロックを複製できます。

前に挿入

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

後に挿入

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

移動

移動を選ぶと、コンテンツ内に青い線が現れます。その後、矢印を使って線を上下に移動し、選択したブロックの移動先を指定できます。最後にキーボードの Enter を押すとブロックがそこへ移動します。

再利用ブロックに追加

再利用ブロックに追加オプションを使うと、選択したブロックを再利用ブロックのリストへ追加できます。すると他の投稿や固定ページでそのブロックを利用できます。

グループ化

ブロックをまとめて一つの単位として扱いたい場合、グループ化オプションを選択します。例えば共通の背景色や他のブロックをグループへ追加できます。

ブロックを削除

ブロックを削除オプションを使うと、選択したブロックをコンテンツから削除できます。

トップ ↑

ブロック設定 ブロック設定

どのブロックも、ブロックツールバーにあるオプションに加えて、固有のオプションがエディターのサイドバーにあります。もしサイドバーが見当たらなければ、公開(更新)ボタンの隣にある「歯車」ボタンをクリックしてください。

スタイル

スタイルをデフォルト枠線の2種類から選べます。

テキスト色オプションは、テキストの色を変更できます。

背景色オプションは、背景色を変更できます。また単色グラデーションかを選べます。グラデーションの場合、線形放射状かを選べます。さらに線形の場合は角度を指定します。

メディアと文章の設定

モバイルデバイスではメディアとテキストを縦に並べて表示するオプションも選択できます。このオプションは比較的小さい画面でサイトを表示する場合に便利です。

ブロック内のメディアとテキストをモバイルでも横に並べて表示した場合、モバイルデバイスでは小さすぎてよく見えないことがあります。モバイルでは縦に並べるを有効にすると、左側のコンテンツが右側のコンテンツの上側に表示されます。この設定ならモバイルでの訪問者の体験が向上します。

高度な設定

サイドバーのブロック設定の高度な設定パネルには、HTML アンカー追加 CSS クラスのオプションがあります。

HTML アンカーは特定のメディアとテキストブロックユニークな Web アドレスを作ることができます。その後、ページ内のメディアとテキストブロックへ直接リンクできます。

追加 CSS クラスはブロックへ CSS クラスを追加できます。その後、カスタム CSS を書いてブロックに好みのスタイルを付けることができます。

変更履歴

  • 更新: 2020-08-23
    • WP 5.5の画像に変更
  • 更新: 2020-06-04
    • 再利用可能ブロック2つを通常ブロックへ変換
    • 見出しを変更
    • ブロックツールバーを変更
      • 垂直配置を変更オプションを追加
      • 新しい画像を追加
      • 「他のオプション」を追加

この記事は役に立ちましたか ? どうすればさらに改善できますか ?