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

2022年4月8日

 

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

 

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

 

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

 

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

 

本記事の内容

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

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

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

 

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

 

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

 

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

 

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

 

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

 

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

 

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

作業

 

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

 

 

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

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

 

step
1
設定画面に移動

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

 

 

 

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

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

 

 

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

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

 

 

step
4
タブの色の設定

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

 

 

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

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

 

 

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

 

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

GOOD

 

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

 

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

 

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




タブ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のタブ式カテゴリ一覧の設定方法でした!

 

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

 

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

 

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

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER
-,