【AFFINGER5】トップページをカード表示でサイト型にする方法

こんにちは。ろつきです！

筋肉クマ

ブログ見やすくしたいな～

トップページのカスタマイズ方法がわからない！

ペンギン

今回は、こういった方たちのために、AFFINGER5（WING）でトップページをサイト型にカスタマイズする方法を写真付きで順を追って説明していきたいと思います。

サイト型とは？

サイト型は、このようにカードで表示されるようになっています。

この2つで構成されています！

これにするために順を追って写真付きで説明していきます。

筋肉クマ

それじゃあ説明していくよ～

トップページをサイト型にカスタマイズ

固定ページの作成

サイト型にするには、固定ページでサイト型のページを作成し、それをトップページに反映する方法をとります。

そのため、まず固定ページを作成しましょう。

固定ページ  > 新規作成

こちらで、固定ページを新規作成しましょう。

新着記事スライドショーの作成

新規追加をすると、このページが出てきます。

ここでは新着記事のスライドショーを作成します。

このページに来たら番号に沿って行っていきましょう。

そうすると、このようなショートコードが出てきます。

私は、テキストも表示させたかったので「text」と入力しました。

筋肉クマ

これで、スライドショーは完了だよ～

これができたら、プレビューで確認してみましょう。新着記事のスライドショーができているはずです。

おすすめ記事を2カラム（2列）にする。

先ほどのスライドショーの下に次はおすすめ記事のカード表示を2カラムで設定しましょう。

まずは、2カラム（2列）にしましょう。

そうすると、このように、黄色と青いものが出てくると思います。

それでは次のステップに進みましょう。

カテゴリのバナー風ボックスを設定する。

それぞれ、黄色の方にも青の方にもショートコードを表示させましょう。

このようなショートコードが出てくるので、それぞれ左右ともに必要事項を記入しましょう。

これを入力したら、プレビューで確認をしてみましょう。

そうすると、このようにバナー風のカテゴリボックスができていると思います。

カテゴリ別おすすめ記事の設定

まずは、アイキャッチ画像とタイトルだけ表示させるために、

AFFINGER5管理  > デザイン

を開きましょう。

そして、この画面で赤枠の部分にチェックを入れましょう。

これができたら先ほどの固定ページに戻りましょう。

先ほどの、カテゴリのバナー風ボックスの下でこれを行いましょう。

記事IDについては、この赤枠の部分の下にある数字です！！

左右すべてのカードに自分のおすすめしたい記事のID入れ終わったら、プレビューしてみましょう。

そうするとこのようになっていると思います！！

筋肉クマ

あれ～？なんかずれてるな～

おすすめカードのずれを直す

おすすめ記事のずれを直すためには高さを調整する必要があります。

そして、これを設定すると、、、

こんな感じで縦横がそろいました！！

これができたら、

最後に「このテキストは最後に消して下さい。（50%）」を消しましょう。

これができたら「公開」を押しましょう！！

筋肉クマ

これで完成だよ～

あとは、トップページに反映させよう！

ペンギン

固定ページをトップページに反映

先ほど作成したサイト型の固定ページをトップページに反映する設定しましょう。

まずは、外観  > カスタマイズ でカスタマイズ画面に行きましょう。

「ホームページ設定」を押しましょう。

そうするとこの画面に来るので、

「固定ページ」を選択し、「トップページ」に「公開」を押しましょう。

そうすると、、、

このようにトップページがサイト型になっているはずです！

まとめ

できましたでしょうか！

このようにトップページをデフォルトの形からサイト型にすることによってカテゴリ分けをすることができます。

カテゴリ分けをすることで、見に来る人は,より見たい記事を探しやすくなります。

ぜひこれを見てトップページのカスタマイズを行ってみてください！