カスタムカラムブロック

カスタムカラムブロック

複数のカラムでコンテンツを表示できるブロックです。

WordPress本体のカラムブロックと違い、複数行のカラムを作成できます。また、デバイス別にカラム数の設定ができます。

  • このページで紹介している機能ではプラグイン「yStandard Blocks」を使用しています。
    プラグインの詳細は yStandard Blocks ページをご覧ください。

ブロックサンプル

サンプル

カラムサンプル①カラムサンプル①カラムサンプル①カラムサンプル①

カラムサンプル②カラムサンプル②カラムサンプル②

カラムサンプル③カラムサンプル③カラムサンプル③

カラムサンプル④カラムサンプル④カラムサンプル④

カラムサンプル⑤カラムサンプル⑤カラムサンプル⑤

カラムサンプル⑥カラムサンプル⑥カラムサンプル⑥

影あり

カラムサンプル①カラムサンプル①カラムサンプル①カラムサンプル①

カラムサンプル②カラムサンプル②カラムサンプル②

カラムサンプル③カラムサンプル③カラムサンプル③

カラムサンプル④カラムサンプル④カラムサンプル④

カラムサンプル⑤カラムサンプル⑤カラムサンプル⑤

カラムサンプル⑥カラムサンプル⑥カラムサンプル⑥

カラム内コンテンツの最後の位置を揃える

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

極端に文章が少ない例

ボタンの位置は揃います

カスタムカラムブロックの特徴

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

カスタムカラムブロックではデスクトップ・タブレット・モバイルで別々の列数を設定できます。

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

カラム表示順序の逆順設定

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

カラムを2列以上表示する場合、カラムの順序を逆に表示できます。

画像 + テキストの2列表示をいくつも繰り返すようなレイアウトを作るときに便利です。

カラム内コンテンツの最後の位置を揃える

カラムの揃え位置設定

カラム内コンテンツの最後の位置を揃えて表示できます。

例えば、画像 + テキスト + ボタンのレイアウトを作成する際、テキストの文量がまちまちでも最後のボタンの位置を揃えて表示できます。

カスタムカラムブロックの設定

カスタムカラムブロックは個々のカラムをまとめる親カラムと画像やテキストを追加できる子カラムの2種類で構成されています。

親ブロック設定

設定説明
カラム数 – デスクトップPCで表示したときの表示カラム数
カラム数 – タブレットタブレットで表示したときの表示カラム数
カラム数 – モバイルスマートフォンで表示したときの表示カラム数
カラム間の余白を削除カラム間の余白を0にする設定
(ONにするとカラム同士がくっついた状態で表示されます)
表示順序を逆順にする2列以上で表示される際にカラムの表示順序を左右逆にする設定
デザイン一括設定 – 余白各カラムの余白を一括で設定変更する(各カラムで個々に変更可能)
デザイン一括設定 – 影各カラムの影を一括で設定変更する(各カラムで個々に変更可能)

子ブロック設定

設定説明
背景色カラムの背景色
余白カラム内の余白設定
カラム外側の影の有無