SWELLアコーディオンブロックの使い方

SWELLアコーディオンブロックの使い方と使用例を解説！

え、アコーディオンブロックって何？

使う必要あるの？

こういった疑問を解決します。

SWELLのアコーディオンブロックは、情報を隠しておきたい場合、情報を閉じた方がユーザビリティが向上すると考えられる場合に大活躍してくれる便利ブロックです。

アコーディオンブロックを上手に使えば、ユーザビリティを向上させられますよ。

というわけで、さっそく見ていきましょう。

⇒SWELLの評判は本当？テーマおたくが徹底レビュー！

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

＼タップしてみてね／

SWELLアコーディオンブロックの使い方

では、SWELLアコーディオンブロックの使い方を解説していきますね。

STEP

投稿画面で「アコーディオン」ブロックを選択する

①ブロック追加をタップ。

②アコーディオンをタップする。

STEP

アコーディオンにテキストを入力する

上側の「常にオープンになっている部分」と、下側の「隠される部分」へのテキスト入力を行う。

（隠されている部分はテキストに限らず、画像でも何でもオッケー。）

STEP

アコーディオンのスタイルを選択する

STEP

アコーディオンの完成

閉じた状態

タップして開くと･･･

こんな感じで、完成となります。

アコーディオンのおすすめ使用例

続いて、アコーディオンのおすすめ使用例をご紹介します。

内容としては下記です。

一つずつ解説しますね。

①長くなってしまう内容を隠す

たとえば、下記のような感じです。

このような、Twitter埋め込みなどでも便利です。

Twitter埋め込みをたくさん並べると、人によっては「邪魔」に感じる場合も…

なので、アコーディオンを使って見たい人だけ見られるようにしておくというのがオススメです。

②Ｑ＆Ａ(質疑応答)方式にする

たとえば、下記のような感じです。

といった感じで、Ｑ＆Ａ形式にも使えます。

まとめ｜SWELLアコーディオンブロックの使い方

いかがでしたでしょうか。

SWELLのアコーディオンブロックは、情報を隠しておきたい(閉じておきたい)場合に便利です。

人によっては見たくない情報などを隠すことで、ユーザビリティ向上にもなりますね。

画像がたくさんになってしまう場合も使えます。

画像が多いと表示が遅くなりますが、隠すと改善しますね。

というわけで、今回は以上です。

SWELLにしてない方は、下記から入手しましょう。

>SWELL公式サイト

あわせて読みたい

SWELLオススメ機能トップ10|ランキング形式でご紹介 この記事のまとめ SWELLのオススメ機能をランキング形式でご紹介。 SWELL機能一覧と、記事リンクも設置。 SWELLのブロックエディターは使いやすいって聞くけど、どうな…

あわせて読みたい

SWELLのブロックエディター使い方｜初心者向けにやさしく解説 SWELLのブロックエディターで解説するよこの記事のまとめ ブロックエディター（Gutenberg）の使い方をやさしく解説！ SWELLの画面を使って解説しますが、他のテーマでも…