![記事一覧はカテゴリがごちゃまぜ。](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/itiran_demerit-738x388.jpg)
![「タブ式カテゴリ一覧」機能を使うとカテゴリごとにまとめて表示できる。](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_merit-738x388.jpg)
今回はAFFINGER6(アフィンガー6)の「タブ式カテゴリ一覧」という機能をご紹介します!
記事一覧っていろんなカテゴリの記事が混ざって並んでますよね。カテゴリごとに記事をまとめたいと思ったことはありませんか?そんなときに便利なのがタブ式カテゴリ一覧です。この機能を使えば記事をカテゴリごとにまとめてくれます(記事一覧とは別です)。
「タブ式カテゴリ一覧」とは?
![AFFINGER6(アフィンガー6)「タブ式カテゴリ一覧」機能のデモ](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category.gif)
タブ式カテゴリ一覧とはトップページ専用の機能です。カテゴリごとに記事一覧を並べることができます。クリック(タップ)でタブを切り替えると別のカテゴリが表示されます。表示できるカテゴリは最大4つまでです。
ACTION ver20210719アップデートより、「もっと見る」というカテゴリへのリンクボタンが追加されました。
![ACTION ver20210719より「もっと見る」ボタンが追加されました。](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_more_read-738x180.jpg)
「タブ式カテゴリ一覧」の設置手順
タブ式カテゴリ一覧を設置する手順をご紹介します。
タブ式カテゴリ一覧を設置する場所はAFFINGER管理のトップページ欄です。まずはこちらに移動しましょう。
![AFFINGER6(アフィンガー6)「タブ式カテゴリ一覧」の設定画面](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_setting01-738x601.jpg)
「タブ式カテゴリ一覧」の表示をオンにする
![「タブ式カテゴリ一覧」の表示をオンにする。](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_setting02-738x141.jpg)
まずはタブ式カテゴリ一覧の表示をオンにしましょう。タブ式 カテゴリ一覧をフロントページに表示するにチェックを入れます。
下の項目をいくら入力してもここをオンにしないとタブ式カテゴリ一覧は表示されないので注意です!
表示するカテゴリを入力する
カテゴリの表示方法を決めていきます。
表示するカテゴリを決める
まずはどのカテゴリを表示するか決めます。カテゴリ設定画面を開いてください。
![表示したいカテゴリのIDを最大4つまでピックアップ。](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_pickup-738x402.jpg)
表示したいカテゴリをピックアップしましょう。表示できるカテゴリは最大4つまでです。表示するカテゴリを決めたらそのカテゴリのIDをメモしておきます。
カテゴリIDを入力する
![先ほど確認したカテゴリIDを入力する。](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_id_input-738x98.jpg)
タブ式カテゴリ一覧の設定画面に戻ります。カテゴリA、カテゴリB、カテゴリC、カテゴリDとさきほどメモしたIDを入力してください。最低2つ入力する必要があります。
入力するのは「半角数字」です。
ちなみに、999999と入力するとカテゴリ関係なく最新記事の一覧が表示されます。(「もっと見る」ボタンは表示されません。)
![IDを「999999」と入力すると最新記事が表示される。](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_newpost-738x1025.jpg)
タブ名は最新記事一覧タブ名で変更することができます(デフォルトは「最新記事」)。
![「最新記事」の名前は変更可能。](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/new_post_tab_name_change-1-738x136.jpg)
表示される記事数を調節
![表示される記事数を調節](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_post_number.jpg)
タブに表示する記事数を決めます。表示記事数で調節してください。デフォルトは5です。↓は「5」と「7」にした時の例。
![表示記事数を変更した例](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_number_change-738x686.jpg)
記事の並び順を調節
![記事の並び順を調節する](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_sort.jpg)
今度は記事の並べ方を決めます。並べる基準と並べ方を選んでください。
- ID順
- 投稿日順
- 更新日順
- ランダム
- 昇順(DESC)…新しい記事が上、古い記事が下
- 降順(ASC)…古い記事が上、新しい記事が下
![昇順(DESC)の並び方の例](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tac_category_desc.jpg)
![降順(ASC)の並び方の例](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_asc.jpg)
タブのデザインを設定する
![タブのデザインを設定する](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_design_setting-738x257.jpg)
仕上げにデザインを設定していきます。
タブの背景色と文字色を設定する
![タブの文字色と背景色を設定する。](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_color_setting-738x173.jpg)
タブのカラーを設定します。背景色と文字色をそれぞれ設定しましょう。カラーコードを入力していきます。
配色は以下のサイトが参考になると思います。お好みのトーンから色を探してください。
配色の参考
タブのスタイルを設定する
![タブのスタイルを設定する。](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_design_change-738x88.jpg)
スタイル(デザイン)を変更できます。次の3つから好きなものを選んでください。
デフォルト
![タブのスタイル(デフォルト)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_default-738x169.jpg)
角丸にする
![タブのスタイル(角丸にする)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_kadomaru-738x169.jpg)
ボーダーにする
![タブのスタイル(ボーダーにする)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/07/tab_category_border-738x169.jpg)
以上、タブ式カテゴリ一覧について説明しました!
公式マニュアル
タブ式カテゴリ一覧(トップページ)機能※AFFINGERの購入者のみ閲覧可能