この記事がお勧めな方
- AFFINGER6でトップページのカスタマイズをしたい方
- AFFINGER6でタブ式カテゴリーの表示方法を知りたい方
下のようなタブ式カテゴリーを表示させる方法です。

タブ式カテゴリーを表示させる為の準備
タブ式カテゴリーを表示させるには「カテゴリー」を作成しておく必要があります。
まだ「カテゴリー」を作成していな方はまず「カテゴリー」を2つ程度作成しましょう。
※ タブ式カテゴリ一を表示させるにはカテゴリIDを2つ以上設定する必要があります。
カテゴリーの作成については別記事で説明していますのでそちらを参考にしてみてください。
関連記事:
-
-
AFFINGER6:カテゴリーの作成とカテゴリーページのカスタマイズ方法
2025/12/25 AFFINGER6
AFFINGER6でブログを運営していると、 カテゴリーページが見にくい カテゴリーページを自由に編集したい といった悩みにぶつかることがあります。 実は、カテゴリーページは「記事一覧ページ」ではなく ...
トップページにタブ式カテゴリーを表示させる方法
トップページにタブ式カテゴリーを表示させるのはとても簡単です。
まず「AFFINGER管理」→「トップページ」→「タブ式カテゴリ一覧」を選択します。

タブ式カテゴリ一覧の項目を設定して保存すれば「タブ式カテゴリー」を表示することができます。
タブ式カテゴリ一覧

| A:表示設定と表示させるカテゴリーの設定 |
| B:タブの背景色と文字色の設定 |
| C:タブデザインの設定 |
| D:表示記事数や表示順の設定 |
| E:最新記事一覧タブ名 |
A:表示設定と表示させるカテゴリーの設定
「タブ式カテゴリ一覧をフロントページに表示する」にチェックを入れます。
カテゴリー入力欄に表示させたいカテゴリIDを入力します。
カテゴリIDは「投稿」→「カテゴリ」で確認することができます。

B:タブの背景色と文字色の設定
タブの背景色と文字色の設定ができます。

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

C:タブデザインの設定
タブのデザインは5種類から選択できます。
- デフォルト
- 角丸にする
- スクエアにする
- ボーダーにする
- タブ(シンプル)にする
デフォルト
デフォルトの実際表示はこんな感じです。

角丸にする
角丸の実際表示はこんな感じです。

スクエアにする
スクエアの実際表示はこんな感じです。

デフォルトと変化がわかりませんでした。
ボーダーにする
ボーダーの実際表示はこんな感じです。

タブ(シンプル)にする
タブ(シンプル)の実際表示はこんな感じです。

D:表示記事数や表示順の設定
表示記事数や表示する順番の設定が可能です。
※「無限ループにする」はEX(上位版)限定の機能になります。
E:最新記事一覧タブ名
最新記事一覧のタブを設定できます。
設定するにはカテゴリAの入力欄を空欄にします。
最新記事一覧タブ名の入力欄に表示させたい文字列を入力します。
「NEW」や「最新記事」などと入力するのがいいと思います。

最新記事一覧タブを設定した実際表示はこんな感じです。

以上がトップページにタブ式カテゴリーを表示させる方法になります。
設定は「Save」ボタンをクリックして保存しないと反映されないので、忘れずに保存をしてください。
AFFINGER6の使い方
AFFINGER6の使い方については、このブログで詳しく解説しています。
-
-
AFFINGER6の使い方【まとめ】-初心者向けガイド-
2026/1/27 AFFINGER6
AFFINGER6の使い方に関するまとめ記事です。 記事数が多いので、知りたい内容を目次から探してみてください。 設定に関する使い方 インストールの方法 AFFINGER6を使えるようにするまでの手順 ...