トップページの見た目を変える!AFFINGERタブ式カテゴリ記事一覧の設置方法

※記事内に商品プロモーションを含む場合があります。

悩める人

有料テーマのAffinger6を導入しました。
トップページの見た目を変えたいと思っています。

きつねコード

アフィンガーには「タブ式カテゴリ記事一覧」という機能があり、タブで切り替えができる記事一覧を簡単に設置することができます。知っておくと役立つパーツですのでぜひ覚えておきましょう!

この記事でわかること

  • Affinger6「タブ式カテゴリー記事一覧」の使い方
  • Affinger6「タブ式カテゴリー記事一覧」の活用事例

この記事を書いているきつねコードは、ワードプレスを触り始めてから10年以上、このブログを作ってからも毎日ワードプレスを触っています。当サイトではAffinger6を利用しており、今後も使い続ける予定です。

アフィンガー6では、TOPページを簡単にカスタマイズするためのパーツがいくつか用意されています。

今回紹介する「タブ式カテゴリー記事一覧」もその一つで、入れるだけでオシャレなサイトに様変わりするのでお好みで活用してみてください!

Affinger6専用プラグインで収益を次の段階へ

\ きつねコードも使ってます!夏の限定セール中!/

Affingerタグ管理マネージャーとPVモニターのセット

※インフォトップから購入できます。33,000円セールにつき24,800円

タグ管理マネージャーとPVモニターの活用方法はこちら>>

Affinger6「タブで切り替えができるカテゴリー記事一覧」とは

アフィンガー6を導入したばかりの方は、その機能の多さに迷う方もいるかもしれません。

当記事では、「タブ式カテゴリー記事一覧」を紹介します。

タブで切り替えが可能な、カテゴリーごとの記事一覧になります。

設定も簡単なので、誰でもすぐに設置することができます。

試しに出してみると、こんな感じです↓。

affinger6でタブ式カテゴリー記事一覧を表示した状態

綺麗に整ったパーツですよね。これ1つ入れるだけでアクセントになり、プロっぽいサイトに見えます。

表示させる"カテゴリー"は任意で選べます。読者ユーザーに「このカテゴリーの記事を見てほしい!」という人は活用してみると良いでしょう。

タブ式カテゴリー記事一覧は、そこまで重くないのでSEO面でサイトスピードが落ちることを心配している方でも使用して問題ないでしょう。ただし、各記事のアイキャッチ画像が出てくるわけですので、画像容量は小さく圧縮してから毎回アップするのを忘れずに!

Affinger6タブ式カテゴリー記事一覧の設置方法

アフィンガー6でタブ式カテゴリー記事一覧を設定する方法について解説します。

設定は、すぐにできますよ!


  • step.1

    管理画面「AFFINGER管理」をクリックしてください。

    wordpress管理画面「AFFINGER管理」

    AFFINGER管理のトップページ」をクリックしましょう。

    affinger管理の「トップページ」の設定

    トップページ設定にあるタブ式カテゴリー記事一覧をフロントページに表示する」にチェックを入れましょう。

    affinger管理のトップページ設定の、タブ式カテゴリー記事一覧の設定

    タブのカテゴリーは最大4つまで設定できます。任意で出したいカテゴリーのIDを入力してください

    なお、"999999"と入れると最新記事が出ます。

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

    カテゴリーIDを調べるには、管理画面「投稿」≫「カテゴリー」から見られます。

    wordpress管理画面「カテゴリー」でカテゴリーIDを調べる

    設定を保存して確認してみると、このようにタブが出てきます↓

    affingerでタブ式カテゴリー記事一覧を表示した状態

    そのほかの項目は、各種設定になります。タブの色やデザイン、表示する記事数やロジックなどを変更できるのでお好みに応じてカスタマイズしてみてください。

    affingerタブ式カテゴリー記事一覧の各種設定

    以上で、タブ式カテゴリー記事一覧の設定は完了です。


きつねコード

めちゃくちゃ簡単ですね!

Affinger6タブ式カテゴリー記事一覧の活用事例

例えばのデザイン事例になりますが、「サムネイルスライドショー」の機能などと一緒に活用しても綺麗になります。

サムネイルスライドショーの設定は、管理画面「AFFINGER管理」≫「ヘッダー下/おすすめ」にあります。

affinger6でタブ式カテゴリー記事一覧とサムネイルスライドショーを使用
デザインデータの事例

こちらは、サムネイルスライドショー部分の背景に色ををつけたパターンです。

色をカスタマイズするには、管理画面「外観」≫「カスタマイズ」の基本エリア≫ヘッダー画像エリア≫ヘッダーナビゲージョンの下です。

affinger6でタブ式カテゴリー記事一覧とサムネイルスライドショーを使用
デザインデータの事例

アフィンガーでは、TOPページを結構自由にカスタマイズすることができますので素敵なデザインになるように試してみてください!

関連記事
affinger6の使い方入門ガイド
初心者でも使いこなす!AFFINGER6の使い方・初期設定入門ガイド

この記事でわかること Affinger6の初期設定の全て Affinger6の基本の使い方 効率的にAffinger6に慣れるためのコツ この記事を書いているき ...

まとめ

まとめ

  • Affinger6では、タブで切り替えができるカテゴリー記事一覧の機能がある
  • タブ式カテゴリー記事一覧を出すには、管理画面「AFFINGER管理」≫「トップページ」タブ式カテゴリー記事一覧を表示するにチェックを入れて、出したいカテゴリーIDの数字を入れるだけ。

  • この記事を書いた人

きつねコード

webディレクター/プログラマー。 web系の経験が10年以上あり、webサービスの立ち上げやメディア運営などをやっていました。若い時に起業していた時期もあるので、守備範囲は結構広めです。パソコンが苦手な人からの質問も受けるので、参考になればとの想いで当ブログを始めました。

人気記事

wordpressのおすすめテーマはこれ 1

結論:私がおすすめするWordPressテーマはこれ! 最初に、結論をお伝えすると 私が本気でおすすめしているのは「Affinger6」というテーマになります。 ...

おすすめのASP 2

登録必須のおすすめASP(ブログ初心者〜上級者) ブログやサイトを作成したら、まずASPヘの登録は行いましょう。 結論を言うと、初心者でも上級者でも下記の王道5 ...

ラッコキーワードの使い方を徹底解説! 3

この記事でわかること ラッコキーワードを使うと何ができるのか? 他のツールと比べたときのラッコの優位性 ラッコキーワードの超具体的な使い方 (初心者向け)SEO ...

cocoonからaffinger6への移行手順 4

他のテーマからaffinger6へ移行する場合もチェック項目は大体同じですので、参考にしてみてください。 結論:cocoonとaffingerどっちが良い?移行 ...

cocoonからswellに移行する全手順 5

他のテーマからswellへ移行する場合でも、確認することとしては大体同じ手順となります。ご参考にしてみてください。 結論:cocoonとswellどっちが良い? ...

AFFINGERタグ管理マネージャーとPVモニター 6

この記事でわかること 初心者に、「タグ管理マネージャー&PVモニター」が良い理由 Affinger6の専用プラグイン「タグ管理マネージャー」の使い方 Affin ...

-Affinger, ブログ・wordpress運営
-, ,