カラムをスライダーで表示する方法(スライダーモード)

カラム(横に並んだ列)も、「スライダーモード」にするとスライドさせながら表示できます。
スライダーモードは、カラムごとに設定します。
たとえば3つ並んだカラムのうち、1つだけをスライダーにしたり、3つすべてをスライダーにしたりできます。
サービス紹介やお客様の声など、限られたスペースで多くの内容を見せたいときに便利です。


① スライダーモードをオンにする

  1. スライダーにしたいカラムにマウスを乗せると、上に「カラム」のラベルが表示されます。
  2. ラベルの歯車をクリックします。
  3. 「行設定を編集」が開きます。下にある「スライダーモード」をオンにします。

オンにすると、そのカラムの下にスライダー専用のメニューが表示されます。
※オンにしたカラムだけがスライダーになり、横に並んだほかのカラムはそのままの表示です。

② スライダーメニューの使い方

スライダーモードをオンにしたカラムの中身が、1枚目のスライドになります。
「+」や「複製」でスライドを増やすと、そのカラムの枠の中で内容が切り替わるようになります。

ボタン

できること

1・2・3…(数字)

スライドの番号です。クリックすると、そのスライドに切り替わって編集できます

新しいスライドを追加します

複製(四角が重なったアイコン)

表示中のスライドを複製します

ゴミ箱

表示中のスライドを削除します(スライドが2枚以上のときに表示されます)

歯車

スライダーの設定画面を開きます

おすすめの作り方

1枚目のデザインを整えてから「複製」で増やし、文章や画像だけ差し替えると、デザインのそろったスライダーを早く作れます。

③ スライダーの動きを設定する

スライダーメニューの歯車をクリックすると、スライダーの設定画面が開きます。


矢印・バレット

  • 矢印を表示:左右に、スライドを切り替える矢印を表示します
  • 矢印の位置:矢印を置く場所を選びます(例:サイド)
  • バレットを表示:何枚目のスライドかを示す点(●○○)を表示します

動き方

  • アニメーション:切り替わるときの動きを選びます(例:スライド)
  • トランジションのイージング:動きのなめらかさを選びます(例:スムーズ)

自動で切り替える(オートスライド)

  • オートスライド:チェックを入れると、スライドが自動で切り替わります
  • オートスライド速度:切り替わる間隔です。1000ms=1秒です(5000msなら5秒ごと)
  • 自動再生の方向:切り替わる向きを選びます(例:順方向)
  • 自動再生の進行状況を表示:次に切り替わるまでの進み具合を表示します
  • モバイルで自動再生を無効にする:スマホで見たときは、自動で切り替わらないようにします
  • タブが非表示またはフォーカス時に一時停止:ほかのタブを見ているときなどに、自動再生を止めます

その他

  • キーボードナビゲーション:パソコンのキーボードの矢印キーで、スライドを切り替えられるようにします

スライダーモード
設定画面の一番下からも、スライダーモードのオン・オフを切り替えられます。


④ 保存する

設定が終わったら、画面右上の「保存」をクリックして完了です。

ポイント

  • スライダーモードは、カラムごとに設定できます。 3つのカラムをすべてスライダーにすることも、1つだけスライダーにすることもできます。
  • 複数のカラムをスライダーにして、オートスライドの間隔をずらすと、動きのあるデザインになります。(例:左は4000ms、真ん中は5000ms、右は6000ms)
  • 文章が長いスライドは、オートスライドの間隔を長めにしましょう。 読み終わる前に切り替わってしまうのを防げます。
  • スマホでは「モバイルで自動再生を無効にする」がおすすめです。 読む速さに合わせて、自分でスライドできます。
  • 公開前に、プレビュー(目のアイコン)でパソコンとスマホの両方の動きを確認しましょう。





ページビルダー一覧



ページビルダー概要


ページの追加方法


ブロックの活用方法


ウィジェット追加方法


SEOの設定方法


スマホサイズのデザイン設定方法


購入者限定ページの作成手順


ポートフォリオ機能で商品一覧・顧客の声を作成!





ヘッダーを活用してホームページのメニューを最適化しよう!


コピー(複製)の仕方(ウィジェットやブロック)


フッターを活用してユーザーを誘導しよう!


ページへのアクセス設定


AIで作ったLPやウェブサイトをコネワンに表示させる方法


ファビコンとSNS共有画像


ファイルマネージャー


ブロックをスライダーで表示する方法(スライダーモード)


ブロックの表示設定(見る人・日時・国などで表示を切り替える)


カラムの基本設定


グローバルカラムの設定


カラムをタブで切り替えて表示する方法(タブモード)


カラムをスライダーで表示する方法(スライダーモード)

更新日 19/09/2026

この記事は役に立ちましたか?

ご意見をお聞かせください

キャンセル

ありがとうございます