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

WordPressテーマ『SWELL』のカスタムブロック「リッチカラムブロック」について紹介します。

ブロックエディター標準の「カラムブロック」を大幅に強化したようなとても便利なブロックです。

リッチカラムブロックは超強力です…!
この記事の内容まとめ
  • リッチカラムブロックとは?
  • リッチカラムブロックの使い方

リッチカラムブロックでは、デバイスごとの表示列数を柔軟に設定できたり、余白も簡単に調整することができます。

さとしん

CSS無しでかなり柔軟な使い方ができますよ…!

とても便利で強力なブロックなのでぜひ活用してみてください。

SWELLのブロックエディターの機能や使い方は以下の記事にまとめました。

目次

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

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

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

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

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

さとしん

本当に便利なブロックなので、当サイトでも愛用しているSWELLにも実装されたのはとても嬉しいです…!

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

  • デバイスごとの表示列数を柔軟に設定できる
  • カラムの横幅をデバイスごとに設定できる
  • 余白設定も柔軟に調整できる
  • 公式サイトと同じレイアウトがCSS無しで作れる!

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

動画はArkhe Blocks Proのリッチカラムブロックです。
基本的な機能は同じですが、設定項目の文字などが少し異なります。

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

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

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

通常のカラムブロックではPCの表示列数しか設定できず、タブレットとスマホ表示は1列で固定になります。

SWELLではカラムブロックの機能も拡張されているので、タブレットとスマホは1列か2列を選択可能です。

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

SWELLのリッチカラムブロック

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

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

SWELLのリッチカラムブロック-3
さとしん

これまでのカラムブロックとは比べ物にならないくらい柔軟な表示ができます…!

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

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

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

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

PC表示

リッチカラムブロックの横幅設定-1

スマホ表示

リッチカラムブロックの横幅設定-2

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

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

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

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

  • カラムとカラムの間の余白
  • カラム内の上下左右の余白

カラム間の余白の調整

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

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

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

デフォルト

リッチカラムブロックの左右の余白調整-1

左右の余白拡大(3rem)

リッチカラムブロックの左右の余白調整-2

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

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

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

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

余白あり(1rem)

リッチカラムブロックのpadding設定-1

余白なし

リッチカラムブロックのpadding設定-2

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

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

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

SWELL公式サイトの「SWELL専用のブロック一覧」はどのように作っているのでしょうか?

PC表示

SWELL専用ブロックの一覧

スマホ表示

SWELL公式サイトのスマホ表示

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

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

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

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

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

PC表示

SWELLのリッチカラムブロック-1

スマホ表示

SWELLのリッチカラムブロック-2
さとしん

これは嬉しい人が多いのではないでしょうか…!

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

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

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

STEP
メインコンテンツエリアで「+」ボタンをクリック
ブロックの追加ボタン
STEP
リッチカラムを探してクリック
リッチカラムブロックの使い方-1
STEP
カラムの中に自由にブロックを配置していく

カラムの中の「+」ボタンをクリックするとブロックを配置できます。

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

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

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

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

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

  • /rich-columns
  • /リッチカラム
さとしん

覚えておくと便利です…!

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

カラムのスタイル設定

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

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

リッチカラムブロックのスタイル設定

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

  1. デフォルト
  2. ボーダー
  3. シャドウ

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

リッチカラムブロックのスタイル

カラムの設定

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

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

「設定」→「列数」

リッチカラムブロックの列数設定

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

さとしん

ここが個人的に目玉の機能ですね…!

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

リッチカラムブロックのカラム追加ボタン

カラムの横幅設定

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

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

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

リッチカラムブロックの横幅設定

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

余白の設定

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

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

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

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

リッチカラムブロックの余白設定

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

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

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

リッチカラムブロックのカスタムパディング
さとしん

余白をうまく活用して見やすくしてあげたいですね…!

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

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

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

  • デバイスごとに表示列数の設定
  • デバイスごとに表示横幅の設定
  • カラム内の上下左右の余白設定

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

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

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

さとしん

いろいろな設定を試しながら使ってみてください…!

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

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


はこちらからどうぞ…!

SWELLのブロックエディターの紹介記事はこちら

SWELLのレビュー記事はこちら

SWELLでトップページをカスタマイズする方法はこちら

SWELLの設定や使い方で困った時はこちら

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

よかったらシェアしてね!
目次
閉じる