AFFINGER6の「タブ式 カテゴリー記事一覧」機能は、複数のカテゴリーをタブ形式で整理して表示できる便利な機能です。
デスクトップだけでなく、スマホでも正しく表示されるように設定を整えることで、より快適なユーザー体験を提供できます。
本記事では、この設定方法を詳しく解説します。
カテゴリーがくっきりと別れているようなブログなら、その方が見やすいもんね！
ぶろとら
ろずびー
AFFINGERは使いこなすのは大変ですが、こういったかゆいところに手が届くような機能がしっかり備わっているのはさすがですね。
PCで表示させるだけなら、AFFINGERのデフォルト機能だけでOK！
手順
- 管理画面にログイン：サイトの管理画面にアクセスします。
- AFFINGER管理を開く：サイドメニューから「AFFINGER管理」を選びます。
- トップページ設定：「トップページ」セクションを見つけてクリックします。
- タブ式カテゴリー記事一覧：「タブ式 カテゴリー記事一覧」の設定に進みます。
- フロントページに表示する：タブ式 カテゴリー記事一覧をフロントページに表示する」というオプションにチェックを入れます。
- カテゴリーIDを入力：表示したいカテゴリーのIDを入力します。カテゴリーIDは「投稿」→「カテゴリー」から確認できます。
ろずびー
そしたら後はその下の項目でタブのデザインを選んだり、カラーを設定したりすればOKなのですが、このままだとカテゴリー記事の下に新着記事一覧が出てきてしまします。
新着記事一覧を非表示にする手順
- 「AFFINGER管理」の中から「トップページ」を見つけてクリックします。
- トップページ設定の中にある「記事一覧」のオプションをクリックします。
- 記事一覧の設定画面で「トップページのコンテンツ内の新着記事一覧を非表示にする」というチェックボックスを見つけて、チェックを入れます。
記事の順番に関しても、同じ設定画面の場所からID・投稿日・更新日・ランダムでそれぞれ並び替えができるからね！
ぶろとら
スマホに適用させるためにはCSSの追加が必要！
ろずびー
スマホにも対応させたいと思い、色々調べたりAFFINGER自体の設定をいじってみたりしたのですが、CSSにコードを入れる手段でしか上手くいきませんでした。
ブログに訪れる人の3分の2がスマホからだから、この設定は是非ともしておきたいよね！
ぶろとら
実行手順
- WordPress管理画面の左側メニューから「外観」をクリックします。
- 「カスタマイズ」を選択します。
- 「追加CSS」をクリックします。
- 下記のコードを入力欄に貼り付けます。
- 最後に、「公開」ボタンを押して変更を保存します。
/* スマホ用のタブスタイル */
@media (max-width: 768px) {
.tab-container {
display: block; /* スマホではタブを縦並びに */
}
.tab {
width: 100%; /* タブ幅を画面いっぱいに */
margin-bottom: 10px;
}
.tab-content {
padding: 10px;
}
}
ろずびー
またしてもChat GPT先生が大活躍してくれました！
まとめ
AFFINGER6のタブ式カテゴリ記事一覧は、トップページのデザインを向上させ、ユーザーエクスペリエンスを高めるのに役立つ機能です。
さらに、スマホ対応を強化することで、幅広いデバイスで快適な閲覧体験を提供できます。
上記の設定を活用して、ブログの利便性をさらに高めましょう！
なるべくなら、見やすく分かりやすいサイトにしたいもんね！
ぶろとら
ろずびー
カテゴリーごとのページを投稿日順から更新日順にしたい時にはこちらの記事を参照ください！
