AFFINGER6（アフィンガー６）タグブロックの使い方まとめ

この記事ではタブブロックの使い方を初心者向けに解説しています。

パパくま

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

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

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

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

タブを追加する方法

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

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

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

タブを削除する方法

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

タブブロック全体の編集

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

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

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

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

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

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

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

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

デフォルト

スクエア

ふきだし

タブ

ボーダー

デフォルト

スクエア

ふきだし

タブ

ボーダー

②：色の設定（全体）

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

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

タブブロック全体のテキスト色が変更できます。

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

タブブロック全体の背景色が変更できます。

③：枠線の設定（全体）

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

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

タブブロック全体の枠線の色と線幅が変更できます。

④：外観の設定（全体）

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

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

タブブロック全体の角丸が設定できます。

個別タブの編集

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

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

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

①：色設定（個別）

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

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

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

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

タブごとに背景色を変更することができます。

②：枠線設定（個別）

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

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

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

③：外観設定（個別）

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

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

外観でタブにアイコンを設定できます。

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

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

ブログの記事を書くのにAIライティングツールを利用すると効率を上げることができます。

ハムタ

AIなんて難しそう・・・

そう感じて活用しないのは勿体無いです。

気軽に使うのに無料お試しがお勧め♪

パパくま

現在は多くのAIライティングツールがあります。

そのほとんどが無料お試しでの利用が可能です。

お試し期間が限定のツールもありますが、中には機能制限はありますがずっと無料で利用できるツールもあります。

無料お試しがずっと可能なAIライティングツールをまとめてみたので、是非試してみてください。

\\ 無料お試し利用がずっと可能なAIライティングツール//

: 無料お試しがずっと可能なAIライティングツール

2024/10/12 ブログ作成, 初心者

「記事作成にAIを活用してみたいなぁ」「でも料金はかけたくないなぁ」そんな方に無料お試しがずっと可能なAIライティングツールをいくつか紹介します。もちろん無料お試しなので、機能をフルに使用するこ ...

AFFINGER6：記事一覧

: AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説

2024/11/28

AFFINGER６を使ってみたい！気になる！という方向けに AFFINGER６ってどんなテーマ？ AFFINGER６でどんなことができるの？ AFFINGER６を使うにはどうすればいいの？といった内 ...

: （通常版）AFFINGER6と（上位版）AFFINGER6 EXの違い【まとめ】

2024/11/28 AFFINGER6（アフィンガー６）

AFFINGER6を購入しようと検討している方や既に通常版のAFFINGER6を使用している方で、その違いが気になる方も多いと思います。そこで、この記事では（通常版）AFFINGER6と（上位版）A ...

: 『SWELL』ってどうなの？-実際に利用したメリットとデメリットをガチレビュー！

2024/11/28 SWELL（スウェル）

SWELLはとても人気の高いテーマです。この記事はSWELLが気になる方向けにメリットとデメリットを紹介しています。価格　１７，６００円（税込み）シンプル＆高機能なWordPressテーマ！最 ...

: AFFINGER6は初心者が購入しても大丈夫？-初心者にお勧めの理由

2024/11/28 AFFINGER6（アフィンガー６）

AFFINGER6を購入しようと思っている初心者の方は、解らないことが多いからこそ購入に対して不安を感じるかもしれません。この記事は、実際に知識ゼロからAFFINGER6を使用した私が断言できる内容 ...

AFFINGER6の購入とインストール方法

: 【知っておくべき！】AFFINGER6の購入方法と購入プランの選び方-⑤種類から最適を選択！

2024/12/4 AFFINGER6（アフィンガー６）

AFFINGER6を使ってみたい！という方にちょっと待ってください！ AFFINGER6を購入する際には複数のプランが存在しますので、自分の取り組み方に合った購入方法を選択した方がお得に購入できま ...

: AFFINGER6（アフィンガー6）のインストール方法-初心者でも安心！購入プランから徹底解説！

2024/10/18 AFFINGER6（アフィンガー６）

初心者でも大丈夫！ AFFINGER6の購入からインストールして使えるようにするまでの手順や注意点を詳しく解説しています。 AFFINGER6を使うまでの手順 AFFINGER6を利用する手順は次のよ ...

: AFFINGER６（アフィンガー６）EX版の購入とアップグレードの方法

2024/11/3 AFFINGER6（アフィンガー６）, AFFINGER６初期設定

この記事ではAFFINGER６の上位版である「AFFINGER６EX」へのアップグレード方法を解説しています。 AFFINGER６EX版にアップグレードする為の条件 AFFINGER６からEX版にアッ ...

AFFINGER6の設定関係

: AFFINGER6導入後にまず何をしたらいいの？-初心者にお勧めの初期設定４項目

2024/10/17 AFFINGER6（アフィンガー６）

「ブログで稼ぎたい！」って思いブログを始めた初心者の方も多いと思います。収益化するには何より記事を作成しなければ話になりません。この記事ではAFFINGER6を始めたばかりの初心者の方向けに、い ...

: AFFINGER6（アフィンガー６）にお勧めのプラグイン【初心者向け】

2024/7/18 AFFINGER6（アフィンガー６）, AFFINGER６初期設定

AFFINGER6にお勧めのプラグインを９つ紹介しています。初心者の方は何を導入すればいいのか解らないと思いますので、是非参考にしてみてください。プラグインとは？「プラグイン」とはワードプレスを ...

: AFFINGER６のアップデート方法（２パターンを解説）

2024/10/28 AFFINGER6（アフィンガー６）, AFFINGER６初期設定

この記事がお勧めな方 AFFINGER６のアップデート方法を知りたい方 AFFINGER６の手動でのアップデート方法が知りたい方 AFFINGER６で自動更新のお知らせを設定する方法を知りたい方 AF ...

: AFFINGER６（アフィンガー６）でGoogleアナリティクスを導入する方法

2024/7/18 AFFINGER6（アフィンガー６）, AFFINGER６初期設定

ここではAFFINGER6（アフィンガー６）でGoogleアナリティクスを導入する方法を初心者向けに解説しています。 AFFINGER6（アフィンガー６）では簡単にGoogleアナリティクスを導入して ...

: AFFINGER6：Googleサーチコンソールへの登録方法

2024/7/18 AFFINGER6（アフィンガー６）, AFFINGER６初期設定

Googleサーチコンソールではあなたのサイトが「どんなキーワードで表示されたのか」を確認することができたり、あなたのサイトのページが「どれくらいインデックスされているか」などを調べることができます。 ...

: AFFINGER6のステマ規制対策-広告表記を表示させる方法

2024/7/18 AFFINGER6（アフィンガー６）

この記事ではステマ規制対策としてAFFINGER6（アフィンガー6）で記事に「広告」表記を表示させる方法を解説しています。ステマ規制とは２０２３年１０月から開始された「ステルスマーケティング」に対す ...

AFFINGER6の使い方

: AFFINGER6の使い方【まとめ】-初心者向けガイド-

2024/11/5 AFFINGER6（アフィンガー６）, アフィンガー６の使い方

この記事はAFFINGER6（アフィンガー6）の使い方を初心者向けに詳しく解説しています。見出しの作成方法記事作成の基本！見出し作成や見出しについての記事です。カテゴリーの作成とカテゴリーページ ...

AFFINGER6のデザインカスタマイズ

: AFFINGER6のカスタマイズ方法-初心者向けガイド-

2024/11/21 AFFINGER6（アフィンガー６）, AFFINGER６デザインカスタマイズ

この記事ではAFFINGER6のカスタマイズ方法を初心者向けに詳しく解説しています。デザインカードプラグインでサイトデザインを変更する方法プラグインでサイトデザインを簡単に変更できるようになりまし ...