【AFFINGER5】タブ（切り替えボタン）でトップページをカスタマイズする

AFFINGER5のトップページでのカテゴリー別での切り替えを簡単にできるようにします。

こんなのを作ります。

タブを押すと切り替えができるようになり、「切り替えタブ機能」を使って、トップページにカテゴリ別の記事一覧を設置していきます。

この記事を読むと、簡単にタブ切り替えが作れるようになります。

このタブを作ってからは、カテゴリー分けが見やすく新着記事にスムーズに回遊してくれるようになりPVも上がりましたね。

私もトップページに使っています。

ムロ

今回、初心者でも使えるようにマニュアルを作りました。この記事を読んでもらえればAFFINGER５の使い方がよくわかります。【最新版2021年】AFFINGER5の使い方とインストール方法、補足マニュアルと不具合の修正を紹介本ブログの人気記事です。

 コチラも読まれています

＞＞【AFFINGER５】ブログのトップページをカスタマイズするやり方

＞＞【AFFINGER5】スライドボックスを作り、枠で囲む作り方

＞＞【AFFINGER5】バナーリンクの作り方、ブログはオシャレになる【バナーリンク】

タブ（切り替えボタン）の作り方

ではスタート！！

タブ（切り替えボタン）を設置する

タグ＞レイアウト＞タブ（切り替えボタン）＞４つ

 command
[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="" text="タブ1" bgcolor="" bordercolor="" color="" fontweight="" checked="checked"]
[st-input-tab fontawesome="" text="タブ2" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="" text="タブ3" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="" text="タブ4" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-tab-main bgcolor="" bordercolor=""]
タブ1のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
タブ2のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
タブ3のコンテンツ
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
タブ4のコンテンツ
[/st-tab-main]
[/st-tab-content]

これがコードになります。

タブはコンテンツの数によって決まるので、自分でコンテンツの数を選びましょう。

それぞれのタブ（切り替えボタン）にカテゴリを設定する

【タブ1のコンテンツ】にコンテンツを入れます。

私は『カード』で自分の入れたい記事を入れましたが、今回はカテゴリーで記事一覧を入れる簡単なおすすめ方法を紹介します。

タグ＞記事一覧/カード＞カテゴリー覧

 command
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]

カテゴリーIDの調べ方はこちら⬇️

投稿＞カテゴリー

こちらがコードです。

 command
[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="" text="タブ1" bgcolor="" bordercolor="" color="" fontweight="" checked="checked"]
[st-input-tab fontawesome="" text="タブ2" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="" text="タブ3" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="" text="タブ4" bgcolor="" bordercolor="" color="" fontweight="" checked=""]
[st-tab-main bgcolor="" bordercolor=""]
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]
[/st-tab-main]
[/st-tab-content]
 

『cat="0"』にカテゴリーI Dを入れます。

タブ（切り替えボタン）にカテゴリ名を表示させる

タブ（切り替えボタン）の色をアレンジ

今はまだ色がない状態なので、まずはタブの色のアレンジから。

 command
[st-input-tab fontawesome="" text="ブログ" bgcolor="" bordercolor="" color="" fontweight="" checked="checked"]

お好みのカラーコード（#〇〇〇〇〇〇）を書き入れてください。

切り替えタブにアイコンを入れる

カテゴリ名の前にアイコンを入れることもできます。

『fontawesome=""』にHTMLコードのアイコンを入れます。

 command[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="fa-blog" text="ブログ" bgcolor="#FFFF88" bordercolor="" color="" fontweight="" checked="checked"]
[st-input-tab fontawesome="fa-books" text="AFFINGER5" bgcolor="#88FFFF" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="fa-user-md" text="アフィリエイト" bgcolor="#FFBBFF" bordercolor="" color="" fontweight="" checked=""]
[st-input-tab fontawesome="fa-move" text="VOD" bgcolor="#5BFF7F" bordercolor="" color="" fontweight="" checked=""]

『fontawesome="アイコン名"』となります。

アイコンは「Font Awesome」で探せます。

「fa-」から始まるのがアイコン名（HTMLコード）です。

まとめ：タブ（切り替えボタン）でトップページをより見やすく

読者が読みやすい導線がトップページにあることは、SEO評価の点にでも重要です。

＼当サイト限定特典付き／

AFFINGER プラグインセットショップはコチラ