「カラム」ブロック

「カラム」ブロックは、1つのブロックをいくつかの範囲に分割します。分割された範囲それぞれに、段落や画像などブロックを新たに追加することができます。複数のブロックを横に並べたいときに便利です。

※テキストだけで表を作りたい場合は「テーブル」ブロックの利用をおすすめします。
「テーブル」ブロックの使い方はこちらをご覧ください。

実際の表示イメージ

サンプルテキスト:indexProとはどんなサイトでしょうか?実際に見てみましょう!

サンプル画像:
indexProへのリンクが設定されています
サンプル画像2

上記では「カラム」ブロックを利用して、ブロック内を3つに分割して下記のように構成しました。
左のカラム:「段落」ブロック
中央のカラム:「画像」ブロック(リンクあり)
右のカラム:「画像」ブロック

使い方

①記事を編集していてブロックを追加する際「+」のアイコンをクリックすると、様々なブロックの候補が表示されます。

その中から「レイアウト要素」をクリックします。

図1:「レイアウト要素」をクリック

②「レイアウト要素」に含まれるブロックが表示されます。その中から「カラム」のアイコンをクリックします。

図2:「カラム」アイコンをクリック

③「カラム」ブロックができました。

どのように分割したいか、近いレイアウトを選びます。分割数や、カラムの幅は後からでも変更できます。

今回の例では、一番左の2分割(各カラムが同じ幅)を選んで進めてみます。

図3:「カラム」のレイアウトを選ぶ

④空のカラムができました。

カラムそれぞれに、新しくブロックを追加していきます。設定を進めたいカラムをクリックすると、ブロックの候補が表示されます。利用したいブロックを追加しましょう。

図4:設定したいブロックをクリックする

カラムの分割数、幅を変更するには

カラムの分割数を変更する

「カラム」ブロックを選択します。選択すると、画面右側に分割数の設定欄が出てきます。ご希望のカラム数をご指定ください。

上手く「カラム」ブロックを選択できないときは、画面上部の「ブロックナビゲーション」を利用して「カラム」を選択しましょう(図6参照)

図5:カラム数を指定する欄
図6:「ブロックナビゲーション」から選択

カラムの幅を変更する

「カラム」ブロックの中で、幅を変更したい列を選択します。選択すると、画面右側に「カラム設定」が表示されますので、希望の割合に切り替えてください。

図7:カラム設定でパーセントを切り替える
図8:右のカラムを70%に指定してみた

既に段落などのブロックを中に設定してあると、指定のカラムを上手く選択できないときがあります。
その場合は、画面上部の「ブロックナビゲーション」を利用して希望の「」を選択しましょう(図9参照)

図9:「ブロックナビゲーション」