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

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

＼ オシャレを実現！初心者でもデザイン性抜群のサイトにできる ／

SWELL公式サイトはこちら

※いま一番オススメのWordPressテーマ

SWELLの特徴・メリットデメリットはコチラ！

WordPressテーマ「SWELL」の特徴

総合評価

( 5 )

メリット

• とってもオシャレなサイトが誰でも作れる
• 構造化機能も充実！SEO対策をしやすい
• ダントツクラスの機能性
• 高速化のプロを顧問！ページスピードが速い
• 時短機能も充実！記事執筆を効率化できる
• ブロックエディター対応度ナンバーワン
• ブログ運営が楽しくなる
• 初心者でもカスタマイズしやすい
• 買い切り、複数サイトに使える
• アプデが頻繁で進化が止まらない

デメリット

• 値段が安くない（17,600円）
• AMP非対応
• 個人開発

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

ヒナキラ

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

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

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

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

SWELLアコーディオンブロックの使用例

＼タップしてみてね／

＼タップしてみてね／

＼タップしてみてね／

＼タップしてみてね／

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

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

STEP

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

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

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

STEP

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

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

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

STEP

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

STEP

アコーディオンの完成

閉じた状態

タップして開くと･･･

ヒナキラ

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

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

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

ヒナキラ

一つずつ解説しますね。

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

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

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

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

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

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

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

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

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

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

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

ヒナキラ

Twitterをたくさん埋め込む時に、隠しておくと見たい方だけ見れて便利ですね。

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

あわせて読みたい

SWELL初心者向けの使い方マニュアル【2023年9月版】 SWELLの使い方を、SWELL初心者向けに、公式サイトのマニュアルよりも詳しく解説。 SWELLの導入から、プラグイン、ブロックエディター、専用ブロックまで網羅しています。

当サイト使用テーマ。最高です。

WordPressテーマ「SWELL」の特徴

総合評価

( 5 )

メリット

• とってもオシャレなサイトが誰でも作れる
• 高速化に強くてスピードが爆速になる
• 時短になって効率化＝生産性があがる
• 初心者でもカスタマイズしやすい
• 買い切り、複数サイトに使える
• アプデが多くて進化がスゴイ
• SEO関係の機能もバッチリ

デメリット

• 価格が高い
• 個人開発の不安がある
• 人気すぎてデザインが被る

＼ 時短になって生産性が爆上がりするテーマ ／

SWELL公式サイトはこちら

※おしゃれで書きやすくてブログが楽しくなる