AFFINGER6：トップページにタブ式カテゴリーを表示させる方法

下のようなタブ式カテゴリーを表示させる方法です。

タブ式カテゴリーを表示させる為の準備

タブ式カテゴリーを表示させるには「カテゴリー」を作成しておく必要があります。

まだ「カテゴリー」を作成していな方はまず「カテゴリー」を２つ程度作成しましょう。

※　タブ式カテゴリ一を表示させるにはカテゴリIDを２つ以上設定する必要があります。

カテゴリーの作成については別記事で説明していますのでそちらを参考にしてみてください。

AFFINGER６：カテゴリーの作成とカテゴリーページのカスタマイズ方法

この記事がお勧めな方 AFFINGER６のカテゴリーの作成方法を知りたい方 AFFINGER６のカテゴリーページのカスタマイズについて知りたい方 カテゴリーの作成方法 カテゴリーは簡単に言えば「記事の ...

トップページにタブ式カテゴリーを表示させる方法

トップページにタブ式カテゴリーを表示させるのはとても簡単です。

まず「AFFINGER管理」→「トップページ」→「タブ式カテゴリ一覧」を選択します。

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

タブ式カテゴリ一覧

A：表示設定と表示させるカテゴリーの設定

B：タブの背景色と文字色の設定

C：タブデザインの設定

D：表示記事数や表示順の設定

E：最新記事一覧タブ名

A：表示設定と表示させるカテゴリーの設定

「タブ式カテゴリ一覧をフロントページに表示する」にチェックを入れます。

カテゴリー入力欄に表示させたいカテゴリIDを入力します。

カテゴリIDは「投稿」→「カテゴリ」で確認することができます。

B：タブの背景色と文字色の設定

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

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

C：タブデザインの設定

タブのデザインは５種類から選択できます。

• デフォルト
• 角丸にする
• スクエアにする
• ボーダーにする
• タブ（シンプル）にする

デフォルト

デフォルトの実際表示はこんな感じです。

角丸にする

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

スクエアにする

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

デフォルトと変化がわかりませんでした。

ボーダーにする

ボーダーの実際表示はこんな感じです。

タブ（シンプル）にする

タブ（シンプル）の実際表示はこんな感じです。

D：表示記事数や表示順の設定

表示記事数や表示する順番の設定が可能です。

※「無限ループにする」はEX（上位版）限定の機能になります。

E：最新記事一覧タブ名

最新記事一覧のタブを設定できます。

設定するにはカテゴリAの入力欄を空欄にします。

最新記事一覧タブ名の入力欄に表示させたい文字列を入力します。

「NEW」や「最新記事」などと入力するのがいいと思います。

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

以上がトップページにタブ式カテゴリーを表示させる方法になります。

設定は「Save」ボタンをクリックして保存しないと反映されないので、忘れずに保存をしてください。

AFFINGER6の使い方

AFFINGER6の使い方については、このブログで詳しく解説しています。

AFFINGER6：関連記事