カスタムカラムブロック

デバイスごとのカラム数設定、カラム内の最後のブロックの位置を揃える設定ができるブロックです。

※マニュアルはこちら

ブロックの特徴

PC、タブレット、モバイルでそれぞれ表示する列数を設定できます

カラム内の最後のブロックを揃えることで、見栄えの良い画像 + 文章 + ボタンのようなコンテンツを簡単に作れます

カラム内の余白も変更できて、影をつけることもできます

ブロック表示サンプル

デスクトップ・タブレット・モバイルで別々の列数設定

例えば「デスクトップで3列、タブレットで2列、モバイルで1列」といった画面サイズによって列数を変えて表示もできます。

画像 + 文章 + ボタンでボタンの位置を揃える

画像 + 文章 + ボタンのコンテンツで、文章量に違いがある場合でも、ボタンの位置を揃えるようなコンテンツを簡単に作れます。

極端に文章が少ない例

ボタンの位置は揃います

カードタイプ

カラム毎の余白の設定

カラム毎に余白の設定(なし・小・大)の設定ができます。

影の設定でカードっぽく

カラム毎に影をつけることも出います。

使い方はあなた次第

アイデア次第でいろいろな使い方ができるでしょう。

設定マニュアル

カラムの追加

カラムの追加

カラムブロックを追加すると、最初に3カラム自動で作成されます。

「+」と書かれた部分をクリックすると、カラム内にどのブロックを追加するか選択画面が表示されます。

カラムにどのブロックを追加するか選択できる

画像ブロックや段落ブロックなどをカラム内に追加して、コンテンツを作成していきましょう。

カラム(親)設定

カラム(親)の設定方法

カラム全体の設定は、文章などが入ったカラムブロックをまとめる「カスタムカラム」をクリックすると表示されます。

表示列数設定

カラム数の設定

表示列数の設定は「カラム設定」の「カラム数」で設定できます。

デスクトップ、タブレット、モバイルでそれぞれ別々に設定できます。

カラム間の余白を削除する

カラム間の余白を削除する

各カラムの間には余白があり、カラムの内容がくっつかないようになっていますが、「余白なし」をONにすることで、カラム間の余白を削除できます。

余白あり
余白なし

画像を大きくタイル状に表示したい場合などは余白なしのレイアウトがおすすめです。

カラムの順序を逆順にする

逆順設定

「逆順にする」をONにすると行内でのカラムの表示順が逆順になります。

画像 + 文章を並べたレイアウトなどを複数繰り返す場合、逆順の設定をすると画像を左右に交互に並べるレイアウトができます。

カラムを交互に繰り返すレイアウトのサンプル

デザインの一括設定

カラムのデザイン一括設定

「デザイン一括設定」では子カラムの余白と影のあり・なしを一括で設定できます。

設定はすべてのカラムに対して上書きで設定されてしまう点に注意してください。

カラムの揃え位置

カラムの揃え位置設定

ツールバーに表示される「垂直配置を変更」からカラムの縦の表示位置を設定できます。

「最後のブロックを下に揃える」を選択すると、各カラムで文章量に違いがあっても、ボタンの位置を揃えるようなレイアウトが作れます。

カラムの横並び位置の設定

横位置の設定

ツールバーに表示される「横位置」からカラムの横の表示位置を設定できます。

主に「カラム数」で設定されている列数より、実際に追加されているカラムの数が少ないときなどに効果を発揮します。

中〜上級者向け設定です。

カラム(子)設定

カラムのデザイン設定

文章や画像を入れられるカラムの設定では、カラムの背景色や、中の余白、カラムに影をつけるかなどを設定できます。