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

概要


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



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



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





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


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


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


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



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


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


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


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



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



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

BackspaceではなくDeleteを押すと、レイアウトが崩れますのでご注意ください。

記事を評価 ありがとうございます! 失敗しました