AFFINGER 5 で超かっこいいトップページを作る方法

投稿日:2018年12月16日 更新日:

AFFINGER5 でカテゴリ分けされたかっこいいトップページを自作する方法を紹介します (=゚ω゚)ノ

新着記事がズラーっと並んでるだけの味気ないトップページは卒業して、訪問ユーザが利用しやすいトップページに作り変えてみませんか ( ・ㅂ・)و ̑̑

 

概要

↓↓今回作るトップページはこんなんです。

 

AFFINGER カスタマイズ

 

ポイント

AFFINGER カスタマイズ

  • トップページは 2 列構成にし、1 列ごとに 1 カテゴリを割り振る
  • 「PC: 2 列表示」「スマホ: 1 列表示」のレスポンシブ対応
  • 各カテゴリに含める要素は『バナーリンク』『ピックアップ記事』
  • バナーリンクをクリックするとカテゴリの記事一覧へ

 

固定ページを作成

AFFINGER カスタマイズ

  • 「WordPress 管理画面」 > 「固定ページ」 > 「新規追加」から、新規の固定ページを作成する

 

レイアウト (2 列) を作成

AFFINGER カスタマイズ

 

まず 2 列に分割されたレイアウトを作成します。

 

AFFINGER カスタマイズ

  • 「タグ」 > 「レイアウト」 > PCとTab左右50%を選択
  • 2 列に分割されたページが表示される

 

これで左右それぞれに別コンテンツを作る準備ができました。

 

ポイント

  • PC: 2 列」「スマホ 1 列」と自動調整するため「PCとTab左右50%」にしています
  • 「左側のコンテンツ (黄色)」に記入した内容が 1 列目、「右側のコンテンツ (青色)」に記入した内容が 2 列目のコンテンツ内容になります

 

カテゴリーごとのコンテンツを作成

分割された列ごとにコンテンツを作成していきます。

 

バナーリンク

AFFINGER カスタマイズ

 

カテゴリの趣旨が分かるようバナーリンクを作成します。

 

AFFINGER カスタマイズ

 

  • 「タグ」 > 「ボックスデザイン」 > 「バナー風ボックス」 > 「基本」からバナーリンク用コードを表示する
  • 各パラメータを入力する
    st-flexbox url: リンク先 URL
    title: バナー文言
    backgroud_image:バナーリンクに使用する画像 URL

 

詳細はこちら
【AFFINGER5】バナーリンクの作り方

続きを見る

 

ブログカード

AFFINGER カスタマイズ

 

カテゴリのピックアップ記事をブログカード形式で表示させていきます。

 

AFFINGER カスタマイズ

  • 「カード」をクリックし、ブログカードのコードを表示させる
  • "st-card id" に記事 ID を入力する
  • readmore="off" に変更する

 

詳細はこちら
【AFFINGER5】ブログカードの作り方

続きを見る

 

ポイント

readmore="on" だと「続きを見る」が表示されるため、縦長になってしまい、トップページに不向きです。

readmore="off" で非表示にしてしまいましょう。

 

AFFINGER カスタマイズ

  • 「WordPress 管理画面」 > 「AFFINGER5 管理」 > 「デザイン」 > 「抜粋設定」 > 「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」をチェックする

 

ポイント

抜粋文があるとブログカードが縦長になってしまうため非表示にしましょう。

「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れてしまうと、ブログ内全てのブログカードで抜粋が表示されなくなってしまいます。

トップページのピックアップ記事だけ抜粋 OFF にしたい場合は、対象記事の先頭に『続きを読む』タグを挿入しましょう。

AFFINGER カスタマイズ

 

 

あとは『バナーリンク』『ブログカード』を右の列でも同様に作成していきます。

 

レイアウト完成イメージ

 

さらにカテゴリを追加したい場合は「レイアウト (2 列) を作成」を繰り返します。

 

固定ページをトップページに設定

最後に作成した固定ページがトップページになるよう設定します。

 

AFFINGER カスタマイズ

  • 「WordPress 管理画面」 > 「設定」 > 「表示設定」
  • 「ホームページの設定」 > 「固定ページ」をチェック
  • 「ホームページ」で作成した固定ページを選択
  • 「変更を保存」をクリック

 

 

AFFINGER カスタマイズ

 

スマホ版

レイアウト「PCとTab左右50%」で作成したのでスマホでは 1 列表示になります。

AFFINGER カスタマイズ

 

おわり。

 



Copyright© てっぺのマネーハック.INFO , 2023 All Rights Reserved.