AFFINGERタブブロックの使い方｜追加/設定から削除の迷いポイントまで完全解説

AFFINGERの「タブブロック」は、複数の情報をスッキリ整理して見せたいときにとても便利な機能です。

料金プランの比較や、Q&Aをまとめるときなどに使うと、見た目もわかりやすくなります。

ただ正直なところ、最初に使ったときはかなり迷いました。

特に「タブを増やしすぎたときにどうやって削除するのか？」がわからず、しばらく悩んで検索したことがあります。

同じように困っている方も多いはずです。

そこで今回は、タブブロックの基本操作からタブの追加・削除の方法、デザイン設定や活用例まで、初心者でもつまずかないように解説していきます。

AFFINGERタブブロックとは？

AFFINGERの専用ブロックのひとつに「タブブロック」があります。

これは、複数の情報をコンパクトにまとめて表示できる便利な機能です。

たとえば、料金プランを比較するときに「ベーシック」「スタンダード」「プレミアム」とタブを切り替えて表示できたり、FAQを「料金」「サービス」「サポート」とカテゴリごとに整理して見せたりできます。

1ページに情報を詰め込みすぎると縦に長くなり、情報を比較しにくい問題があります。

そんなときにタブブロックを使うと、見た目がスッキリするだけでなく、情報も比較しやすく読者にやさしいコンテンツが作成できます。

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

タブブロックを設置する方法はシンプルです。初めてでも数分で慣れると思います。

タブブロックの挿入手順

1. 記事編集画面で左上の「」をクリック
2. 検索バーに「タブ」と入力し、「AFFINGER：タブ」を選択
   
   
   　
3. 1つめのタブが表示されるので、タイトルを入力（例：料金プランA）
   
   
   　
4. タブの中に文章や画像を入力
   
   

これで、最初のタブが完成します。

同じ手順で2つめ、3つめのタブを追加すれば、複数タブを切り替えて使えるようになります。

タブの追加と削除方法（迷いやすいポイント）

タブを扱うときに初心者が一番つまずくのが、この「追加と削除」です。

タブを追加する

• 「タブリスト」を選択（選択方法は3つ）
  
  １）ツールバーから選択
  
  
  ２）ブロックオプションから選択
  
  
  ３）画面左下から選択
  
  　
• タブ横に「」が出現するのでクリックする
  
  
  　
• これで新しいタブを追加できました
  
  

タブを並び替える

動かしたいタブを選択し、ツールバーの矢印（）をクリック

「プラン名を人気順にしたい」とか、「質問をよくある順に並べたい」という場合も簡単に調整できます。

タブを削除する（初心者が迷いやすいポイント）

タブを増やしすぎたときに「どうやって削除するの？」と悩む人が多いんですが、実は削除ボタンが目に見える形では存在しません。

削除の手順はこうです：

1. 削除したいタブを選択
   
   
   　
2. タブタイトル部分のツールバー右端にある「︙（オプション）」をクリック
   
   
   　
3. 表示されたメニューから「削除」を選択
   
   

直感的に「×」ボタンを探してしまうのですが、AFFINGERタブはこの「︙」から削除、または「Shift＋Alt＋Z」でしか削除できません。

デザインのカスタマイズ方法

AFFINGERのタブブロックは、見た目を自由にカスタマイズできるのも魅力のひとつです。

色の変更

• タブコンテンツの背景色

• 選択中タブの色

• 枠線や文字色

コンテンツの枠線は「コンテンツ/コンテンツグループ」、タブの枠線は「AFFINGER:タブ/タブリスト/タブ」で設定できます。

• コンテンツ：ひとつのタブ内のコンテンツに枠線をつける
• コンテンツグループ：すべてのタブのコンテンツにのみ枠線をつける
• AFFINGER:タブ：すべてのタブに枠線をつける
• タブリスト：すべてのタブに枠線をつける
• タブ：選択したタブのみ枠線をつける

アイコンをつける

タブタイトルにアイコンを入れると、視覚的に分かりやすくなります。

• タブを選択　
• ブロックオプションの「外観→アイコン」を選択、またはアイコンクラスを入力
  
  
  　
• タブにアイコンが表示される
  
  

アイコンクラスは以下の記事まとめています。

【AFFINGER6】よく使うWebアイコンをまとめました

ブログでよく使うWebアイコンをまとめました。 使用するWebアイコンは、 AFFINGERオリジナルアイコンFont AwesomeREMIX ICON この3つです。 ※REMIX ICONを使用 ...

タブスタイルを変更する

タブのスタイルは5種類変更できます。

• タブを選択した状態で「AFFINGER：タブ」をクリック
  
  
  　
• 右サイドバーのブロックオプションから好きなスタイルを選択
  
  

このあと紹介する活用例では、それぞれ異なるスタイルを使って作成しているので、デザインの参考にしてください。

タブブロックの活用例

実際にタブブロックをどう使うと効果的なのか、いくつかの例を紹介します。

料金プラン比較

ベーシック／スタンダード／プレミアムと分けて、切り替えで比較できるようにする。

タブのスタイル：デフォルト

FAQ（よくある質問）

「料金について」「機能について」「サポートについて」とカテゴリごとにタブを分ける。

タブのスタイル：スクエア

サービス紹介

　「特徴」「導入事例」「サポート体制」など、内容を整理して伝える。

タブのスタイル：ふきだし

商品レビュー

　「基本情報」「メリット」「デメリット」と分けると、読者が欲しい情報にすぐアクセスできる。

タブのスタイル：タブ

機能比較

「基本機能」「サポート体制」「コストパフォーマンス」に分けると、機能の違いを表で直感的に比較できます。

タブのスタイル：ボーダー

ポイントは「縦に長くなってしまう情報」を整理することです。

タブで切り替えることで、読者がストレスなく情報を得られるようになります。

まとめ

AFFINGERのタブブロックは、初心者には少し分かりにくい部分もありますが、使いこなせばサイトをグッと見やすくできる強力な機能です。

特に「タブ削除」の操作は、ツールバーの「︙」 → 「削除」という流れを覚えておくことが大切です。

ここを知っているだけで、迷わず使えるようになります。

料金比較やFAQ、サービス紹介など、活用の幅はとても広いので、ぜひ実際に触ってみてください。

「タブブロックを使うとこんなに見やすくなるんだ！」と実感できるはずです。

関連記事：