悩む人WordPress側で用意してくれている「コアブロック」に対してSWELL独自のカスタマイズを加えて使いやすくした「カラム」について詳しく教えてほしいです。
こういった悩みにお答えします。
本記事を読み始める前に
結論から先に言うと、WordPress側で用意してくれている「コアブロック」のカラムはSWELLブロックのひとつであるリッチカラムの下位互換です。
カラムでできる大抵のことはリッチカラムでもできます。
カラムとリッチカラムの比較表は本記事内でも登場しますが最初にも載せておきます。
それでもカラムが気になる方は、読んでみて下さい。
| カラム | リッチカラム | |
|---|---|---|
| カラム横幅 | px, %, EM, REM, VW, VHで指定可 | em, rem, px, vw, %で指定可 |
| 表示範囲に合わせて強制的に文字列を改行する | ※ 無効だと英単語の途中で改行されます。 | |
| カラム（列数） | 6列 | 8列 |
| PCでは縦に並べる | ||
| タブレットでは縦に並べる | ||
| モバイルでは縦に並べる | ||
| スタイル | 4スタイル※ デフォルト、ボーダー：グレー、ボーダー：メインカラー、シャドウ | 3スタイル※ デフォルト、ボーダー、シャドウ |
| PCで2列に表示 | ※ 8列まで可 | |
| タブレットで2列に表示 | ※ 8列まで可 | |
| モバイルで2列に表示 | ※ 8列まで可 | |
| モバイルでのカラム下部余白量 | ※ 2em, 4em, 6emで指定 | ※ PC、タブレットにも適応※ em, rem, px, vw, %で指定可 |
| カラム間の左右の余白量 | ※ em, rem, px, vw, %で指定可 | |
| 個別でのカラム上下左右の余白量 | ||
| 横スクロール |
本記事で解決できること
- カラムの使い方
- カラムとリッチカラムの違い
それでは、ご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
【SWELL】カラムの使い方
カラムの挿入
管理画面メニューから、「投稿」＞「新規投稿を追加」を選択します。
（ブロック挿入ツールを切り替え）から、「ブロック」＞「デザイン」＞「カラム」を選択します。
開始時のパターン
100
100を選択します。
幅100％で開始します。
50/50
※ スキップを選択した場合は50/50で開始されます。
50/50を選択します。
左右幅50％で開始します。
33/66
33/66を選択します。
左幅33.33%、右幅66.66%で開始します。
66/33
66/33を選択します。
左幅66.66%、右幅33.33%で開始します。
33/33/33
33/33/33を選択します。
左幅33.33%、中央幅33.33%、右幅33.33%で開始します。
25/50/25
25/50/25を選択します。
左幅25%、中央幅50%、右幅25%で開始します。
オリジナル
自分で幅を指定することもできます。
幅は、px、%、EM、REM、VW、VHから選択できます。
幅の変更は、カラムを選択後、数と単位を指定します。
今回は、左幅25％、中央幅25%、右幅50%で指定しました。
カラム
最大で6カラムまで増やせます。
スタイル
デフォルト
ボーダー：グレー
ボーダー：メインカラー
メインカラーの設定場所
管理画面メニューから、「外観」＞「カスタマイズ」を選択します。
サイドバーから、「サイト全体設定」を選択します。
サイト全体設定から、「基本カラー」を選択します。
基本カラーの「メインカラー」が反映されています。
シャドウ
ブロックを追加
ブロックを追加を選択します。
「すべて表示」を選択します。
追加できるブロックを見る
カラムを追加
「（カラムを追加）」からカラムを追加できます。
カラムを移動
「（左に移動）（右に移動）」からカラムを移動できます。
モバイルでは縦に並べる
デフォルトでは、「有効」になっています。
モバイルで2列に表示する
デフォルトでは、は外れています。
モバイルでのカラム下部余白量
縦1列の場合
通常（2em）
広め（4em）
もっと広め（6em）
縦2列の場合
通常（2em）
広め（4em）
もっと広め（6em）
【SWELL】カラムとリッチカラムの違い
カラムとリッチカラムの違い
| カラム | リッチカラム | |
|---|---|---|
| カラム横幅 | px, %, EM, REM, VW, VHで指定可 | em, rem, px, vw, %で指定可 |
| 表示範囲に合わせて強制的に文字列を改行する | ※ 無効だと英単語の途中で改行されます。 | |
| カラム（列数） | 6列 | 8列 |
| PCでは縦に並べる | ||
| タブレットでは縦に並べる | ||
| モバイルでは縦に並べる | ||
| スタイル | 4スタイル※ デフォルト、ボーダー：グレー、ボーダー：メインカラー、シャドウ | 3スタイル※ デフォルト、ボーダー、シャドウ |
| PCで2列に表示 | ※ 8列まで可 | |
| タブレットで2列に表示 | ※ 8列まで可 | |
| モバイルで2列に表示 | ※ 8列まで可 | |
| モバイルでのカラム下部余白量 | ※ 2em, 4em, 6emで指定 | ※ PC、タブレットにも適応※ em, rem, px, vw, %で指定可 |
| カラム間の左右の余白量 | ※ em, rem, px, vw, %で指定可 | |
| 個別でのカラム上下左右の余白量 | ||
| 横スクロール |
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
今回は以上です。