SWELLの始め方ガイド|これからSWELLを使い始める方はこちら→SWELLの始め方ガイド→クリックタップ

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

SWELLのリッチカラムブロックは超高機能!カラムブロックの上位互換!
  • URLをコピーしました!

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

この記事の内容
  • リッチカラムブロックでできること
  • リッチカラムブロックの使い方
  • リッチカラムブロックの横スクロール機能の活用例
リッチカラムブロックでできること
  • デバイスごとの表示列数を柔軟に設定できる
  • カラムの横幅をデバイスごとに設定できる
  • カラムを横にスクロールできる

※詳しくは「SWELLのリッチカラムブロックとは?カラムブロックの超上位互換」で解説。

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

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

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

さとしん

SWELLユーザーさんは絶対にリッチカラムブロックの機能と使い方を把握しておいた方が良です…!


ブロックエディターガイド

SWELLの高機能なブロックエディターを快適に使うためののガイドを作りました。

目次

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

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

>>

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

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

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

さとしん

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

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

  • デバイスごとの表示列数を柔軟に設定できる
  • カラムの横幅をデバイスごとに設定できる
  • 余白設定も柔軟に調整できる
  • 公式サイトと同じレイアウトがCSS無しで作れる!
  • 横スクロールができるのでスライダーの様な活用もできる!←【NEW】

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

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

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

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

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

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

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

>>

以下は、リッチカラムブロックで、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専用のブロック一覧」はどのように作っているのでしょうか?

PC表示

SWELL専用ブロックの一覧

スマホ表示

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

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

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

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

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

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

PC表示

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

スマホ表示

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

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

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

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

>>

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

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

さとしん

スライダーのようなイメージでリッチカラムブロックを活用できるようになりました…!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

カラムのスタイル設定

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

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

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

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

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

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

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

カラムの設定

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

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

「設定」→「列数」

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

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

さとしん

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

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

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

カラムの横幅設定

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

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

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

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

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

余白の設定

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

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

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

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

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

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

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

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

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

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

横スクロール設定

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

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

STEP
カラムブロック全体を選択
SWELLのリッチカラムブロックの横スクロール設定-1
STEP
サイドバーの「横スクロールで表示する」をONにする
SWELLのリッチカラムブロックの横スクロール設定-2
STEP
各表示デバイスごとの横幅を必要に応じて設定する
SWELLのリッチカラムブロックの横スクロール設定-3

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

さとしん

とても簡単で便利な機能ですね…!

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

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

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

  1. 画像を横にスクロールさせて表示する
  2. 手順の説明を横スクロールで表示する
  3. 商品リンクを横スクロールで表示する
さとしん

他にもいろいろ思いつくのですが、とりあえず3つ紹介してみます…!

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

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

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

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

スクロールできます
WebNote+
WebNote+
WebNote+
WebNote+
WebNote+
WebNote+
WebNote+
WebNote+
WebNote+
WebNote+

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

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

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

スクロールできます
STEP1

カラムブロック全体を選択

SWELLのリッチカラムブロックの横スクロール設定-1
STEP2

「横スクロールで表示する」をON

SWELLのリッチカラムブロックの横スクロール設定-2
STEP3

横幅を設定する

SWELLのリッチカラムブロックの横スクロール設定-3
みにしん

状況に合わせて使い分けてみようかな…!

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

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

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

スクロールできます
\ポイント最大10倍セール!/
楽天市場で見る
\ポイント5%還元!/
Yahooショッピングで見る

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

STEP
リッチカラムブロックを呼び出す
SWELLのリッチカラムブロックの横スクロール機能の活用例-1
STEP
カラムの中に商品リンクを必要な数設置していく
SWELLのリッチカラムブロックの横スクロール機能の活用例-2

ポチップの場合は、表示を縦並び表示にしておくとより見やすいかもしれません。

STEP
リッチカラムの横スクロールをONにする

横幅などは適宜調整してください。

SWELLのリッチカラムブロックの横スクロール機能の活用例-3
さとしん

工夫次第で本当にいろいろな活用方法がありそうだなと感じました…!本当に素敵です…!

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

【おまけ】SWELLとポチップの機能を組み合わせると…。

余談ですが、SWELLとポチップの機能を組み合わせると以下のような商品一覧表も作れます。

以下の記事で作り方を紹介しているので、もし興味を持ってもらえたら参考にしてください。

>>ポチップのインラインボタン機能|Amazon、楽天のボタンリンク付き商品一覧表を作る!

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

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

>>

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

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

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

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

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

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

さとしん

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

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

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


はこちらからどうぞ…!

SWELLのブロックエディターを使いこなすためのガイドを作りました!

当サイトWebNote+では、SWELLのブロックエディターで快適に記事を書くために知っておきたい内容をまとめたガイドを作成しています。

WordPress標準の機能とSWELLオリジナルの機能をフルに活用して、記事執筆の効率を上げて楽しくブログ運営をしていきましょう。

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる