当ページのリンクには広告が含まれています。

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

AFFINGER6 タブブロックの使い方!

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

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

  • AFFINGER:AFFINGER:タブ

AFFINGER6専用のブロックエディター機能です。
比較・分類等、同じグループのコンテンツを省スペースに収めることができる機能です。

重ね合わせたコンテンツに名札がついているイメージです。

メニューやマニュアルによく使われていますね。長い記事を短くスッキリした配置にすることができます。

この記事でわかること!

  • タブブロックとは…
  • タブブロックの使い方
    1. タブブロックの挿入手順
    2. AFFINGER:タブの設定
    3. AFFINGER:タブのカスタマイズイメージ
    4. タブリストの設定
    5. タブリストのカスタマイズイメージ
    6. タブの設定
    7. タブのカスタマイズイメージ
    8. コンテンツグループの設定
    9. コンテンツグループのカスタマイズイメージ
    10. コンテンツの設定
    11. コンテンツのカスタマイズイメージ
  • Gutenberg 設定:タブブロックのデフォルト設定
  • まとめ!

それではご覧ください!

初心者でも安心 コスパ最強の洗練されたWordPressテーマ/

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

- 少しづつ増え続ける当サイトオリジナル特典付!-

タブブロックとは…

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

タブ-1 のコンテンツ:テキストや画像が挿入できます。

テキスト

テキスト

タブ-1 のテキスト終わり。

タブブロックの使い方

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

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

AFFINGER:タブブロックの使い方

  • タブブロックの挿入手順
  • AFFINGER:タブの設定
  • AFFINGER:タブのカスタマイズイメージ
  • タブリストの設定
  • タブリストのカスタマイズイメージ
  • タブの設定
  • タブのカスタマイズイメージ
  • コンテンツグループの設定
  • コンテンツグループのカスタマイズイメージ
  • コンテンツの設定
  • コンテンツのカスタマイズイメージ

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

タブブロックの挿入手順

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

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

STEP1投稿(記事編集)画面を準備

『WordPress管理>ダッシュボード>投稿>新規投稿を追加』をクリックします。

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

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

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

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

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

投稿画面:ブロック挿入ツールを切り替え

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

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

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

ブロック挿入ツール:ブロックタブ|AFFINGER:タブ

STEP4タブブロック挿入完了

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

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

ブロック挿入ツール:ブロックタブ|AFFINGER:タブ|タブ挿入直後

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

AFFINGER:タブの設定

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

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

設定:ブロックタブ|AFFINGER:タブ
設定:ブロックタブ|AFFINGER:タブ|詳細

スタイル

  • デフォルト
  • スクエア
  • ふきだし
  • タブ
  • ボーダー

  • テキスト:『ドロップダウンメニューより選択』
  • 背景:『ドロップダウンメニューより選択』

枠線

  • 枠線(色):『ドロップダウンメニューより選択』
  • 枠線の幅:『0〜100』

外観

  • 角丸:『ON/OFF』

高度な設定

  • 追加 CSS クラス:『任意』

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

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

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

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

  • タブ1のコンテンツ『AFFINGER:タブ』の設定
  • テキスト:デフォルト
  • 背景:#fafafa
  • 枠線:#313131
  • 枠線の幅:2
  • 角丸『ON』
  • タブ1のコンテンツ『AFFINGER:タブ』の設定
  • テキスト:デフォルト
  • 背景:#fafafa
  • 枠線:#313131
  • 枠線の幅:2
  • 角丸『ON』
  • タブ1のコンテンツ『AFFINGER:タブ』の設定
  • テキスト:デフォルト
  • 背景:#fafafa
  • 枠線:#313131
  • 枠線の幅:2
  • 角丸『ON』
  • タブ3のコンテンツ『AFFINGER:タブ』の設定
  • テキスト:デフォルト
  • 背景:#fafafa
  • 枠線:#313131
  • 枠線の幅:2
  • 角丸『ON』
  • タブ1のコンテンツ『AFFINGER:タブ』の設定
  • テキスト:デフォルト
  • 背景:#fafafa
  • 枠線:#313131
  • 枠線の幅:2
  • 角丸『ON』

タブリストの設定

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

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

設定:ブロックタブ|タブリスト
設定:ブロックタブ|AFFINGER:タブリスト|詳細

タブリストの初期設定はGutenbergで変更できます。

  • テキスト:『ドロップダウンメニューより選択』
  • 背景:『ドロップダウンメニューより選択』

枠線

  • 枠線(色):『ドロップダウンメニューより選択』
  • 枠線の幅:『0〜100』

外観

  • アイコン:『ドロップダウンメニューより選択』

高度な設定

  • 追加 CSS クラス:『任意』

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

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

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

  • タブ1のコンテンツ『タブリスト』の設定
  • テキスト:#ffffff
  • 背景:#ff9000
  • 枠線:#e92f3d
  • 枠線の幅:3
  • アイコン:ペン

タブの設定

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

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

設定:ブロックタブ|タブ
設定:ブロックタブ|タブ|詳細

  • テキスト:『ドロップダウンメニューより選択』
  • 背景:『ドロップダウンメニューより選択』

枠線

  • 枠線(色):『ドロップダウンメニューより選択』
  • 枠線の幅:『0〜100』

外観

  • アイコン『ドロップダウンメニューより選択』

高度な設定

  • 追加 CSS クラス:『任意』

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

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

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

  • タブ1のコンテンツ『タブ』の設定
  • テキスト:#ffffff
  • 背景:#ff9000
  • 枠線:e92f3d
  • 枠線の幅:3
  • アイコン:チェック(v)

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

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

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

設定:ブロックタブ|コンテンツグループ
設定:ブロックタブ|コンテンツグループ|詳細

  • テキスト:『ドロップダウンメニューより選択』
  • 背景:『ドロップダウンメニューより選択』

枠線

  • 枠線(色):『ドロップダウンメニューより選択』
  • 枠線の幅:『0〜100』

サイス

  • パディング:『0〜7』縦・横・各辺個別

高度な設定

  • 追加 CSS クラス:『任意』

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

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

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

  • タブ1のコンテンツ『コンテンツグループ』の設定
  • テキスト:#ffffff
  • 背景:#ff9000
  • 枠線:e92f3d
  • 枠線の幅:3
  • パディング:デフォルト

コンテンツの設定

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

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

設定:ブロックタブ|コンテンツ
設定:ブロックタブ|コンテンツ|詳細

  • テキスト:『ドロップダウンメニューより選択』
  • 背景:『ドロップダウンメニューより選択』

枠線

  • 枠線(色):『ドロップダウンメニューより選択』
  • 枠線の幅:『0〜100』

高度な設定

  • 追加 CSS クラス:『任意』

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

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

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

  • タブ1のコンテンツ『コンテンツ』の設定
  • テキスト:#ffffff
  • 背景:#0693e3
  • 枠線:#ff9000
  • 枠線の幅:3

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

『WordPress管理>ダッシュボード>AFFINGER管理>Gutenberg 設定』をクリックします。

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

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

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

初心者でも安心 コスパ最強の洗練されたWordPressテーマ/

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

- 少しづつ増え続ける当サイトオリジナル特典付!-

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

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

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

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

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

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

WordPressテーマ

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

action-affinger6-ex-1a

AFFINGER

WordPressテーマ

シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ

SWELL

-Function AFFINGER
-

PAGE TOP