MENU
カテゴリー
【新年度応援セール!】期間限定で 20%OFF!

カラムブロックで使えるSWELLのオリジナル機能

2020 4/03
カラムブロックで使えるSWELLのオリジナル機能
記事上のウィジェットエリア

ここでは、SWELLで利用できる「カラムブロック」の特別な機能について解説していきます。

目次前広告表示エリア
目次

カラムブロックとは

SWELLでの独自機能を説明する前に、ざっくりとカラムブロックについて紹介しておきます。

「カラムブロック」は、複数列で横並びにコンテンツを配置できる非常に便利なコアブロックです。
(スマホでは、1列の縦並びになります。)

「レイアウト要素」カテゴリーの中に用意されています。

カラムブロック

例:2列のカラムブロック

カラム1

カラム2

例:3列のカラムブロック

カラム1

カラム2

カラム3

グレーの背景は、カラムの中に配置した段落ブロックに対してSWELLのボックス装飾機能を使っています。

画像やリストなど、なんでも配置可能

画像とかもいれれるよ
画像とかもいれれるよ

カラムブロックに追加しているSWELLの独自設定

では、このカラムブロックに対してSWELLが独自に追加している設定について説明していきます。

ガイド線の表示

細かい部分ですが、エディター上では、カラムブロックであることが分かりやすいように、ガイド線として薄い波線で囲んでいます。

カラムブロックのガイド線の様子
カラムブロックのガイド線の様子

※ WordPress本体のバージョンによって見た目が変化することがあります

ブロックスタイル

カラムブロックに対して3種類のブロックスタイルを用意しています。
サイドバーのスタイルパネルから選択するだけでボーダーをつけたり、影をつけることが可能です。

カラムスタイル一覧
カラムスタイル一覧

例えば、影をつけると

こんな感じ。

カラムブロック全体にグレーの背景色をつけているのは、WordPress5.4から追加された標準機能です。

スマホ表示時の追加設定

カラムブロックの標準機能では、スマホサイズでの表示は強制的に1列の縦並びになってしまいます。

しかし、SWELLではスマホで2列表示にできるような設定も用意しています!

カラムブロックのスマホ表示設定
カラムブロックのスマホ表示設定

クラシックエディターでもカラムが使えます!

クラシックエディターでも、ツールバーにある「特殊パーツ」メニューから2カラムまたは3カラムのコンテンツを配置できるようにしています。

クラシックエディターでカラムブロックを選択
記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
閉じる