複数列レイアウトのページコンテンツをボタンブロックでテンプレート化する

概要

ボタンブロックには、ドラッグ&ドロップでコンテンツを追加することができ、簡単にコンテンツ複製のテンプレートとして活用することができます。

しかし、複数列構成のコンテンツは、そのままボタンブロックにドラッグ&ドロップすると、列構成が解除されてしまいます。

ここでは、列構成を保ったままボタンブロックでテンプレート化する方法を紹介します。

方法1：/column コマンドでボタン内を複数列にする

ボタンブロックの編集モーダル内でも、通常のページと同様に各種コマンドが使用できます。/column コマンドを使うと、2列～5列の間で任意の列数の構成を簡単に作成することが可能です。

列構成が出来たら、その間にポインターを合わせると表示されるグレーのガイド線をドラッグし、各列のおおよその幅の比率を決めます。

作成した各列の中にコンテンツを配置し、完了 ボタンをクリックしたら完成です。

方法2：ページとしてボタン内に追加し、テキストに変換する

方法1だと、どうしてもボタン編集モーダルのサイズが固定であるため、幅の広いコンテンツをモーダル内で編集するのが不便なことがあります。その際は、ページとして構成したものをボタンブロックにドラッグ&ドロップするのが便利です。

まずはテンプレート化したいコンテンツを、ページとして作成します。

次に、上記で作成したページをボタンブロックの編集モーダル内にドラッグ&ドロップします。

モーダル内に配置したページの左側にある ⋮⋮ ハンドルをクリックし、ブロックタイプの変換 から テキスト を選択すると、ページが解体されて、先ほどページ内に作成した構成が展開されます。

この際、上部にページ名である「テンプレート化したいコンテンツ」という表記がプレーンテキストとして残り、その下のコンテンツがインデントされた状態となりますが、ページ名部分を選択して2回Backspaceキーを押すことで削除、アンインデントできます。