【AFFINGER6】タブ式カテゴリーの作成とカスタマイズについて

AFFINGER6のタブ式カテゴリ一覧を表示するにはどうしたらいいのかな？？

AFFINGERを使用している方には、定番になりつつあるタブ式のカテゴリー表示について今回は解説してきます。

ワードプレステーマAFFINGERを導入している方は、管理画面から簡単に設定ができ、読者のユーザーの方にも見やすいトップページが作れることからおすすめの機能になっています。

ぜひ今回の記事を参考にして、作成してみてください。

本記事の内容

タブ式カテゴリー表示方法

タブ式カテゴリーのカスタマイズ方法

この記事を書いた人

＼当ブログ使用テーマ／

誰でも簡単オシャレなデザイン！
インフォトップ月間総合第１位！
SEO対策と収益UPを標準で搭載！

有名ブロガーに愛用されているSEO最強WordPressテーマ。本ブログも使用中のカスタマイズ性が抜群のテーマです！

AFFINGER6の購入はこちら

AFFINGER6のタブ式カテゴリーとは？

まずは、AFFINGER6のタブ式カテゴリー表示の切り替えについての説明です。

この機能を使うことで、タブの切り替えにてで各ジャンルやカテゴリーに分けて、投稿記事を表示することができ、AFFNGERユーザーに人気の機能になっています。

実際のタブ式カテゴリー表示はこちら

この機能は、本ブログでも使用していますので、ブログのトップページにて確認していただけます。

簡単に設定できて、見た目もかなり本格的なブログが作れます！

AFFINGER6のタブ式カテゴリーの表示方法

それでは、タブ式カテゴリーの機能の使い方についての解説をしていきます。

以下のステップで作業完了です

設定画面に移動、トップページ表示の設定を行う
表示するカテゴリIDの設定
タブの色の設定
その他の各種設定（基本的にデフォルトでOK）

step
1設定画面に移動

WordPress管理画面より「AFFINGER管理」→「トップページ」→「タブ式カテゴリ一覧」に移動しましょう。

step
2トップページ設定をする

トップページに表示する設定を行います。以下の赤枠にチェックを入れて、サイトのトップページにタブ式カテゴリーが表示されるようにしましょう。

step
3表示するカテゴリIDの設定

続いて、「投稿」→「カテゴリー」より表示したい記事カテゴリーの値を確認し、カテゴリA〜カテゴリDまでの４つの項目に入力しましょう。

step
4タブの色の設定

タブの配色の設定を行います。それぞれのカテゴリにお好みの色を設定しましょう。

step
5その他の各種設定（基本的にデフォルトでOK）

最後は、各種設定を行います。タブの形や記事の表示設定、タブ名の設定を行います。

すべての設定が完了したら、「Save」にて設定の保存、トップページに移動して設定が反映されているか確認してみましょう！

投稿記事にタブの切り替え表示を行いたい場合

GOOD

最後に、トップページ以外で投稿記事などにもタブ式の機能を使うことが可能です。

作業のビフォーとアフターをタブ機能を使うことで、わかりやすいコンテンツになるかと思います。

実際にタブ機能を使ったものがこちら

タブ1
タブ2

タブ1のコンテンツはこちら

タブ2のコンテンツはこちら

設定手順は簡単で、ワードプレスの投稿画面にて、「タグ」→「レイアウト」→「タブ（切り替えボタン）」を選択してください。

切り替え表示するタブの数も選んだら、設定完了です。

 タブ機能ショートコード
[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab webicon="" text="タブ1の表示テキスト" bgcolor="タブ1の背景色" bordercolor="タブ1のボーダー色" color="タブ1の文字色" fontweight="" checked="checked"]
[st-input-tab webicon="" text="タブ2の表示テキスト" bgcolor="タブ2の背景色" bordercolor="タブ2のボーダー色" color="タブ2の文字色" fontweight="" checked=""]
[st-tab-main bgcolor="" bordercolor=""]
タブ1のコンテンツが入ります
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
タブ2のコンテンツが入ります
[/st-tab-main]
[/st-tab-content]

設定項目もわかりやすいので、ぜひ活用してみてください！

まとめ：AFFINGER6のタブ式カテゴリ一覧は使い勝手がいいのでオススメです！

以上、AFFINGER6のタブ式カテゴリ一覧の設定方法でした！

ボタンの配色やカスタマイズの簡単に行えて、おしゃれなコンテンツを作ることができました。

自分のサイトの配色テーマを確認しながら、タブの色のパターンも考えてみるとよりいい感じのものが作れると思いますを見つけて設定してみてください！

今回の作業は以上です、お疲れさまでした！

参考トップページのカスタマイズに関する記事かこちら

参考アップデートやインストール・プラグインに関する記事はこちら

参考投稿記事のカスタマイズも関する記事はこちら

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら