当ページのリンクには広告が含まれています。

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

A FFINGER6 タブ式カテゴリー記事一覧を設置!

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

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

AFFINGER6専用のトップページ設定です。

タブごとにカテゴリー別の記事一覧を表示できるので、コンテンツの領域を小さくできるのと同時に読者が興味のある記事を見つけやすくなるメリットがあります。
今回ご紹介する「タブ式カテゴリー記事一覧」はトップページ専用のカスタマイズ機能です。

こんな方におすすめ!

  • サイト内を閲覧しやすくしたい。
  • トップページのコンテンツ領域を小さくしたい。

この記事でわかること!

  • タブ式カテゴリー記事一覧とは?
  • タブ式カテゴリー記事一覧の設置手順
  • タブ式カテゴリー記事一覧の詳細設定
    1. タブ式カテゴリー記事一覧をフロントページに表示する
    2. 表示するカテゴリーを入力する
    3. 表示するタブの背景色を設定する
    4. タブのスタイルを設定する
    5. 表示記事数を入力する
    6. 表示記事の並び順と除外設定をする
    7. 無限ループにする
    8. 最新記事一覧の設定とタブ名を入力する
    9. 忘れずに!設定が完了したら最後に『Save』する
  • まとめ!

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

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

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

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

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

こんな感じです。

タブ式カテゴリー記事一覧|参考1

このサンプルでは以下のように設定しています。

  • タブ(3列)(赤色)
  • タブ文字色(黒色)
  • タブの表示スタイル(ボーダーにする)
  • 表示記事数(9)(昇順)(投稿日)
  • 無限ループにする(ON):「もっと読む」ボタンで次ページが追加される

※ 設定方法の詳細は後述します。

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

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

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

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

『WordPress管理>ダッシュボード>AFFINGER管理』をクリックします。

WordPress管理>AFFINGER管理
yajirusi-sita-80x40

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

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

AFFINGER管理:はじめに>トップページ
yajirusi-sita-80x40

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

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

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

AFFINGER管理:トップページの設定>タブ式カテゴリー記事一覧
yajirusi-sita-80x40

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

タブ式カテゴリー記事一覧|詳細

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

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

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

タブ式カテゴリー記事一覧|詳細|クローズアップ

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

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

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

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

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

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

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

タブ式カテゴリー記事一覧:カテゴリーA-DのIDを入力
yajirusi-sita-80x40
タブ式カテゴリー記事一覧:カテゴリーA-DのIDを入力|参考

カテゴリーIDの確認手順は以下の通りです。

『WordPress管理>ダッシュボード>投稿>カテゴリー』をクリックします。

投稿>カテゴリー:カテゴリ一覧の呼び出し
yajirusi-sita-80x40

カテゴリーページが表示されます。

カテゴリーIDを確認して、表示する カテゴリーIDの番号を控えます。

このサンプルでは『4・5・6・7』です。

投稿>カテゴリー:カテゴリ一覧

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

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

タブ式カテゴリー記事一覧:タブA-DのIDの背景色と文字色を設定
yajirusi-sita-80x40
タブ式カテゴリー記事一覧:タブA-DのIDの背景色と文字色を設定|参考

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

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

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

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

タブ式カテゴリー記事一覧:タブの表示スタイルを選択

タブの表示:5種類のスタイルが選べます。

タブのスタイル設定:デフォルト

タブのスタイル設定:デフォルト

※ ふきだしの角を丸めない形状で表示されます。

タブのスタイル設定:角丸にする

タブのスタイル設定:角丸にする

※ ふきだしの角を丸めた形状で表示されます。

タブのスタイル設定:スクエアにする

タブのスタイル設定:スクエアにする

※ 四角の形状で表示されます。

タブのスタイル設定:ボーダーにする

タブのスタイル設定:ボーダーにする

※ タブを切り替えるとボーダが背景色で表示されます。

タブのスタイル設定:タブ(シンプル)にする

タブのスタイル設定:タブ(シンプル)にする

※ 背景色は反映されません。

表示記事数を入力する

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

タブ式カテゴリー記事一覧:表示記事数を入力

表示記事は以下のように表示されます。

表示記事数『5』とした場合 以下のように表示されます。

カテゴリー:表示記事数『5』

表示記事数『3』とした場合 以下のように表示されます。

カテゴリー:表示記事数『3』

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

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

タブ式カテゴリー記事一覧:表示記事の並び順と除外設定

表示順序

  • 昇順(DESC):新しい記事が上側、古い記事が下側に表示されます。
  • 降順(ASC):古い記事が上側、新しい記事が下側に表示されます。

表示条件

  • ID
  • 投稿日
  • 更新日
  • ランダム

除外条件

  • 子カテゴリーを除外する:ON/OFF(チェック)

無限ループにする

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

タブ式カテゴリー記事一覧:無限ループにする

表示記事は以下のように表示されます。

表示記事の最下部に『もっと見る>』ボタンが表示されます。

カテゴリー:表示記事数『3』|無限ループ『もっと見る>』ボタン表示

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

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

タブ式カテゴリー記事一覧:最新記事一覧タブ名

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

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

タブ式カテゴリー記事一覧:設定完了最後に『Save』

※ 本記事の設定では『AFFINGER管理』のメニューを編集します。

ロリポップレンタルサーバーをお使いの方は、ドメインの『WAFの設定』を一時的に無効 にしてください。◀︎『403 Error』が出た場合。

AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!
AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!

ロリポップ!レンタルサーバーを使用してAFFINGER6(ACTION)のヘッダー等の表示系をカスタマイズするとセーブ時に『403 Error』が表示されセーブできない! こんな時はロリポップユーザー専用ページにログインしてWAFの設定を無効にするだけ!

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

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

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

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

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

-カスタマイズ_AFFINGER
-