【AFFINGER6（アフィンガー６）】タブ式カテゴリ一覧の作成方法

こんにちは、めらです。

タブ式カテゴリ一覧を設置していると、ジャンルごとに記事を確認できて、便利ですよね。
でも、タブ式カテゴリ一覧の作成方法がわからなくて、困った経験はありませんか？

わからない人

タブ式カテゴリ一覧の作成方法を知りたい•••

この記事では、現在AFFINGER6を使用している私が、アフィンガー６でのタブ式カテゴリ一覧の作成方法を詳しくご紹介します。

⬇︎今回作成するタブ式カテゴリ一覧はこんな感じ⬇︎

それでは、いきましょう！

⬇︎AFFINGER6を購入検討されている方は、以下の徹底レビュー記事をご覧ください⬇︎

気になった方は、購入ボタンをクリックしてみてください。

タブ式カテゴリ一覧を設定する必要性

タブ式カテゴリ一覧を作成する前に、「なぜタブ式カテゴリ一覧が必要なのか」をきちんと理解しておく必要があります。

結論、カテゴリごとに記事を見やすくするためです。

タブ式カテゴリ一覧では、カテゴリごとの新着記事を簡単に確認することができます。

わからない人

普通のカテゴリではいけないの？

もちろん、普通のカテゴリでも大丈夫です。

しかし、タブ式カテゴリではタブをクリックするだけで、ページの読み込みをすることなく記事を確認できます。

それに、色別でカテゴリ分けすることができるので、視覚的にわかりやすいです。

これにより、普通のカテゴリと差別化を図っています。

正直、タブ式カテゴリは設定しなくてもいい項目ですが、設定することで読者がサイトを使いやすくなります。

AFFINGER6（アフィンガー６）でのタブ式カテゴリ一覧の作成方法

それでは、本題に進みます！

アフィンガー６でのタブ式カテゴリ一覧の作成方法は、以下の通りです。

１つずつ見ていきましょう！

この記事はすでに記事が複数投稿されていて、カテゴリ分けされている前提で解説しています。
カテゴリの設定をまだされてない方は、以下の記事を参考にしてください。

カテゴリIDの確認

はじめに、タブ式カテゴリに表示させるカテゴリIDを確認します。

「投稿」→「カテゴリ」

記事IDと同様にカテゴリにもIDが割り振られています。

そのIDを使うのでメモしてください。

カテゴリIDの入力

次に、カテゴリIDを入力していきます。

「AFFINGER管理」→「トップページ」→「タブ式カテゴリ一覧」→「タブ式カテゴリ一覧をフロントページに表示する」→「ID入力」

「タブ式カテゴリ一覧をフロントページに表示する」にチェックを入れた後に、カテゴリIDを入力していきます。

ID入力後は「save」で保存を忘れないようにしましょう。

設定はこれだけです。お疲れ様でした！

めら

【補足】記事内で使う場合

上記で紹介した内容は、トップページにタブ式カテゴリ一覧を表示する方法です。

記事内で使う場合は、以下の手順で行ってください。

「クラシック」→「タグ」→「レイアウト」→「タグ（切り替えボタン）」

すると、以下のコードが表示されます。

それぞれの説明は、以下の通りです。

お好みで変更しましょう。

めら

AFFINGER6（アフィンガー６）でのタブ式カテゴリ一覧のカスタマイズ方法

「普通のランキングでは満足できない！」って思う方もいらっしゃいますよね。

そこで、カスタマイズ方法もご紹介します。

ランキングのカスタマイズできるところは、以下の通りです。

１つずつ見ていきましょう。

色の変更

はじめに、色の変更です。

「AFFINGER管理」→「トップページ」→「タブ式カテゴリ一覧」→「色の変更」

お好みで変更しましょう。

めら

見た目の変更

次に、見た目の変更です。

見た目の変更は、３パターンあります。

デフォルトの場合

「AFFINGER管理」→「トップページ」→「タブ式カテゴリ一覧」→「デフォルト」

「デフォルト」にチェックするだけです。

デフォルトの場合、角があります。

そのためキチッとした印象です。

角丸の場合

「AFFINGER管理」→「トップページ」→「タブ式カテゴリ一覧」→「角丸にする」

「角丸にする」にチェックするだけです。

角丸の場合、角がありません。

そのため角が丸くなり、柔らかい印象です。

ボーダーの場合

「AFFINGER管理」→「トップページ」→「タブ式カテゴリ一覧」→「ボーダーにする」

「ボーダーにする」にチェックするだけです。

ボーダーの場合、背景色は無く、下線の色のみでの表示になります。

そのため、スマートな印象です。

お好みで変更しましょう。

めら

その他

最後に、各項目について説明します。

よくわからない場合は、真似をしていただいて結構です。

まとめ：AFFINGER6（アフィンガー６）でタブ式カテゴリを設定しよう

今回は、「アフィンガー６でのタブ式カテゴリ一覧の作成方法」を解説しました。

タブ式カテゴリ一覧の作成はとても簡単です。

タブ式カテゴリ一覧は、色別でカテゴリ分けされているので視覚的にわかりやすいメリットがあります。

読者が快適にサイトを過ごせるように、設定しておきましょう。

最後まで読んでいただき、ありがとうございました。

まだAFFINGER6を購入されてない方は、以下の徹底レビュー記事をご覧ください。