AFFINGER6 タブブロックの使い方！「比較・対比」に最適！タブで短くスッキリ配置

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6の「タブブロックの使い方」を初心者さん向けに解説します。

それではご覧ください！

タブブロックとは…

タブブロックとは、コンテンツを重ね合わせて ふだ（タブ）を選ぶことで表示の切り替えができる機能です。比較・分類等、同じグループのコンテンツを省スペースに収めることができます。

こんな感じです。

タブブロックの使い方

この章では、タブブロックの使い方をご紹介します。

タブブロックの基本的な挿入手順やスタイル設定とタブ項目の設定についてご紹介します。

それでは順番に見ていきましょう。

タブブロックの挿入手順

※ 作業は投稿（記事編集）画面での作業になります。

この章では、基本的なタブブロックの挿入手順をご紹介します。

STEP1投稿（記事編集）画面を準備

投稿（記事編集）画面が表示されます。
（編集する場合は、投稿一覧から対象記事を選択してください。）

タブブロックを挿入する箇所をクリックします。

ブロック挿入ツールを切り替えてブロックメニューを開きます。

STEP2ブロック挿入ツールを切り替え

投稿（記事編集）画面の左上部のブロック挿入ツール切り替えアイコン『+』をクリックします。

『+』をクリックします。

STEP3ブロックタブメニューから『AFFINGER：タブ』を選択

ブロック挿入ツール切り替えアイコンが『 x 』に変わり 以下の画面が表示されます。

ブロックタブのメニューから『AFFINGER：タブ』をクリックして投稿（記事編集）画面に挿入します。

『AFFINGER：タブ』をクリックします。

STEP4タブブロック挿入完了

投稿（記事編集）画面にタブブロックが挿入されます。

挿入直後は、以下のように表示されます。

必要に応じてツールバーのタブを追加アイコン『+』をクリックしてタブを追加します。

AFFINGER：タブの設定

『AFFINGER：タブ』の設定では、タブの追加やタブブロック全体（タブ・コンテンツ含む）の「スタイル」が設定できます。

投稿（記事編集）画面の『タブ全体が青色』で囲まれた状態（赤矢印）、右側『設定＞ブロックタブメニュー＞AFFINGER：タブ』が選択された状態（赤矢印）の詳細設定をご紹介します。

ブロックタブメニュー詳細

AFFINGER：タブのカスタマイズイメージ

カスタマイズイメージのサンプルでは、切り替えが確認できるように3つのタブをタブを使用します。

また、背景や枠線についても確認しやすいように設定を変更しています。

スタイル「基本スタイルは5つ」

デフォルト

スクエア

ふきだし

タブ

ボーダー

タブリストの設定

『タブリスト』の設定では、タブの追加やタブ部全体（コンテンツは含まない）の「テキストや背景の色・枠」等が設定できます。

投稿（記事編集）画面の『タブ部が青色』で囲まれた状態（赤矢印）、右側『設定＞ブロックタブメニュー＞タブリスト』が選択された状態（赤矢印）の詳細設定をご紹介します。

ブロックタブメニュー詳細

タブリストのカスタマイズイメージ

「AFFINGER：タブ」のデフォルトスタイルをベースにカスタマイズしています。

タブ全体のカスタマイズが出来ます。

タブの設定

『タブ』の設定では、選択したタブ部単体（コンテンツは含まない）の「テキストや背景の色・枠」等が設定できます。

投稿（記事編集）画面の『タブ部にカーソルが点滅』している状態（赤矢印）、右側『設定＞ブロックタブメニュー＞タブ』が選択された状態（赤矢印）の詳細設定をご紹介します。

ブロックタブメニュー詳細

タブのカスタマイズイメージ

「AFFINGER：タブ」のデフォルトスタイルをベースにカスタマイズしています。

タブ単体のカスタマイズが出来ます。

コンテンツグループの設定

『コンテンツグループ』の設定では、コンテンツ全体（すべてのタブのコンテンツ・タブは含まない）の「テキストや背景の色・枠」等が設定できます。

投稿（記事編集）画面の『コンテンツ部が青色』で囲まれた状態（赤矢印）、右側『設定＞ブロックタブメニュー＞コンテンツグループ』が選択された状態（赤矢印）の詳細設定をご紹介します。

ブロックタブメニュー詳細

コンテンツグループのカスタマイズイメージ

「AFFINGER：タブ」のデフォルトスタイルをベースにカスタマイズしています。

コンテンツ全体のカスタマイズが出来ます。

コンテンツの設定

『コンテンツグループ』の設定では、コンテンツ単体（選択されたタブのコンテンツ・タブは含まない）の「テキストや背景の色・枠」等が設定できます。

投稿（記事編集）画面の『コンテンツ部が青色（少し大きい）』で囲まれた状態（赤矢印）、右側『設定＞ブロックタブメニュー＞コンテンツ』が選択された状態（赤矢印）の詳細設定をご紹介します。

ブロックタブメニュー詳細

コンテンツのカスタマイズイメージ

「AFFINGER：タブ」のデフォルトスタイルをベースにカスタマイズしています。

コンテンツ単体のカスタマイズが出来ます。

Gutenberg 設定：タブブロックのデフォルト設定

「Gutenberg 設定」画面が表示されます。

『タブブロック』のタブをクリックすると、以下の画面が表示されます。

デフォルト設定の各項目を『任意に設定』して『Save』をクリックして完了です。

まとめ！AFFINGER6 タブブロックの使い方！「比較・対比」に最適！タブで短くスッキリ配置

AFFINGER6のタブブロックの使い方をご紹介しました。

AFFINGER6のタブブロックは、タブ毎にかなり自由にカスタマイズできるのできっと気に入った装飾ができると思います。

おすすめは、気に入った装飾を「Gutenberg 設定のタブブロックのデフォルト設定」で、デフォルト（初期設定）として使うと良いかと…「毎回詳細設定するのはしんどいですもんね」

あまり凝りすぎず！お気に入りのデフォルトを作って上手に使いましょう。この記事がお役に立てば嬉し良いです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／