SWELLのタブブロックの作り方｜活用例とコツを解説

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

パソコン版とスマホ版の手順など、似た情報をいくつも並べて記事が長くなっていませんか。私も以前は両方の手順を続けて書いていたため、読者が自分に関係ない部分まで読み進めなければならない記事になっていました。

この記事では、SWELLの「タブ」ブロックの作り方を初心者向けにわかりやすく解説します。実際に記事をすっきりさせた体験も交えるので、読みながら進めれば、必要な情報だけを切り替えて見せられる記事を作れます。

あわせて読みたい

SWELLの評判は本当？初心者ブロガーが実際に使ってみた正直レビュー 本記事はアフィリエイト広告を含みます。 「SWELLって評判いいけど、17,600円を出す価値が本当にあるの？」と気になっていませんか。 この記事では実際にSWELLを使って...

SWELLのタブブロックとは

タブブロックは、タブをクリックして表示する内容を切り替えられるSWELLの装飾ブロックです。複数の情報を1か所にまとめられるので、記事を短く見せながら読者に選んでもらえます。

筆者はパソコン版とスマホ版の手順をタブで分けてから、読者が自分に必要な手順だけを見られるようになりました。「人によって必要な情報が違う」場面では、タブがいちばん活躍します。

切り替えで複数の情報を1か所にまとめられる

タブを使うと、同じ場所で表示を切り替えられるため、記事の縦の長さを抑えられます。料金プラン別の説明や初心者・中級者向けの解説などにも便利です。

アコーディオンやリッチカラムとの違い

アコーディオンは縦に開閉する補足向け、リッチカラムは横に並べて比べる用途向けです。どれか1つを選んで見てもらう情報なら、タブがもっとも適しています。

タブブロックの作り方

タブブロックは、ブロックを追加してタブ名と中身を入力するだけで作れます。作る前に何をタブに分けるかを決めておくと、迷わず完成させられます。

筆者はAFFINGER6を使っていたころ、タブを作るのにひと手間かかっていました。SWELLでは標準のブロックとして用意されているので、プラグインを追加せずにすぐ作れるのが助かっています。

タブに分ける内容を決めておく

タブに向いているのは、パソコンとスマホの手順・プラン別の内容など、読者がどれか1つを選ぶ情報です。すべて読んでほしい内容はタブに分けず、本文に書きましょう。

タブの名前は短くする

タブの名前は、「パソコン」「スマホ」のように短くするのが基本です。名前が長いとスマホでタブが窮屈になり、押しにくくなってしまいます。

タブブロックの活用例とコツ

タブブロックは、読者ごとに必要な情報が分かれる場面で特に力を発揮します。ここでは、実際に使って効果を感じた活用例と、見やすく作るコツを紹介します。

筆者は以前、タブを6つも作ってしまい、スマホでタブが折り返されて押しにくくなりました。今はタブを3つまでに絞るようにしたところ、どの端末でもすっきり表示されています。

パソコンとスマホの手順を分ける

操作方法が端末によって違う場合は、「パソコン」「スマホ」のタブで手順を分けると便利です。読者は自分の端末の手順だけを見ればいいので、迷わず作業を進められます。

プランや種類ごとに内容を分ける

サーバーの料金プランや商品の種類など、選択肢ごとの説明をタブにまとめるのもおすすめです。気になるものだけを切り替えて読めるので、比較もしやすくなります。

タブブロックを使うときのコツ

• タブの数は2〜3つに絞る
• タブ名は4〜6文字程度にする
• 全員に伝えたい内容はタブの外に書く
• スマホで実際にタップして確認する

あわせて読みたい

SWELLvsAFFINGER6｜初心者におすすめのWordPressテーマはどっち？ 本記事はアフィリエイト広告を含みます。 「SWELLとAFFINGER6、結局どっちがいいの？」と迷っていませんか。どちらも人気の有料テーマで、調べるほど決められなくなるん...

よくある質問

最初に表示するタブを変えられますか？

設定パネルから、最初に開いておくタブを選べます。読者の多くが選びそうな内容を、最初に表示しておくと親切です。

切り替える前のタブの内容も検索エンジンに読まれますか？

タブの中身もページ内にあるため、基本的には読み取られます。ただし、記事の結論など大切な内容は、タブの外に書いておくほうが安心です。

タブはいくつまで作れますか？

決まった上限はありませんが、多すぎるとスマホで見づらくなります。読みやすさを考えると、2〜3つにまとめるのがおすすめです。

タブのデザインは変えられますか？

設定パネルから、タブのスタイルを選べます。色はサイトのメインカラーに合わせて表示されるので、記事全体の雰囲気になじみやすいです。

まとめ

SWELLのタブブロックは、クリックで表示する内容を切り替えられる便利な装飾です。パソコンとスマホの手順やプラン別の説明をまとめれば、記事を短く保ちながら必要な情報を届けられます。

タブを増やしすぎて失敗した筆者のおすすめは、タブは2〜3つ、名前は短くまとめることです。まずは端末ごとに手順が違う記事で、タブブロックを試してみてください。

あわせて読みたい

おすすめWordPressテーマ3選｜失敗しない選び方を解説 本記事はアフィリエイト広告を含みます。 「WordPressテーマって種類が多すぎて、どれを選べばいいかわからない」と迷っていませんか。テーマ選びはブログの見た目・速...

おすすめ記事