SWELLのリッチカラムブロックは超高機能！カラムブロックの上位互換！

SWELLのリッチカラムブロックについて紹介します。

2022/5/14のSWELLアップデートで、「横スクロール」機能が追加されてスライダーの様な使い方もできるようになりました。

参考まで「横スクロール」設定を活用した例を記事後半「リッチカラムブロックの横スクロール機能を使った例を考えてみた」で紹介しています。

リッチカラムブロックはかなり便利な機能が盛りだくさんで、ユーザーの工夫次第でいろいろな活用ができる超素敵なブロックです。

---

SWELLのリッチカラムブロックとは？カラムブロックの超上位互換

リッチカラムブロックは、2021/9/11リリースのVer2.5.1で追加されたSWELLオリジナルのブロックです。

>>SWELL – ver. 2.5.1 アップデート情報

Ver2.5.1アップデートでは、リッチカラムブロック以外にも便利機能が複数追加されました。
ぜひ上記アップデート情報を覗いてみてください。

ブロックエディターには既に「カラムブロック」がありますが、カラムブロックの機能が大幅に強化されたようなブロックが「リッチカラムブロック」です。

このリッチカラムブロックは、SWELL開発者の了さんがSWELLと並行して開発しているArkhe(アルケー)というテーマの有料プラグイン、Arkhe Blocks Proで先行して実装されていました。

リッチカラムブロックでできることを簡単に紹介します。

リッチカラムブロックを作っている様子を動画にしてみました。

動画内ではPC表示の設定のみを行っていますが、同様にタブレットやスマホ表示の際の表示形式も指定できます。

デバイスごとの表示列数を柔軟に設定できる

リッチカラムブロックでは、PC、タブレット、スマホ、それぞれの表示列数を個別に自由に設定することができます。

通常のカラムブロックで自由に列数を設定できるのはPC表示の場合にみです。タブレットとスマホ表示は1列か2列しか選べません。

ちなみに、SWELLではカラムブロックの機能も拡張されていますので以下の公式マニュアルを確認してみてください。

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

以下は、リッチカラムブロックで、PC6列、タブレット3列、スマホ2列に設定してみた画像です。

実際の表示は以下のようになります。

タブをクリックして見てみてください。

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

リッチカラムブロックでは、PC、タブレット、スマホ、それぞれで表示する横幅を個別に設定することもできます。

通常のカラムブロックでは、PCサイズの横幅しか設定できません。タブレットとスマホ表示では均一の横幅になります。

カラムの横幅を個別に設定してみた画像は以下のとおりです。

分かりにくいですが、スマホでも綺麗に表示されるようにPCとスマホで横幅の割合を少し変えています。

カラムの余白も柔軟に調整できる

リッチカラムブロックはカラムの余白も柔軟に設定が可能です。

以下の2か所の余白を自由に調整することができます。

カラム間の余白の調整

カラムとカラムの間の上下左右の余白(margin)を調整することができます。

カラム同士の余白を大きくすることでゆったり見せたり、逆に余白を無くして画像などを並べてあげるとギャラリーのようなものも作れます。

以下にデフォルトの状態と、カラムの左右の余白(間隔)を広げてみた画像を用意しました。

カラム内の上下左右の余白の余白調整

同様に、個々のカラムの上下左右の余白(padding)を個別に設定することができます。

それぞれのカラムの内側の余白量を自由に調整することができます。

子カラムに1remの余白を設定した状態と、余白を0にしてみた画像を用意しました。

白くなっている部分がカラム内の余白部分です。

公式サイトと同じレイアウトがCSS無しで作れる！

おまけで紹介しますが、これまでSWELLフォーラムなどで以下のような投稿が何度かありました。

このエリアは、PCでは6列、タブレットとスマホでは3列の表示になっています。

これを標準のカラムブロックで作ろうとすると、CSSでスマホ表示の列数を調整してあげる必要がありました。

カラムブロックでは、スマホ表示の3列設定ができません。

ですが、リッチカラムブロックを使うことでCSS無しで簡単に、公式サイトと同じレイアウトを実現することが可能です。

実際にリッチカラムブロックで同じレイアウトを作ってみました。

カラムを横スクロールさせる

2022/5/14リリースのver2.6.3でリッチカラムブロックに「横スクロール」設定が追加になりました。

>>SWELL – ver. 2.6.3 アップデート情報

CSSも不要、ボタン操作だけでカラムを横スクロールさせる設定ができる便利機能です。

以下、実際に横スクロールさせた動画のイメージです。

詳細の設定方法は記事後半の「横スクロール設定」で紹介します。

リッチカラムブロックの使い方

リッチカラムブロックの使い方も紹介しておきます。

以下手順でリッチカラムブロックを設置、設定していきます。

基本的な使い方は以上です。

ここまでは通常のカラムブロックと同じ使い方です。

ちなみに、ブロックエディターでは、段落ブロック内に「/ + ブロック名」を入力することでブロックを検索して呼び出すことができます。

リッチカラムブロックの場合は、以下の名称でブロックを呼び出すことができます。

ここからはリッチカラムブロック特有の操作を紹介していきます。

カラムのスタイル設定

サイドバーから、カラムブロックのスタイルを3種類から選ぶことができます。

「スタイル」からお好みのものをクリック

選択できる3種類のスタイルは以下のとおりです。

それぞれのスタイルを適用させてみた画像は以下です。

カラムの設定

カラムブロックを選択した状態で、サイドバーからデバイスごとの表示列数を設定できます。

リッチカラムブロック全体を選択した状態で以下から設定できます。

「設定」→「列数」

PC、タブレット、スマホで表示させたい列数をそれぞれ設定してあげましょう。

また、カラムの下部にある「+」ボタンをクリックするとカラムを追加することもできます。

カラムの横幅設定

各カラムの横幅もサイドバーから設定できます。

横幅を設定したいカラムを選択した状態で、以下から設定できます。

「設定」→「カラム横幅(%)」

PC、タブレット、スマホそれぞれで表示させたい横幅を設定してあげましょう。

余白の設定

ここまでの設定同様に、サイドバーから余白も柔軟に設定できます。

カラム同士の余白(間隔)を調整したい場合は、リッチカラムブロック全体を選択した状態で以下から設定できます。

「設定」→「カラム間の余白(margin)」

上下、左右それぞれお好みの数値を入力してください。

カラム内の余白を調整したい場合は、対象の子カラムを選択した状態で以下から設定できます。

「余白設定」→「カスタムパディングを使用する」にチェック

こちらも上下左右、お好みの数値を入力してみてください。

横スクロール設定

カラムを横スクロールさせる設定もサイドバーからボタン操作だけで簡単にできます。

以下の手順で横スクロールの設定ができます。

この手順だけでカラムを横スクロールさせることができます。

ここからは、実際にリッチカラムブロックの横スクロール機能を活用した例を作ってみたので紹介します。

リッチカラムブロックの横スクロール機能を使った例を考えてみた

リッチカラムブロックの「横スクロール」機能はいろいろな活用ができそうだったので、活用例を考えてみました。

それぞれ簡単に紹介します。

画像を横スクロールしてみる

単純に連続する画像を横スクロールさせてみました。

以下は、僕が運営しているSWELLサイト集でも活用できそうです。

手順を横スクロールで説明してみる

当サイトWebNote+では、手順を紹介する記事が多いです。

手順の説明はどうしても縦に長くなりがちですが、横スクロールで手順を表示するのも良いかもしれないです。

SNSの埋め込みを横スクロールしてみる

商品やサービスの口コミなどをTwitterなどのSNSから引用する時に、複数の投稿を横スクロールで表示できると便利そうです。

参考まで、Twitterを例にして作り方を紹介します。

商品リンクの一覧を横スクロールしてみる

SWELLのリッチカラムブロックの「横スクロール設定」と、Amazonなどの商品リンクを組み合わせて、以下のようなスクロールできる商品リンクの一覧を作ってみました。

商品リンクは「ポチップ」プラグインを使って作っています。

作り方もとても簡単ですが、一応手順を紹介しておきます。

今回のポチップとの組み合わせ例は、紹介する商品が多い記事などで活用できそうだなと思ったので作ってみました。もしよければ参考にしてください。

リッチカラムブロックで素敵なコンテンツを作りましょう！

今回は、SWELLのVer 2.5.1で新たに追加された「リッチカラムブロック」についてご紹介しました。

>>SWELL – ver. 2.5.1 アップデート情報

通常のカラムブロックよりも柔軟な表現がCSSの記述不要で実現できます。

通常のカラムブロックではできない、スマホで3列以上の表示もすることができます。

SWELL公式サイトの様な、PC6列、スマホ3列といった表示もCSSなしで再現が可能になりました。

リッチカラムブロックは、トップページのカスタマイズはもちろん、記事の中でも活躍するブロックだと思います。

記事内での活用の一例を「リッチカラムブロックの横スクロール機能を使った例を考えてみた」で紹介しました。

新機能が続々追加されるSWELLで楽しくサイト運営をしていきましょう。

最後まで読んでいただきありがとうございました。

---

SWELL公式サイトはこちらからどうぞ…！

SWELLブロックエディターの関連記事

SWELL全般の関連記事