AFFINGER6 カスタマイズ【タブ式カテゴリー記事一覧をトップページに設置する方法！】

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6の「タブ式カテゴリー記事一覧をトップページに設置する方法」を初心者さん向けに解説します。

タブ式カテゴリー記事一覧とは？

タブ式カテゴリー記事一覧とは、トップページ専用のカスタマイズ機能です。最高4つのタブにカテゴリーごとの記事一覧をまとめることができます。タブを切り替えると 各カテゴリーの記事一覧が表示されます。

コンテンツの領域を節約でき、多くの記事を表示できるようにます。

当サイトのトップページでも採用しています。

こんな感じです。

タブ式カテゴリー記事一覧の設置手順

この章では、タブ式カテゴリー記事一覧の設置手順をご紹介します。

『AFFINGER 管理』画面での作業になります。

まず、AFFINGER 管理画面を開きます。

AFFINGER 管理画面が表示されます。

左側のタブメニューから『トップページ』タブをクリックします。

「トップページの設定」の画面が表示されます。

1. 右上の『タブ式カテゴリー記事一覧』をクリックします。（自動スクロール）
2. 下側にスクロールします。（手動スクロール）

❶または❷どちらかで詳細設定箇所に移動します。

「タブ式カテゴリー記事一覧」以下の画面が表示されたら、詳細設定を始めます。

タブ式カテゴリー記事一覧の詳細設定

前章でご紹介した設定箇所をクローズアップして各項目の詳細をご紹介します。

タブ式カテゴリー記事一覧の詳細設定：以下の画面です。

それでは、詳細設定を順番にしていきましょう。

タブ式カテゴリー記事一覧をフロントページに表示する

タブ式 カテゴリー記事一覧をフロントページに表示するにチェックを入れます。
_{※ チェックの『ON/OFF』で簡単に表示非表示が選択できます。}

表示するカテゴリーを入力する

前述しましたが、タブ式カテゴリー記事一覧は最大4個のタブが表示できます。

カテゴリー「A B C D」に表示させていカテゴリーの『ID』を入力します。
^{_{※ 最新記事一覧の設定は STEP08 をご覧ください。}}

表示するタブの背景色を設定する

タブ「A B C D」の背景色は個別に設定できます。文字色は1種類で共通です。

背景色の選択にご活用ください。

タブのスタイルを設定する

タブのスタイルは『デフォルト/角丸/スクエア/ボーダー/タブ（シンプル）』から選択できます。

表示記事数を入力する

タブことに表示する記事の数を入力します。

表示記事の並び順と除外設定をする

表示する順序と条件を選択します。

無限ループにする

無限ループにする：表示記事の下に『もっと見る＞』ボタンが表示され クリックで記事（次ページ）が追加表示されます。

最新記事一覧の設定とタブ名を入力する

カテゴリーA B C D（ID）入力欄いずれかを『無記入』または『999999』と入力すると、最新記事一覧が表示できます。
カテゴリーの名前が表示されるタブの領域（最新記事一覧タブ名）に『任意の名称』がつけられます。

忘れずに！設定が完了したら最後に『Save』する

設定が全て完了したら最後に『Save』しましょう。

まとめ！AFFINGER6 カスタマイズ【タブ式カテゴリー記事一覧をトップページに設置する方法！】

トップページを機能的にかつスッキリさせるカスタマイズ：タブ式カテゴリー記事一覧をトップページに設置する方法をご紹介しました。AFFINGER６の標準機能なので、時間をかけずに簡単にカスタマイズできます。

「トップページをチャチャっとカスタマイズしたい！」という方におすすめです！是非、試してみてかださい。^^;

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／