こんにちは "osaboo"
です。"@osaboo_Bot"
SWELLリッチカラムブロックの使い方｜カラムブロックとの違いもわかりやすく解説
SWELLのリッチカラムブロックの使い方や設定方法、カラムブロックとの違いを解説します。画像やテキストを見やすく配置するコツも紹介するので、レイアウト作成の参考にしてください。
Questionリッチカラムブロックとカラムブロックの違いは？
リッチカラムブロックの使い方は？
リッチカラムブロックでできることは？
SWELLのリッチカラムブロックは、画像やテキストを自由に配置できる便利なレイアウトブロックです。WordPress標準のカラムブロックよりも設定項目が豊富で、デザイン性の高いコンテンツを簡単に作成できます。
しかし、「カラムブロックとの違いがわからない」「どのように使えばいいのかわからない」という方も多いのではないでしょうか。
この記事では、SWELLリッチカラムブロックの使い方や設定方法、カラムブロックとの違いをわかりやすく解説します。レイアウトを見やすく整えるコツや活用例も紹介するので、ぜひ参考にしてください。
こんな人におすすめ！
- リッチカラムブロックの使い方を知りたい
- カラムブロックとの違いを知りたい
- 画像とテキストを見やすく配置したい
- おしゃれなレイアウトを作りたい
- SWELLのブロック機能を使いこなしたい
この記事でわかること！
- リッチカラムブロックの基本的な使い方
- リッチカラムブロックの設定方法
- カラムブロックとの違い
- レイアウトを見やすく整えるコツ
- リッチカラムブロックの活用例
迷ったら“使いやすさ”で選ぶのが正解です。
目次 "Contents"
リッチカラムブロックとは
リッチカラムブロックを解説する前に、まずはWordPress標準機能の「カラムブロック」について簡単に確認しておきましょう。
カラムブロックとは、コンテンツを複数の列に分けて表示できるWordPress標準のブロックです。
画像やテキストを横並びに配置できるため、比較や対比などのコンテンツを見やすく整理する際に役立ちます。
ブロック挿入メニューでは、ブロックタブの『デザイン：カラム』です。
※ SWELL公式マニュアルはこちらからご覧いただけます。「カラムブロックの拡張機能等が確認できます」
続いて、SWELLのリッチカラムブロックについてご紹介します。
リッチカラムブロックは、WordPress標準のカラムブロックをさらに使いやすくしたSWELL独自のブロックです。
親カラムと子カラムの構造になっており、親カラムでは列数やレイアウト全体の設定、子カラムでは横幅や余白などの細かな設定を行えます。
また、ブロックを挿入した後でも列数の変更や配置の調整が簡単にできるため、レイアウトの修正やカスタマイズもスムーズです。
さらに、パソコン・タブレット・スマートフォンごとに表示列数を設定できるため、デバイスに合わせた見やすいレイアウトを作成できます。
画像やテキストを自由に配置しながら、効率よくデザイン性の高いコンテンツを作成できるのがリッチカラムブロックの大きな特徴です。
ブロック挿入メニューでは、ブロックタブの『SWELL ブロック：リッチカラム』です。
リッチカラムブロックとカラムブロックの違い
ここでは、リッチカラムブロックとカラムブロックの違いをご紹介します。拡張性の違いを確認して見ましょう。
| 機能（項目） | カラム（ブロック） | リッチカラム（ブロック） |
|---|---|---|
| 行と列の配置 | 1行・複数列 | 複数行・複数列 |
| 横スクロール表示 | 無し | 有り |
| デバイスごとの表示 | 縦横指示 | PC・タブレット・スマホ |
使い勝手で大きく違うところは 上表の3項目です。
次に「行と列の配置」の機能について 参照例を作成して 詳しく解説します。（複数列3行の配置で解説）
デザイン：カラムの参照配置（1ブロック1行が原則）
カラムブロックで以下の配置を作る場合、3つのブロックで構成する必要があります。（赤枠がそれぞれ1つのブロックです）
カラム数が異なる場合、「2列」「3列」「1列」それぞれに新しくカラムブロックを追加にする必要があります。（「1ブロック：1行」でカラムを設定する）
デザイン：カラム
カラム 2
カラム 2
カラム 3
カラム 3
カラム 3
カラム 1
SWELL ブロック：リッチカラムの参照配置（1ブロックで複数行が可能）
リッチカラムブロックを使用すると、以下の配置を1つのブロックで構成できます。（赤枠が1つのブロックです）
カラム数が異なる場合でも、1つのブロック内で「2列・3列・1列」の配置が可能です。
SWELL ブロック：リッチカラム
カラム 50%
カラム 50%
カラム 33%
カラム 33%
カラム 33%
カラム 100%
リッチカラムブロックの使い方
リッチカラムブロックの挿入手順と、挿入後に行えるカスタマイズ（表示設定）について解説します。
リッチカラムの使い方
- リッチカラムブロックの挿入手順
- リッチカラムブロックの設定
- カラム項目の設定
- カラム項目のカスタマイズ例
それでは順番に見ていきましょう。
❶ リッチカラムブロックの挿入手順
- 作業は投稿（エディター）画面での作業になります。
リッチカラムブロックの挿入手順をご紹介します。
STEP
投稿（エディター）画面を準備
Menu『WordPress管理＞ダッシュボード＞投稿＞投稿を追加』をクリックします。
投稿（エディター）画面が表示されます。
（編集する場合は、投稿一覧から対象記事を選択してください。）
STEP
ブロック挿入ツールを切り替え
『＋（ブロックインサーター）』をクリックします。
STEP
ブロックタブメニューから『リッチカラム』を選択
ブロック挿入ツールが「×」に切り替わり、ブロックタブのメニューが表示されます。
SWELLブロックから『リッチカラム』を選択して投稿（エディター）画面に挿入します。
『リッチカラム』をクリックします。
STEP
リッチカラムブロック挿入完了
投稿（エディター）画面に『リッチカラムブロック』が挿入されます。
挿入直後では、以下のように表示されます。
- 挿入が完了したらカラム中の『+』をクリックしてブロックを配置していきます。
❷ リッチカラムブロックの設定
まずは、投稿（エディター）画面右側に表示される「設定 ＞ ブロック」タブの設定項目を確認していきましょう。
各設定は、投稿（エディター）画面右側の「設定 ＞ ブロック」タブから確認できます。
設定パネルが表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。
リッチカラムブロックに含まれるカラム項目のスタイルを一括で設定できます。
リッチカラムの設定方法（スタイル）
詳細設定項目
- リッチカラム
- スタイル
-
- デフォルト
- ボーダー
- シャドウ
- 設定
-
- 横スクロールで表示する
- 列数
-
- PCの表示列数
- タブレットの表示列数
- スマホの表示列数
- カラム間の余白
-
- 左右の余白
- 上下の余白
スタイル表示例
スタイルは『デフォルト・ボーダー・シャドウ』の3種類から選択できます。（カスタマイズイメージは3列3行で表示）
スタイル：デフォルト
スタイル：ボーダー
スタイル：シャドウ
設定：横スクロールで表示する
表示をワンタッチで横スクロールで表示することができます。
設定：列数・カラム間の余白（MARGIN）
各デバイスの列表示数の設定とカラム間の余白ができます。
設定：列数とカラム間の余白
❸ カラム項目の設定
リッチカラムブロックに含まれるカラム項目を個別に設定できます。
osabooここの『カラム横幅』の設定がイチオシの機能だよ。
ブロックタブメニュー詳細
- カラム項目
- 設定：カラム横幅
-
- PC（％）
- タブレット（％）
- スマホ（％）
-
表示範囲に合わせて強制的に文字列を改行する
- OFF（デフォルト）
- 余白設定
-
カスタムバディングを使用する
- OFF（デフォルト）
- 高度な設定
-
追加 CSS クラス
-
※ カラム横幅・余白設定は『同じ値を使用する』を使うと便利です。（PC・タブレット・スマホを同じ値にしてくれます）
カラム横幅_補足
リッチカラムはブロックの配列と横幅が記事に設置した後に簡単に調整できる！特に便利な機能なので操作手順を簡単にご紹介しますね。
- リッチカラム挿入必要に応じて列数を設定（デフォルト：2列）
- 横幅の設定をしたいカラムを選択
- カラム横幅の各デバイスに『%』で幅を入力
リッチカラムを挿入（デフォルトでは2列幅は均等に割り付けられて表示されます）
- デバイスごとに設定できます。
横幅を設定するカラムを選択（1列目）※ デバイスごとに設定できます。
カラムの横幅を『%』で入力サンプルでは『70』（入力した%の横幅で表示されます）
横幅を設定するカラムを選択（2列目）※ デバイスごとに設定できます。
カラムの横幅を『%』で入力サンプルでは『30』（入力した%の横幅で表示されます）
リッチカラムを選択すると次の表示に切り替わります。（完了です）
列の横幅の合計が 100% 以下であれば1行で表示されます。
❹ カラム項目のカスタマイズ例
カスタムパディングを活用して、以下のようなレイアウトを作成してみました。
必須の設定ではありませんが、デザインを調整したい場合に便利な機能です。
特に画像をカラム内に配置する際は、余白を調整することで見栄えがよくなり、バランスの取れたレイアウトを作成できます。
余白設定
- 緑のカラム1-1：左右の余白を3（rem）上下の余白を1（rem）
- オレンジのカラム1-2：左右の余白を5（rem）上下の余白を1（rem）
- 青のカラム1-3：左右・上下の余白を1（rem）デフォルト
上の設定の表示画面
まとめ！SWELLリッチカラムブロックの使い方｜カラムブロックとの違いもわかりやすく解説
今回は、SWELLのリッチカラムブロックの使い方や設定方法、カラムブロックとの違いについて解説しました。
リッチカラムブロックは、WordPress標準のカラムブロックよりもレイアウトの自由度が高く、画像やテキストを見やすく配置できるのが特徴です。
また、カラムごとの背景色や余白設定なども簡単に調整できるため、視認性の高いコンテンツやデザイン性のあるレイアウトを効率よく作成できます。
記事の読みやすさや情報の伝わりやすさを向上させたい方は、ぜひリッチカラムブロックを活用してみてください。
まずは基本的な使い方から試し、自分のサイトに合ったレイアウト作成に役立てていきましょう。
