実装例
↓プラグイン不要で、リッチカラムがこのように化けます!








リッチカラムにスライダー化設定を追加


設定欄も追加されます!


もう、SWELLにスライダーを実装するのに難しいコーディングも重いプラグインも必要ありません!
SWELLのリッチカラムブロックに「スライダー化」機能を追加します。
SWELLを使ってて、いつも足りないと思うのが「スライダー」機能。
頑張ってカスタムHTMLでコーディング実装するか、
スライダーのためだけにSnow Monkey Blocks(めちゃ多機能で重い)を入れるか、
使い勝手の良いプラグインを探す旅に出るか…(個人的に、良いものは皆無)
なんて悩んでいませんか!?(私はめっちゃ悩んでました。)
なぜ「リッチカラムのスライダー化」が最強なのか?
通常のスライダープラグインや、他のブロックエディタのスライダー機能には、SWELLユーザーにとって様々な「使いづらさ」がありました。
- 中身の自由度が低い(画像しか使用できない、設定が少ない)
- ブロックエディタで編集できない(管理画面が別)
- 英語で分かりづらい
- 他の一般的なブロックを網羅しているのでSWELLと重複し、重い(Snow Monkey Blocks など)
そんな不満を、SWELLユーザーに親しみのあるリッチカラムが全て解決します。
- 何でも置ける: 画像、テキスト、ボタン、リスト、さらには別のブロックまで。
- デザインはSWELLにお任せ: カラムごとの背景色、枠線などの設定がそのままスライダーの「1枚」になります。
- スマホ対応も完璧: 「PCは3枚、スマホは1枚見せる」といったレスポンシブ設定も、コードをいじらず完結。
実装方法
コードスニペットを導入する
こちらのボタンをクリックしてスニペットをダウンロードします。
会員限定コンテンツ
ここは会員限定コンテンツです。
\お申込みはこちら/
コードスニペットをオンにします。
(コードスニペットが分からない方は使用方法ページをご覧ください。)
驚くほど簡単な使い方
使い方は至ってシンプル。コードを1行も書く必要はありません。
- リッチカラムを挿入し、好きなコンテンツを作る。
- 右側のサイドバーにある「ブロックスタイル」から「スライダー化」を選択。
- 出現した「スライダー設定」パネルで、矢印の有無や自動再生をポチポチ選ぶだけ!




このブロックスタイルでできること
今回のカスタマイズでは、以下の設定をエディター上で自由に変更できるようにしました。
| 設定項目 | 内容 |
| 表示枚数(PC・SP) | 何枚ずつ表示されるか(小数点も可能) |
| 中央揃え(PC・SP) | 基準となるスライドを中央揃えにするかどうか (表示枚数小数点の時はオン推奨) |
| 隙間(px) | スライダー同士の隙間(gap) |
| 高さ(PC・SP) | スライダーの高さ指定 |
| 比率(PC・SP) | スライダーのアスペクト比を指定 |
| 画像フィット | 表示領域にどのように合わせるか指定 (CSSの object-fit ) |
| 速度・待機 | スライドする速度・待機時間を指定(ms) |
| 無限スライダー | 自動で延々とスライドし続けるかどうか |
| 矢印を表示 | 左右のガイド矢印を表示するかどうか |
| 矢印を外に出す | スライダーと矢印が被らないようにするかどうか |
| ドットを表示 | スライダー下のドットナビを表示するかどうか |
もう、スライダーに悩む必要はありません!このアドオンは、あなたのスライダー探しの旅を終わらせ、より高次的な提案に注力できる環境を作りだします。
- 設定が反映されません。
-
コードスニペットのトグルがオンになっているか確認してください。
- 画像以外もスライダー化したいです。
-
コンテンツスライダーとして使いたい場合は、カラム項目の中の要素は、グループブロックで囲ってください。
- もっとこうしてほしい…
-
練習と自走力アップのため、基本的には、ご自身でCSSを当ててみてください。
「頑張ったけど、どうしてもわからない」「毎回このCSSを当ててるなぁ…」という場合は、ご連絡ください。
改善・バージョンアップいたします。





