カラムブロック

ブロック一覧へ戻る

カラムブロックを使用すると、テキスト、メディア、その他の種類のコンテンツを最大3カラムまで挿入できます。連続して使用すると、カラムはグリッド効果を生み出します。

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

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

カラムブロックを追加した後、最初のパターンを選びます(カラム数を変えたり、後からカラムを追加したりできます)。デフォルトのパターン(50 / 50)で良ければスキップオプションをクリックします。

カラムブロックの編集

カラムを追加または削除できます。追加するには、ボックスとサイドバーの間(ボックスの外側)をクリックしてから、カラムを追加アイコンをクリックします。または、カラムブロックのサイドバーのブロック設定にあるカラムパネルを使って、カラム数を変更します(最大6カラム)。

コンテンツの追加

カラム数を定義したら、各カラムにコンテンツを追加します。カラムブロックの優れた点は、各カラムに他のブロックを追加できることです。

例えば、カラムブロックを構造として使用し、画像ブロック見出しブロック段落ブロックを追加してサービスのグリッドを作成できます。

または、カラムブロックカバーブロックを使用して、サイトの機能ページを作成できます。

また、カラムブロックボタンブロックを使用して、サイトで何らかの操作をするようユーザーを促すこともできます。

ご存知のことと思いますが、可能性は無限にあります。こんなことができる、というのをご覧になってみませんか。ぜひ動画でご確認ください。

ブロックツールバー

各ブロックにはそれ固有のツールバーアイコンとコントロールがあり、エディター内でブロックを操作できます。

カラムブロックには標準で5個のボタンがあります。

  • 変換またはスタイル変更
  • 移動用ハンドル
  • 配置を変更
  • 垂直配置を変更
  • 他のオプション

変換またはスタイル変更

カラムブロックグループ、または入れ子になったカラム(一つのカラムに独立したカラムブロックが入る)へ変換できます。グループを使うとカラムブロックの周囲の背景色を変更できます。

他に、カラムブロックのスタイルをデフォルト重ね合わせの2種類から選べます。重ね合わせを選ぶと、隣り合わせのカラムが少し重なって表示されます。

カラムブロックグループ化して色の設定を表示したエディター画面

移動用ハンドル

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

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

配置を変更

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

垂直配置を変更

カラムの垂直配置を指定できます。高さが異なるカラムが混在する場合に役立ちます。

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

他のオプション

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

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

コピー

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

複製

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

前に挿入

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

後に挿入

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

移動

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

再利用ブロックに追加

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

グループ化

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

ブロックを削除

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

ブロック設定

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

カラムブロックには他のブロックを埋め込む機能があるため、あるカラムをクリックすると、そのカラムに追加したブロックに応じてサイドバーの設定が変わります。例えば、あるカラムに画像を追加した後、その画像をクリックすると、サイドバーに画像ブロックの設定オプションが表示されます。

スタイル

  • デフォルト – カラムとカラムの間を少し開けます。
  • 重ね合わせ – 隣り合わせのカラムを少し重ねて表示します。

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

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

カラム

カラムブロックの編集セクションで説明したように、ブロック設定サイドバーでカラム数を設定できます(最大6カラム)。

カラム数を編集するには、上下の矢印をクリックするか、スライダーを左右にドラッグするか、フィールドに直接数字を入力します。

高度な設定

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

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

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

変更履歴

  • 更新: 2020-08-24
    • ページ先頭に「ブロック一覧へ戻る」を追加
  • 更新: 2020-08-21
    • WordPress 5.5のスクリーンショットと動画
    • ブロックツールバーの機能変更に対応
    • ブロック設定の機能変更に対応
  • 新規作成: 2019-03-07

原文

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