トップページのカスタマイズとして、AFFINGER7では「タブ式カテゴリー記事一覧」の機能があります。
タブをクリックするだけで表示するカテゴリーを切り替えられるため、訪問者が目的の記事を見つけやすくなります。
また、トップページのデザイン性も向上し、サイト全体が整理された印象になるため、多くのAFFINGERユーザーが活用している便利な機能です。
この記事では、AFFINGER7でタブ式カテゴリー記事一覧を表示する方法を、画像付きで初心者にもわかりやすく解説していきます。
※ この記事はAFFINGER6時代に作成した内容をAFFINGER7対応版として更新しています。
タブ式カテゴリー記事一覧とは？
タブ式カテゴリー記事一覧とは、カテゴリーごとに記事一覧を切り替えて表示できる機能です。
下のようなタブ式カテゴリーを表示させる機能です。
通常の記事一覧では、すべての記事が時系列で表示されます。
一方、タブ式カテゴリー記事一覧なら、ユーザーが見たいカテゴリーだけをすぐ表示できるため、目的の記事へたどり着きやすくなります。
タブ式カテゴリー記事一覧を使うメリット
AFFINGER7でタブ式カテゴリー記事一覧を設置するメリットは次の5つです。
カテゴリーごとに記事を探しやすい
訪問者は興味のあるカテゴリーだけを表示できるため、記事を探す時間が短縮されます。
ユーザー体験の向上にもつながります。
トップページがすっきり見える
カテゴリー別に整理されるため、トップページが見やすくなります。
記事数が増えてもごちゃごちゃした印象になりません。
回遊率アップが期待できる
興味のあるカテゴリーの記事を連続して読んでもらいやすくなるため、
- PV数アップ
- 滞在時間アップ
にもつながります。
人気カテゴリーをアピールできる
タブの並び順は自由に設定できます。
読んでほしいカテゴリーを左側に配置することで、クリック率アップが期待できます。
デザイン性が高くなる
タブがあるだけでサイト全体がおしゃれな印象になります。
企業サイトやアフィリエイトサイトでもよく使われているレイアウトです。
タブ式カテゴリーを表示させる為の準備
タブ式カテゴリーを表示させるには「カテゴリー」を作成しておく必要があります。
まだ「カテゴリー」を作成していな方はまず「カテゴリー」を２つ程度作成しましょう。
※ タブ式カテゴリ一を表示させるにはカテゴリIDを２つ以上設定する必要があります。
カテゴリーの作成方法についてはこちらの記事をご覧になってください。
トップページにタブ式カテゴリーを表示させる方法
トップページにタブ式カテゴリーを表示させるのはとても簡単です。
まず「AFFINGER管理」→「トップページ」→「タブ式カテゴリ一覧」を選択します。
タブ式カテゴリ一覧の項目を設定して保存すれば「タブ式カテゴリー」を表示することができます。
タブ式カテゴリ一覧
| A：表示設定と表示させるカテゴリーの設定 |
| B：タブの背景色と文字色の設定 |
| C：タブデザインの設定 |
| D：表示記事数や表示順の設定 |
| E：最新記事一覧タブ名 |
A：表示設定と表示させるカテゴリーの設定
「タブ式カテゴリ一覧をフロントページに表示する」にチェックを入れます。
カテゴリー入力欄に表示させたいカテゴリIDを入力します。
カテゴリIDは「投稿」→「カテゴリ」で確認することができます。
B：タブの背景色と文字色の設定
タブの背景色と文字色の設定ができます。
タブの背景色を変更するとこんな感じです。
C：タブデザインの設定
タブのデザインは５種類から選択できます。
- デフォルト
- 角丸にする
- スクエアにする
- ボーダーにする
- タブ（シンプル）にする
デフォルト
デフォルトの実際表示はこんな感じです。
角丸にする
角丸の実際表示はこんな感じです。
スクエアにする
スクエアの実際表示はこんな感じです。
デフォルトと変化がわかりませんでした。
ボーダーにする
ボーダーの実際表示はこんな感じです。
タブ（シンプル）にする
タブ（シンプル）の実際表示はこんな感じです。
D：表示記事数や表示順の設定
表示記事数や表示する順番の設定が可能です。
※「無限ループにする」はEX（上位版）限定の機能になります。
E：最新記事一覧タブ名
最新記事一覧のタブを設定できます。
設定するにはカテゴリAの入力欄を空欄にします。
最新記事一覧タブ名の入力欄に表示させたい文字列を入力します。
「NEW」や「最新記事」などと入力するのがいいと思います。
最新記事一覧タブを設定した実際表示はこんな感じです。
以上がトップページにタブ式カテゴリーを表示させる方法になります。
設定は「Save」ボタンをクリックして保存しないと反映されないので、忘れずに保存をしてください。
まとめ
AFFINGER7のタブ式カテゴリー記事一覧を利用すると、カテゴリーごとに記事を切り替えて表示できるため、トップページが見やすくなり、読者が目的の記事を探しやすくなります。
特に記事数が増えてきたブログでは、タブ式カテゴリー記事一覧を活用することでサイト全体の使いやすさが大きく向上します。
ぜひ本記事を参考に設定してみてください。
\\ 収益化に強い圧倒的人気テーマ！//
AFFINGER7がついにリリース！
AFFINGER6から更に機能がパワーアップ！
※ AFFINGER6は現在、AFFINGER7へと移行となりました。