MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
永久無料ドメイン付き!超高速サーバーConoHa Wing! 詳細

【SWELLブロックエディタ使い方4】ステップ、タブ、アコーディオン

この記事では、SWELLの独自ブロックである次の3つのブロックを紹介します。

  • 「ステップ」ブロック
  • 「タブ」ブロック
  • アコーディオン」ブロック

SWELL独自の3つのブロックについて解説します。

目次

ステップ|SWELLブロックエディタ

SWELLのステップブロックには、以下の設定があります。

SWELLステップブロック設定画面

下記のようなスタイルのステップを選択できます。

スタイルを選択するには、ステップの「一番上の階層」を選択してください。

デフォルト

STEP
タイトル

本文はこちら。

STEP
タイトル

本文はこちら。

ビッグ

STEP
タイトル

本文はこちら。

STEP
タイトル

本文はこちら。

スモール

STEP
タイトル

本文はこちら。

STEP
タイトル

本文はこちら。

ステップでは、「タイトル」を挿入しないと、スマホで形が崩れることがあります。

ステップを作成した後は、スマホで形が崩れていないかきちんと確認しましょう

 関連記事

タブ|SWELLブロックエディタ

SWELLのタブブロックでできる設定は、以下の通りです。

SWELLタブブロック設定画面

タブでは、項目ごとに必要な内容だけを表示させることができます

長くなってしまうコンテンツでは、中身をすっきり分かりやすく見せることができます。

以下はタブのサンプルです。

スタイル:ノーマル、タブサイズ:50%

タブコンテンツ1

スタイル:ふきだし、タブサイズ:テキストに合わせる

タブコンテンツ1
分かりやすいように、背景に色を付けています(デフォルトでは無色)

スタイル:下線、タブサイズ:端まで並べる

タブコンテンツ1
分かりやすいように、背景に色を付けています(デフォルトでは無色)

アコーディオン|SWELLブロックエディタ

SWELLのアコーディオンブロックでは、以下の設定を行うことができます。

SWELLアコーディオンブロック設定画面

下記のようなスタイルのアコーディオンを選択できます。

スタイルを選択するには、アコーディオンの「一番上の階層」を選択してください。

アコーディオンサンプル

 関連記事

よかったらシェアしてね!
目次
閉じる