SWELLリッチカラムブロックの使い方｜横スクロールや2列表示がスマホでもできちゃう！

「リッチカラムの設定や活用方法は？」

「リッチカラムに背景色を付けられる？」

「スマホ表示で画像を横スクロールさせたい」

この記事では、そんな方に向けて、SWELLでリッチカラムブロックの使い方を解説します。

リッチカラムブロックとは…複数のコンテンツを横並びに配置できるSWELL専用カスタムブロック

この記事を読めば、あなたも簡単に

• デバイスごとに表示列数を変えられる
• コンテンツを横スクロールできる
• カラムを中央寄せできる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、

画像をおしゃれに配置したり、コンテンツ比較を見やすくしたりなど、分かりやすい記事の作成に役立てています。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

ブロックエディターには「カラム」というWordPress標準ブロックもあります。これの上位互換が「リッチカラム」なので、利用の際はリッチカラムブロックを選んでください。

SWELLリッチカラムブロックでできること4選

SWELLのリッチカラムブロックでは以下のようなことができます。

それぞれ詳しく解説します。

カラムの表示列数をデバイスごとに変えられる

SWELLのリッチカラムブロックでは、PC・タブレット・スマホそれぞれの表示列数を設定できます。

これはWordPress標準のブロック「カラム」には一部ない機能です。

	カラム	リッチカラム
カラム数	最大6つ ※推奨値	無限
表示列数の設定	不可 ※スマホでは一部可	デバイスごとで可、最大8列
【デバイス別】表示列数の設定	不可 ※スマホ2列のみ可	可

例えば、以下のように4つあるカラムをPC4列、タブレット2列、スマホ1列というふうに設定できますよ。

PCとスマホでは表示画面の大きさが全く違うので、PCと同じ列数をスマホでも設定すると、コンテンツが小さくなりすぎて見えない…ということが起こります。

ですが、デバイスごとの表示画面の大きさに合わせて列数を変えることができるので、見ずらいということが起きなくなりますよ。

カラムを横スクロールで表示できる

SWELLのリッチカラムブロックは、設定したカラムを横スクロールで表示できます。

これはWordPress標準のブロック「カラム」にはない機能です。

	カラム	リッチカラム
横スクロールの設定	不可	可
【デバイス別】横スクロールの設定	不可	不可

横スクロール機能を有効にすると、以下のようになります。

画像をたくさん並べたり、用品やサービスの口コミを並べることもできますよ。

カラムの横幅をデバイスごとに設定できる

SWELLのリッチカラムブロックでは、PC・タブレット・スマホそれぞれでカラムの横幅も設定できます。

これはWordPress標準のブロック「カラム」には一部ない機能です。

	カラム	リッチカラム
カラム横幅の設定	可	可
【デバイス別】カラム横幅の設定	不可	可

例えば、以下のようにカラム横幅をデバイスごとに設定できますよ。

カラム横幅の調整次第では、1列に表示できるカラム数を増やしたりできそうですね。

また1枚の画像を4分割し、それぞれを4つのカラムに配置するアレンジもできそうです。

カラムの余白を細かく調整できる

SWELLのリッチカラムブロックは、以下の2ヵ所でカラムの余白を細かく調整できます。

これはWordPress標準のブロック「カラム」にはない機能です。

	カラム	リッチカラム
カラム間の余白設定	不可	可
カラム内の余白設定	不可	可

余白を大きくすると落ち着いた印象を与えたり、書いてある情報を正しく伝えることができますよ。

SWELLリッチカラムブロックの使い方とカスタム設定8つ

SWELLのリッチカラムブロックの使い方は以下のとおりです。

ちなみに、リッチカラムブロックは以下2つの方法からも呼び出せます。

自分の好きな方法で呼び出しましょう。

SWELLのリッチカラムブロックで設定可能な項目は8つあります。

それぞれ詳しく解説します。

カラムのスタイルを選ぶ

SWELLのリッチカラムブロックは、カラムのスタイルを以下の3種類から選べます。

_{＼タブの切り替え／}

デフォルトに比べて、ボーダーとシャドウはブロックが小さく表示されます。

ですので、配置したコンテンツが画像の場合は通常より小さく表示され、テキストの場合は1行に収まる文字数が少なくなります。

ただ、ボーダーとシャドウはデフォルトに比べてコンテンツが強調され、ユーザーの目を引くことができるので、私はよくシャドウを利用しています。

横スクロールで表示する

以下のようにリッチカラムブロックを横スクロールで表示することができます。

画像や商品の口コミなどを並べて表示したいときに便利ですが、横にスクロールしないと隠れているコンテンツを見ることができません。

とくにスマホで記事を読むときは縦に素早くスクロールされてしまい、横スクロールの部分を見逃されてしまうといったデメリットもあるでしょう。

ただ、横スクロールを使わなければコンテンツが縦長に表示されます。

もしそのコンテンツがユーザーにとって興味のない情報であれば、縦にスクロールして読み飛ばす手間が増え、かえって不便になるでしょう。

ですので、個人的には全てのユーザーにとって必要であろう情報は横スクロールさせず、一部のユーザーにしか必要とされない情報は横スクロールさせることをおすすめです。

カラム全体の横幅を設定する

リッチカラムブロックを横スクロールで表示する場合に限り、デバイスごとにカラム全体の横幅を細かく設定できます。

横幅を変えてリッチカラムを表示した場合の例を以下に示します。※図の大きさや高さは気にせず、横幅の違いだけ見てください。

_{＼タブの切り替え／}

このように1画面に表示するコンテンツの数も変えられますよ。

先の例では横幅の大きさをpx単位で表しましたが、その他にem、rem、vw、%もあります。

SWELLではサイト幅や記事コンテンツ幅を設定するときにpx単位を利用しているので、利用する単位は「px」か「％」の2択にしましょう。

コンテンツ幅の設定は、WordPress管理画面「外観」⇒「カスタマイズ」⇒「サイト全体設定」⇒「基本デザイン」の順にたどっていけば設定できます。

また横幅を元に戻したい場合は、クリアボタンをクリックしましょう。

デバイスごとの表示列数を決める

リッチカラムブロックを横スクロールで表示しない場合に限り、デバイスごとの表示列数を設定できます。

列数を変えてリッチカラムを表示した場合の例を以下に示します。

_{＼タブの切り替え／}

ご覧のとおり、列数が増えれば増えるほど、1カラムに表示できるコンテンツの横幅が小さくなります。

ですので、1文が短い箇条書きや画像を配置するときのみ、列数を2列以上に設定すると良さそうですよ。

カラム間の余白を調整する

SWELLでは、リッチカラムブロックのカラム間の余白を細かく調整できます。

余白を調整してリッチカラムを表示した場合の例を以下に示します。

_{＼タブの切り替え／}

デフォルトのままでいいと思いますが、詰まっていて見づらいな～と感じたときに余白を大きくしましょう。

カラムごとの横幅を設定する

SWELLのリッチカラムブロックでは、カラムごとの横幅をデバイス別で設定できます。

カラムごとで横幅を変えてリッチカラムを表示した場合の例を以下に示します。※図の大きさや高さは気にせず、横幅の違いだけ見てください。

_{＼タブの切り替え／}

また、「個別に指定する」ボタンから「同じ値を使用する」ボタンに切り替えた後、3つあるデバイス別の設定のうちの1つに数字を入力すると、残り2つのデバイスにも同じ数字が反映されますよ。

ちなみに、「表示範囲に合わせて強制的に文字列を改行する」を有効にすると、英単語の綴りが途中で切れて改行されます。

各カラム内の余白を設定する

「カスタムパディングを使用する」を有効にすると、リッチカラムブロックの各カラム内の余白を上下左右それぞれで細かく設定できます。

以下は、各カラム内の余白を変えてリッチカラムを表示した場合の例です。

さらにカラム横幅を設定するときと同じように、「個別に指定する」ボタンから「同じ値を使用する」ボタンに切り替えて4つあるうちの1つに数字を入力すると、他の3つにも同じ数字が反映されます。

中央寄せなど配置を決める

SWELLのリッチカラムブロックの配置を以下の3つから選べます。

3つある配置それぞれの例を以下に示します。

_{＼タブの切り替え／}

例えば左側のカラムには画像、右側のカラムには画像の説明文を配置するとき、場合によってはカラムの高さが異なってしまうケースも考えられます。

そんなときに見栄えを良くするためカラムを中央寄せにするなど、配置を自由に決められるのでとても便利ですよ。

【体験談】SWELLリッチカラムブロックのおすすめな活用例5つを紹介

当ブログが使用しているSWELLのリッチカラムブロックのおすすめな活用方法を5つ紹介します。

それぞれ詳しく解説します。

背景色をつける

通常、SWELLのリッチカラムブロックに背景色を付ける機能はありません。

ただしグループ化機能を使うことで、以下のように背景色を設定することができます。

_{＼クリックで開く／}

画像などコンテンツを複数並べる

SWELLのリッチカラムブロックで複数の同じコンテンツを並べるような使い方ができます。

以下3つのコンテンツをそれぞれ並べてみました。

当ブログでは画像を横並びで配置することが多いので、まずは画像を並べてみます。

関連性のある画像を並べたり、手順説明の画像をステップ形式で並べるのもいいですね。

つぎに𝕏（旧Twitter）のツイートを並べてみます。

商品やサービスの紹介で他の人の口コミもあわせて配置したいときに便利です。

最後は自サイトの投稿記事を並べてみましょう。

誘導したい記事が複数あったり、記事の最後に関連記事みたいに配置する使い方もいいですよ。

カラムの高さを揃える

リッチカラムブロックの各カラム項目にコンテンツを配置していくと、カラムの高さが揃わない場合が出てきます。

そんなときは、高さの低いカラム内にスペーサーブロックを配置すると、カラムの高さが揃うようになります。

スペーサーブロックとは…ブロックの高さを調整するWordPress標準カスタムブロック

_{＼クリックで開く／}

プロフィールを作成する

SWELLのリッチカラムブロックを使えば、以下のようなプロフィールボックスを作成できます。

投稿ページの目次前やページ最後に配置するプロフィールに使ってみてください。

_{＼クリックで開く／}

メリット・デメリットボックスを作成する

SWELLのリッチカラムブロックを使えば、以下のようなメリット・デメリットボックスも作成できます。

商品やサービスを紹介するときによく使用するので、作り方を覚えておきましょう。

_{＼クリックで開く／}

SWELLリッチカラムブロックの使い方まとめ

今回は、SWELLでリッチカラムブロックの使い方を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。