【解説】Aurora Design Blocksのスライダーブロックの使い方

Index

ブログやサイトに「スライド式で情報を見せたい」ときに便利なのが、Aurora Design Blocksの「スライダーブロック」です。
お知らせ、レビュー、コラム、導入事例などを動きのあるデザインで印象的に伝えることができます。

今回は、その使い方を5ステップでサクッと解説します!

ステップ①:スライダーブロックを選択する

まずはブロック追加画面で、
[aurora-design-blocks]slider block をクリックします。

これがスライドコンテンツの“外枠”となる親ブロックです。

📌注意: この時点では中身は空なので、後から「スライド用のコンテンツ」を追加していきます。

ステップ②:「ブロックを選択するには…」と表示されたらOK

ブロックを追加すると、「ブロックを選択するには…」と表示されたエリアが登場します。

この中に、好きなコンテンツをスライド形式で挿入できます。
ブロックエディタ上では「1枚ずつ」作成 → 複数で自動スライドされる仕組みです。

ステップ③:スライド1枚目を作成する

/でブロックを追加して、例えば以下のようなレイアウトを入れてみましょう:

  • アイコン or 画像(プロフィール風)
  • 見出しブロック
  • 段落ブロック(本文)

背景色や余白調整などもブロックエディタでそのまま調整可能です。

ステップ④:2枚目、3枚目…とスライドを追加する

スライダーコンテンツの中に、同じ形式で複数のブロックグループを作成していくだけ。
これで自動的に「横スライド」で表示されるようになります。

ステップ⑤:デザイン確認&レスポンシブ対応チェック

作成したスライダーブロックは、PC・タブレット・スマホでも表示をチェックしておきましょう。

  • ブロック全体がはみ出さないか
  • アイコンや文字が小さすぎないか
  • 背景色や装飾に違和感がないか

ここを見直せば、実用レベルで即使えるスライダーセクションが完成します✨
(1番大きいコンテンツに高さが揃います)

🧁 活用アイデア

  • 👥 お客様の声(顔アイコン+コメント)
  • 🧠 使い方のステップ解説(1ステップずつスライド)
  • 🎨 制作実績紹介(画像付きポートフォリオ)

✅ まとめ

Aurora Design Blocksのスライダーブロックは、

  • コード不要
  • 見たまま編集
  • 柔軟なブロック挿入OK

という、ノーコードでも超使えるスライダー機能です。
導入事例やお知らせなどに「動きとストーリー」を加えたい方は、ぜひ活用してみてください!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

To Page Top