広告

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

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

この記事がお勧めな方

  • AFFINGER6(アフィンガー6)でトップページのカスタマイズをしたい方
  • AFFINGER6(アフィンガー6)でタブ式カテゴリーの表示方法を知りたい方

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

AFFINGER6:タブ式カテゴリ一覧

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

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

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

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

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

こちらの記事もチェック!

AFFINGER6:カテゴリーの作成とカテゴリーページのカスタマイズ方法

この記事がお勧めな方 AFFINGER6(アフィンガー6)のカテゴリーの作成方法を知りたい方 AFFINGER6(アフィンガー6)のカテゴリーページのカスタマイズについて知りたい方 カテゴリーの作成方 ...

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

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

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

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

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

タブ式カテゴリ一覧

AFFINGER6:タブ式カテゴリ一覧
A:表示設定と表示させるカテゴリーの設定
B:タブの背景色と文字色の設定
C:タブデザインの設定
D:表示記事数や表示順の設定
E:最新記事一覧タブ名

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

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

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

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

カテゴリID表示

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

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

タブ式カテゴリ一覧の背景色設定

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

タブ式カテゴリ一覧で背景色を設定した実際表示

C:タブデザインの設定

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

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

デフォルト

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

タブ式カテゴリ一覧のタブデザイン:デフォルト

角丸にする

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

タブ式カテゴリ一覧のタブデザイン:角丸

スクエアにする

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

タブ式カテゴリ一覧のタブデザイン:スクエア

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

ボーダーにする

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

タブ式カテゴリ一覧のタブデザイン:ボーダー

タブ(シンプル)にする

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

タブ式カテゴリ一覧のタブデザイン:タブ(シンプル)

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

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

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

E:最新記事一覧タブ名

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

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

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

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

タブ式カテゴリ一覧:最新記事一覧タブの設定

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

タブ式カテゴリ一覧:最新記事一覧タブの実際表示

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

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

AFFINGER6(アフィンガー6)は初心者にお勧めするWordPress有料テーマの1つです。

AFFINGER6(アフィンガー6)について詳しく知りたい方はこちらの記事をご覧になってください。

AFFINGER6(アフィンガー6)の価格・特徴・使い方まとめ
AFFINGER6の始め方-初心者向けスタートアップガイド

2024/5/14  

AFFINGER6を使ってみたい!気になる!という方向けに AFFINGER6ってどんなテーマ? AFFINGER6でどんなことができるの? AFFINGER6を使うにはどうすればいいの? といった内 ...

AFFINGER6(アフィンガー6)のインストール方法【画像付き!詳細解説】
AFFINGER6(アフィンガー6)のインストール方法【画像付き!詳細解説】

「AFFINGER6(アフィンガー6)」を利用できるようにするまでの流れ 「AFFINGER6(アフィンガー6)」の利用までの流れは次のようになっています。 AFFINGER6(アフィンガー6)の購入 ...

ブログの記事を書くのにAIライティングツールを利用すると効率を上げることが可能です。

無料お試し利用がずっとできるAIライティングツールをいくつか紹介していますので、試しに利用してみてください。

無料お試しがずっと可能なAI記事作成ツール
無料お試しがずっと可能なAIライティングツール

2024/3/26    ,

「記事作成にAIを活用してみたいなぁ」 「でも料金はかけたくないなぁ」 そんな方に無料お試しがずっと可能なAIライティングツールをいくつか紹介します。 もちろん無料お試しなので、機能をフルに使用するこ ...