AFFINGER7のタブブロックの使い方｜初心者向けに作り方・活用例・カスタマイズ方法を解説

「記事の情報をもっと見やすく整理したい…」

そんなときに便利なのが、AFFINGER7の「タブブロック」です。

タブブロックを使えば、複数の情報をタブで切り替えて表示できるため、長い記事でもスッキリとまとめられます。

この記事では、AFFINGER7のタブブロックの使い方から設定方法、おすすめの活用例まで初心者向けにわかりやすく解説していきます。

「どんな場面で使えばいいの？」

「どうやって作るの？」

という方でも迷わず使えるよう、画像付きで順番に説明していきます。

タブブロックとは？

タブブロックとは、複数のコンテンツをタブで切り替えて表示できる機能です。

例えば次のような表示になります。

こんな感じでタブでコンテンツを切り替えることができます。

タブブロックの基本的な使い方

タブブロックはブロックツールの「AFFINGER：タブ」で利用できます。

タブを追加する方法

「タブの追加」でタブを増やすことができます。

追加する「タブ」の数に制限はないようですが、あまりに多いと管理もしにくいですしデザインが崩れたり、動作が不安定になるようです。

こんなにタブを増やすことも可能ですが・・・

タブを削除する方法

追加した「タブ」を削除するには削除したいタブを選択して、ツールから「タブを削除」を選択します。

タブブロック全体の編集

タブブロックの構造はタブブロックという大きな入れ物にタブという小さな入れ物が入っているようなイメージです。

なのでタブブロックの大枠と個別のタブをそれぞれ編集するようになります。

「Gutenberg設定」でタグブロック全体のデフォルトの基本設定をすることができます。

あらかじめ「Gutenberg設定」でタグブロックの基本設定をしておいてもいいですが、記事作成画面で個別で設定できるのでそこまで気にする必要はありません。

タブブロックの全体設定では以下の設定をすることができます。

①：スタイルの設定（全体）	タブブロックの全体のスタイル設定です。
②：色設定（全体）	タブブロック全体の色を設定できます。
③：枠線設定（全体）	タブブロック全体の枠線の色と線幅を設定できます。
④：外観設定（全体）	タブブロック全体の角丸を設定できます。

①：スタイルの設定（全体）

タブのスタイルを５種類から変更することができます。

デフォルト

スクエア

ふきだし

タブ

ボーダー

デフォルト

スクエア

ふきだし

タブ

ボーダー

②：色の設定（全体）

色設定ではタブブロック全体のテキスト色と背景色を設定できます。

テキスト色を変更するとこんな感じです。

背景色を変更するとこんな感じです。

③：枠線の設定（全体）

枠線の設定では枠線の色と線幅を設定することができます。

枠線の色と線幅を変更するとこんな感じです。

④：外観の設定（全体）

外観の設定ではタブブロック全体で角丸を設定することができます。

角丸を設定するとこんな感じです。

個別タブの編集

タブブロックでは個別のタブをクリックし選択することでタブごとに編集することができます。

設定できる項目は以下になります。

①：色設定（個別）	タブ個別の色を設定できます。
②：枠線設定（個別）	タブ個別の枠線の色と線幅を設定できます。
③：外観設定（個別）	タブ個別にアイコンを設定できます。

①：色設定（個別）

色設定でタブごとにテキスト色（タブ部分のみ）と背景色を変更することができます。

タブごとのテキスト色（タブ部分のみ）を変更するとこんな感じです。

タブごとの背景色を変更するとこんな感じです。

②：枠線設定（個別）

タブごとに枠線の色と線幅を変更することができます。

タブごとに枠線の色と線幅を変更するとこんな感じです。

③：外観設定（個別）

外観設定（個別）でアイコンを設定することができます。

アイコンを設定するとこんな感じです。

以上がタブブロックの基本的な使い方になります。

個別タグのコンテンツは通常の記事作成機能と同じように普通に作成することができますが、タブブロック内にタブブロックを使用することはできません。

タブブロックを見やすくするコツ

タブブロックを見やすくするには次のポイントをおさえておきましょう。

タブ名は短くする

タブ名は文章よりも短い単語を利用した方が見やすくなります。

情報量を詰め込みすぎない

1つのタブに長文を書きすぎると、結局スクロールが必要になります。

タブ1つあたり300〜500文字程度を目安にすると読みやすくなります。

ボックスやリストを活用する

文章だけより

• リスト
• ボックス
• 吹き出し

を組み合わせると、さらに読みやすくなります。

AFFINGER7のオリジナルブロックとの相性も抜群です。

AFFINGER7のタブブロックおすすめ活用例

タブブロックは「使い方」を覚えるだけでなく、「どんな場面で使うか」が重要です。

ここでは、実際にブログで使いやすい活用例をご紹介します。

活用例① 商品レビュー記事

レビュー記事では、

• メリット
• デメリット
• 実際に使った感想
• おすすめする人

をタブで分けると読みやすくなります。

長いレビュー記事でも情報が整理されるため、離脱防止にも効果的です。

こんな感じです。

活用例② 比較記事

タブで比較すると違いが一目でわかります。

価格や機能を整理して紹介したい場合にもおすすめです。

こんな感じです。

タブブロックを使うときの注意点

便利な機能ですが、使い方によっては逆効果になることもあります。

タブを増やしすぎない

タブが多すぎると、スマホでは横スクロールが必要になる場合があります。

おすすめは3個程度です。

タブ名は短くする

長いタイトルは途中で折り返されたり、読みにくくなったりします。

「メリット」「料金」「比較」のように、短くわかりやすい名前を付けましょう。

重要な情報は最初のタブにも入れる

読者によっては最初のタブしか見ないこともあります。

特に伝えたい内容は、最初のタブにも掲載するようにしましょう。

スマホ表示を確認する

パソコンでは問題なく表示されても、スマートフォンでは見え方が異なることがあります。

公開前に必ずプレビューで確認しましょう。

タブブロックに関するよくある質問

タブはいくつまで追加できますか？

明確な上限はありませんが、多すぎると見づらくなるため、3個程度がおすすめです。

スマホでも表示されますか？

はい。

スマートフォンでもタブを切り替えて表示できます。

ただし、タブ名が長すぎるとレイアウトが崩れる場合があるため、短いタイトルを心がけましょう。

タブブロックはSEOに影響しますか？

通常の使い方であれば、タブブロックを使用したこと自体がSEOで不利になることはありません。

ただし、タブ内に重要な情報を詰め込みすぎるのではなく、読者が理解しやすい構成を意識することが大切です。

タブブロックとテーブルはどちらがおすすめですか？

用途によって使い分けるのがおすすめです。

• タブブロック：情報を切り替えて見せたいとき
• テーブル：一覧で比較したいとき

比較項目が少ない場合はタブブロック、多い場合はテーブルが向いています。

まとめ

AFFINGER7のタブブロックは、記事内の情報を見やすく整理できる便利な機能です。

特に、比較記事やレビュー記事、料金プランの紹介などでは、読者が必要な情報だけをすぐに確認できるため、ユーザビリティの向上につながります。

タブブロック以外にも、AFFINGER7にはブログを見やすくする便利な機能が数多く用意されています。

タブブロックと組み合わせると更に見やすくなりますので、工夫してみてくださいね。

※　AFFINGER6は現在、AFFINGER7へと移行となりました。