【AFFINGER6】カテゴリーのおしゃれな表示方法とカスタマイズ方法

本記事では、AFFINGER6でカテゴリーをカスタマイズする方法と、おしゃれに表示する方法を解説していきます。

AFFINGER6では、WordPressのデフォルトでできる範囲以上に、カテゴリーを自由に設定できるようになってるんです。

AFFINGER6の機能を使いこなせないと宝の持ち腐れです。うまく活用できてない人も多いと思うので、「これ使えそうだな」と思ったらぜひ取り入れてみてください。

早速見ていきましょう。

AFFINGER6でカテゴリページをカスタマイズする方法

AFFINGER6のカテゴリページでは、以下の内容をカスタマイズすることが可能です。

具体的なカスタマイズ項目について、順番に解説していきます。

説明

「説明」欄には、通常の投稿記事と同じ感覚で、カテゴリーページに文章や画像などのコンテンツを挿入できます。

基本的にはカテゴリーページの要約（どんなコンテンツが含まれているのか）を簡単に説明するので十分です。

ただしSEO的な観点からいうと、重要なカテゴリーページについては、記事と同じようにコンテンツを重視して書くのがおすすめです。

アイキャッチ画像を登録

「アイキャッチ画像を登録」の項目では、カテゴリーページのアイキャッチ画像を登録できます。

「アップロード」ボタンをクリックして、任意の画像を選択するだけです。「更新」ボタンを押すと、以下のようにアイキャッチ画像が登録されます。

この状態では、カテゴリーページのアイキャッチ画像は以下のように「タイトル上」に表示されます。

アイキャッチ画像をタイトル下に表示させるには、「タイトル下に表示」にチェックを入れればOK。

「タイトル下に表示」にチェックを入れた場合

さらに、「ワイド化する」にチェックを入れると、アイキャッチ画像が横幅いっぱいに表示されます。

「ワイド化する」にチェックを入れた場合

カテゴリーリンクのサムネイル画像を登録【EX限定機能】

カテゴリーリンクとは、内部リンク付きのブログのカテゴリーのことです。

AFFINGER6では、カテゴリーをリンク付きでサイドバーなどに一覧表示することが可能です。

カテゴリーをサイドバーに表示する方法

ウィジェット画面で「AFFINGERカテゴリー」のプルダウンボタンをクリックし、「サイドバーウィジェット」を選択して「ウィジェットを追加」ボタンをクリックします。

すると、以下のようにサイドバーウィジェット欄に「AFFINGERカテゴリー」が追加されます。

これで、サイドバーにカテゴリー一覧が表示されるようになります。

サイドバーに表示したカテゴリーリンク

カテゴリーリンクのサムネイル画像を登録する

カテゴリーリンクのサムネイル画像を登録しておくと、以下のようにカテゴリーリンクの横にサムネイル画像が表示させることができます。

カテゴリーリンクの横にサムネイル画像が表示させた場合

AFFINGER管理でカテゴリーリンクの設定を変更する

ちなみに、カテゴリーリンクの横にサムネイル画像を表示するには、AFFINGER管理画面で設定を変える必要があります。

AFFINGER管理のカテゴリーリンク設定画面で、カテゴリーリンクをカスタマイズすることができます。ここで「カテゴリーリンクにサムネイル画像を表示」にチェックを入れましょう。

categoryタイトルの書き替え

「categoryタイトルの書き替え」に任意のタイトルを入力すると、カテゴリー名はそのままの状態で、カテゴリーページのタイトルを変更することができます。

カテゴリーページのタイトルを書き替えた場合。あくまでカテゴリーページに移動したときのタイトルだけが変更される。

SEOの観点からいうと、タイトルの決め方はカテゴリーページでも重要です。基本的には記事のタイトルと同じ考え方でOK。

タイトルの決め方について詳しく知りたい人は、以下の記事を参考にどうぞ。

categoryのメタキーワード&メタディスクリプション

「categoryのメタキーワード」はカテゴリーのメタキーワード、「categoryのメタディスクリプション」はカテゴリーのメタディスクリプションとなります。

特に、メタディスクリプションはGoogleの検索結果でタイトル下に表示される文章なので、重要です。

メタディスクリプションの書き方については以下の記事解説しています。

背景色

カテゴリーページ内で「背景色」を変更すると、以下のようにカテゴリーリンクの背景色が変更できます。

「背景色」を変更した場合

投稿の一覧表示

「投稿の一覧表示」を「する」にチェックすると、カテゴリーページ内にそのカテゴリーの記事が一覧で表示されます。

カテゴリーページに投稿記事を一覧表示する場合

逆に「しない」にチェックすると、記事一覧が表示されなくなります。

基本的には表示しておくのがおすすめですが、カテゴリーページを自分で作り上げる場合は、あえて表示しない方法もありです。

なお、カテゴリー一覧に表示される記事の件数は、以下で設定可能です。

「表示設定」の「1ページに表示する最大投稿数」と連動しているので、これを任意の数字に変更しましょう。

カテゴリー記事一覧をカード型で表示する方法【EX版限定】

『AFFINGER6 EX版』限定でカテゴリー記事一覧をカード型で表示することができます。

カテゴリー記事一覧をカード型で表示する場合（EX版限定）

カード型で表示すると、サムネイル画像が大きく表示されることに加え、1ページあたりに表示される記事数が多くなります。なので、クリック率が上がることが期待できます。

個人的にはAFFINGER EX版の一押し機能です。

SNSボタンの表示

「SNSボタンの表示」を「する」にチェックすると、以下のようにカテゴリーページの下部にSNSボタンが表示されます。

SNSボタンを表示する場合

1カラム【EX限定機能】

「1カラム」を「する」にチェックすると、カテゴリーページが1カラム表示に変更されます。

1カラム表示になると具体的にどうなるの？

サイドバーを表示しているサイトは、サイドバーが表示されなくなり、カテゴリーページだけが表示されるようになります。

1カラムにしない場合

1カラムにする場合

他のコンテンツに目が行かないようにしたい（カテゴリーページに集中してほしい）場合におすすめです。

noindexにする【EX限定機能】

「noindexにする」にチェックを入れると、該当のカテゴリーページがnoindexとなります。

カテゴリーページの品質が低い場合は、SEOに悪影響になる可能性があるので、noindexにしておくのがおすすめです。

ただし、noindexにするのが必ずしも正解なわけではありません。どこまでの品質ならnoindexにすべきなのか、これといった線引きがあるわけではないので、あくまで参考程度に考えておきましょう。

ちなみに個別にnoindexにするのではなく、カテゴリーページを一括でnoindex設定にするには、以下の手順で行います。

AFFINGER管理の「SEO」タブで、「カテゴリーをindexしない」にチェックを入れるだけでOK。

【AFFINGER6】タブ式カテゴリー一覧の設定方法

これまでAFFINGER6でカテゴリーをカスタマイズする方法を解説してきましたが、これだけではありません。

AFFINGER6では、カテゴリーに関する目玉機能が一つあります。それが、「タブ式カテゴリー一覧」です。

タブ式カテゴリーの例

こんな感じで、カテゴリー一覧をタブごとに切り替える機能のことを、タブ式カテゴリー一覧といいます。タブ式カテゴリーがあれば記事を探しやすくなるので、ユーザー満足度を上げるポイントにもなります。

AFFINGER6なら、おしゃれかつ簡単に設定できるので、めちゃめちゃ便利です。

上記の順番で進むと、以下のようなタブ式カテゴリー一覧の設定画面が出てきます。

順番に設定方法を解説していきます。

表示するカテゴリーを設定する

まずは、「タブ式カテゴリー記事一覧をフロントページに表示する」にチェックを入れましょう。これをやらないと、タブ式カテゴリー記事一覧は表示されません。

その下に「カテゴリーA（ID）」「カテゴリーB（ID）」「カテゴリーC（ID）」「カテゴリーD（ID）」と、4つのカテゴリー枠があります。

ここに、タブ式カテゴリー記事一覧に表示したいカテゴリーIDを入力しましょう。

4つすべて入力する必要はありません。2つ以上であれば、タブを切り替えられる構造になります。

これで、以下のようにタブ式カテゴリー記事一覧が表示されます。

でも、これだけだとなんだか味気ないですよね。なので、次の項目で色やデザインを設定していきましょう。

タブの色を設定する

「タブA（背景色）」「タブB（背景色）」「タブC（背景色）」「タブD（背景色）」に、好きな背景色を設定しましょう。

「タブ文字色」は、すべてのタブ共通の文字色になります。

上記の設定の場合は、以下のようなタブの色に変わります。

色を設定するだけでグッとあか抜けますね。

タブのデザインを設定する

色だけでなく、タブのデザインも変更することができます。

上記のとおり、「デフォルト」「角丸にする」「スクエアにする」「ボーダーにする」「タブ（シンプル）にする」の5種類のタブデザインがあります。

それぞれのデザインは以下のとおり。

「デフォルト」のタブデザイン

「角丸」のタブデザイン

「スクエア」のタブデザイン

「ボーダー」のタブデザイン

「タブ（シンプル）」のタブデザイン

上記のとおり。好みで選んでみてください。

タブ式カテゴリー記事一覧の表示方法を設定する

以下の項目では、タブ式カテゴリー記事一覧の表示方法を設定できます。

タブ式カテゴリー記事一覧を「無限ループにする」に設定した場合。「もっと読む（ReadMore）」ボタンが表示されます。

タブ式カテゴリー記事一覧をカード型で表示する方法

ちなみに、『AFFINGER6 EX版』限定で、記事一覧の表示方法をカード型にすることも可能です。

ここで、「記事一覧をカードデザインにする」にチェックするだけでOK。

デフォルトでは「3,3,2」と記載されていますが、この場合は「パソコンとタブレットは3列、スマホは2列」で記事が表示されるってことです。

設定できたら以下のとおりになります。

タブ式カテゴリー記事一覧をカード型で表示する場合（EX版限定）

サムネイル画像が大きく表示されるので、クリック率が上がってくれそうな予感がします。

まとめ：AFFINGER6なら自由にカテゴリーをカスタマイズできる！

というわけで、以上です。

AFFINGER6ではカテゴリーページを自由にカスタマイズすることができます。本記事でご紹介したテクを使えば、SEO対策にもなるはずです。

さらに、タブ式カテゴリー記事一覧はAFFINGER6の一押し機能の一つ。AFFINGER6を使っている人は、ぜひ導入してみてください。

ではまた。