AFFINGER5 でカテゴリ分けされたかっこいいトップページを自作する方法を紹介します (=ﾟωﾟ)ﾉ
新着記事がズラーっと並んでるだけの味気ないトップページは卒業して、訪問ユーザが利用しやすいトップページに作り変えてみませんか ( ･ㅂ･)و ̑̑
概要
↓↓今回作るトップページはこんなんです。
ポイント
- トップページは 2 列構成にし、1 列ごとに 1 カテゴリを割り振る
- 「PC: 2 列表示」「スマホ: 1 列表示」のレスポンシブ対応
- 各カテゴリに含める要素は『バナーリンク』『ピックアップ記事』
- バナーリンクをクリックするとカテゴリの記事一覧へ
固定ページを作成
- 「WordPress 管理画面」 > 「固定ページ」 > 「新規追加」から、新規の固定ページを作成する
レイアウト (2 列) を作成
まず 2 列に分割されたレイアウトを作成します。
- 「タグ」 > 「レイアウト」 > 「PCとTab左右50%」を選択
- 2 列に分割されたページが表示される
これで左右それぞれに別コンテンツを作る準備ができました。
ポイント
- PC: 2 列」「スマホ 1 列」と自動調整するため「PCとTab左右50%」にしています
- 「左側のコンテンツ (黄色)」に記入した内容が 1 列目、「右側のコンテンツ (青色)」に記入した内容が 2 列目のコンテンツ内容になります
カテゴリーごとのコンテンツを作成
分割された列ごとにコンテンツを作成していきます。
バナーリンク
カテゴリの趣旨が分かるようバナーリンクを作成します。
- 「タグ」 > 「ボックスデザイン」 > 「バナー風ボックス」 > 「基本」からバナーリンク用コードを表示する
- 各パラメータを入力する
st-flexbox url: リンク先 URL
title: バナー文言
backgroud_image:バナーリンクに使用する画像 URL
-
【AFFINGER5】バナーリンクの作り方
続きを見る
ブログカード
カテゴリのピックアップ記事をブログカード形式で表示させていきます。
- 「カード」をクリックし、ブログカードのコードを表示させる
- "st-card id" に記事 ID を入力する
- readmore="off" に変更する
-
【AFFINGER5】ブログカードの作り方
続きを見る
ポイント
readmore="on" だと「続きを見る」が表示されるため、縦長になってしまい、トップページに不向きです。
readmore="off" で非表示にしてしまいましょう。
- 「WordPress 管理画面」 > 「AFFINGER5 管理」 > 「デザイン」 > 「抜粋設定」 > 「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」をチェックする
ポイント
抜粋文があるとブログカードが縦長になってしまうため非表示にしましょう。
「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れてしまうと、ブログ内全てのブログカードで抜粋が表示されなくなってしまいます。
トップページのピックアップ記事だけ抜粋 OFF にしたい場合は、対象記事の先頭に『続きを読む』タグを挿入しましょう。
あとは『バナーリンク』『ブログカード』を右の列でも同様に作成していきます。
レイアウト完成イメージ
さらにカテゴリを追加したい場合は「レイアウト (2 列) を作成」を繰り返します。
固定ページをトップページに設定
最後に作成した固定ページがトップページになるよう設定します。
- 「WordPress 管理画面」 > 「設定」 > 「表示設定」
- 「ホームページの設定」 > 「固定ページ」をチェック
- 「ホームページ」で作成した固定ページを選択
- 「変更を保存」をクリック
スマホ版
レイアウト「PCとTab左右50%」で作成したのでスマホでは 1 列表示になります。
おわり。
