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

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

悩める人

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

きつねコード

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

この記事でわかること

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

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

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

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

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

\ きつねコードも使ってます!6/30までセール中!/

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

※インフォトップから購入できます。29880円セールにつき24800円

タグ管理マネージャーと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の数字を入れるだけ。

おすすめテーマランキング[PR]

【第1位】AFFINGER6 ¥14,800円

affinger6バナー

正直、万人向けとは言えないが、「稼ぐサイトを作りたい人」はこのテーマが良い。収益化をサポートするための仕掛けが本当に良く出来ているので、使いこなせれば無双状態に。カスタマイズ自由度もMAXなので個性も出せる。当サイトで利用中。もちろんSEOにも強い。

【第2位】swell ¥17,600円

こちらは万人向け。いま一番売れてる有料テーマ。多機能ながらも直感的な操作ができるので、「とにかく使いやすい」。初心者〜上級者にも愛用され、導入してすぐオシャレなサイトになる。SEOにも強くバランスが良いと言える。

【第3位】Cocoon 無料

cocoonバナー

一言で言えば「コスパ最強」。なんでこれが無料?必要十分な機能で、シンプルなので初心者にもgood。費用をかけずとりあえずサイトを始めたい人に最適。ゼロからサイトを作る人は、レンタルサーバーの「Xサーバー」で、wordpressクイックスタート機能というのを使うのがおすすめ。即cocoonサイトができる。2個目のブログにも。

  • この記事を書いた人

きつねコード

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

PICK UP!

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

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

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

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

現役ブロガーがAFFINGER6を徹底評価 3

この記事でわかること Affinger6のどこが良いのか 実際に使っていて感じるAffinger6のメリットとデメリット Affinger6のデメリットを相殺す ...

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