🖼️ SWELLユーザー向け事例
記事内の画像スライド、どう見せる？
iframe、リッチカラム、スライダープラグイン、自作カルーセルを比べて、スマホで見やすく運用しやすい形に整理します。
スマホUX
画像スライダー
投稿画面で完結
画像スライド
1 / 10
悩みの出発点
HTMLスライドをiframeで埋め込むと、スマホで読みにくい
📱
スマホは縦長
16:9の横長スライドをスマホ幅に合わせると、高さが足りず、文字が小さくなりがちです。
🧭
操作がぶつかる
記事全体の縦スクロールと、iframe内の操作が重なり、読者が迷いやすくなります。
2 / 10
失敗しやすい例
iframeはプレゼンには便利。でも記事本文とは相性が悪い
ブログでは、読者は「読む」モードです。途中で小さな画面の中を操作させると、体験が分断されます。
iframe内で
小さく表示
小さく表示
3 / 10
方向転換
スライドは画像化すると扱いやすい
✅
表示崩れが少ない
HTMLより見た目を固定しやすく、スマホでも安定します。
🔁
SNSに流用しやすい
記事、X、Instagram、Pinterestなどに使い回しやすいです。
⚠️
重さには注意
PNGをそのまま並べず、WebP化とサイズ圧縮が大切です。
4 / 10
比較
主な選択肢は4つ
方法
手軽さ
スマホUX
運用
iframe
最初は簡単
読みにくい
記事本文と分断
リッチカラム
SWELL標準で楽
横スクロールに気づきにくい
軽め
プラグイン
ノーコード
機能は豊富
管理画面で作成が必要
ギャラリー＋CSS/JS
初回だけ設定
矢印、ドット、スワイプ対応
投稿画面で完結
5 / 10
なぜプラグイン優先ではない？
プラグインは便利。でも記事ごとに画像が変わると少し遠回り
🧩
管理画面で作る
まずプラグイン側でスライダーを作成します。
🔗
ショートコードを貼る
作ったスライダーを記事に呼び出します。
📝
記事制作と分かれる
投稿画面で画像を選ぶだけ、という流れから外れます。
6 / 10
今回の最適解
ギャラリーブロックをスライダー化する
🖱️
投稿画面で画像選択
普通にギャラリーブロックを追加し、画像を複数選ぶだけです。
🏷️
クラス名を付ける
追加CSSクラスに mode-slider-gallery を入れると、スライダー化します。
ギャラリーブロック
＋
追加CSSクラス：mode-slider-gallery
7 / 10
管理方法
CSSとJSは毎回書かず、1回だけ登録する
🎨
CSS
見た目、横幅、角丸、影、矢印位置を管理します。
⚙️
JS
矢印、ドット、現在位置の切り替えを管理します。
📦
WPCode
CSSとJSを分けて保存し、オン・オフしやすくします。
8 / 10
運用フロー
記事ごとの作業は、ここまで短くできる
1
画像を作る
スライドをWebP化し、横幅1200px前後に整えます。
2
ギャラリーに入れる
投稿画面で画像を選び、ギャラリーブロックを作ります。
3
クラスを付ける
mode-slider-gallery を付けるだけでスライダー化します。
9 / 10
結論
SWELLで画像スライドを入れるなら、
プラグインの前に仕組み化を考える
記事ごとに画像が変わるなら、ギャラリーブロック＋共通CSS/JSが実用的です。iframeより見やすく、プラグインより投稿画面の流れを壊しにくい方法です。
画像はWebP化
CSS/JSは一元管理
記事では画像選択だけ
10 / 10