
こんな悩みに答えます。

ただ、機能がたくさんありすぎてどうやったらおしゃれなデザインのTOPページを作ったら良いのか悩むと思います。
そこで、本記事では、AFFINGERでできるトップページをカッコよくカスタマイズする方法を紹介します。
以下のように悩んでいる方は参考になると思うので、ぜひ読み進めてみてください!
こんな方におすすめ
- AFFINGERのトップページをかっよく見せたい!
- AFFINGERのトップページのカスタマイズ方法を知りたい!
- 機能がたくさんあるので、まずはAFFINGERのトップページだけでもカスタマイズを知りたい!
それでは、早速解説していきます。
目次
【AFFINGER】トップページのバナー風ボックス完成系
まずは、AFFINGERトップページの完成系のイメージを紹介します。

最終的な完成形
PC
SP
メモ
- 『PCは2列に分割して表示』『SPは縦一列で表示』。
- 『バナーリンク』は、クリックするとカテゴリ一覧ページへ。
- 『記事』は、自分がクリックさせたい記事へ。
それでは、実際に設定方法を紹介していきます。
手順①:2分割のレイアウト設定
まずは、お使いのワードプレスの管理画面を開きます。
管理画面を開けましたら、以下のようにサイドメニューにある『固定ページ → 新規追加』をクリックします。
続いて、以下の手順でバナー風ボックスを追加していきます。
- 新規追加ページで『タグ』→『レイアウト』→『PCとTab(959px以上)』→『左右50%』を選択します。
- 選択後に黄色(左)とブルー(右)の画面が出ますので、これで2分割のレイアウト設定の準備完了です。

手順②:バナーリンクの挿入
続いて『黄色(左)』と『ブルー(右)』のボックスの中に以下のようにバナーリンクを追加します。
バナーリンクを追加するには、新規追加ページ画面にいき、『タグ → ボックスデザイン → バナー風ボックス → 基本』でバナーリンク用のコードを設定します。
上記のように、バナーリンク用のコードが追加されます。
バナーリンク用コード [st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"] [/st-flexbox]
- リンク先URL:st-flexbox url
- カテゴリタイトル:title
- タイトル下の背景画像:backgroud_image

『リンク先URL』,『カテゴリタイトル』『タイトル下の背景画像』をいれるには、以下のようにクォーテーションマークの中にURLをいれます。
例)リンク先URLを入れる場合:
st-flexbox url="" → st-flexbox url="https://www.keiblog0815.com/"
なお、画像のURLはメディアのライブラリから取得することができます。
手順③:記事の設定
続いて、以下のようにバナーリンク下に入れる『記事=ブログカード』を追加する方法です。
まずは以下の手順でブログカードを追加します。
- カードをクリックして『記事=ブログカード』を表示させます。
- ブログカードのショートコードが表示されたら、以下のテキストを変更していきます。
- 「id="" 」のクォーテーションマークの間に表示させたい記事のIDをいれます。
- 「readmore="on"」→「readmore="off"」 に変更。
次に、『管理画面 → AFFINGER5 管理 → デザイン → 抜粋設定 → PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする』にチェックをいれます。

手順④:トップページに表示設定
最後にトップページの表示設定をしていきます。
- 『WordPress 管理画面 → 設定 → 表示設定 → ホームページの表示 → 固定ページ』をチェック。
- 「ホームページ」のプルダウンで固定ページで作成したタイトルを選択します。
- 最後に『変更を保存』をクリックして設定完了です!
AFFINGERトップページ以外のカスタマイズ方法
最後におまけでAFFINGERでできるカスタマイズ方法を紹介します。

もし興味のあるカスタマイズがありましたらぜひ参考にしてみてください!
あわせて読みたい!
今回は、以上になります。
ここまで、読んでいただきありがとうございました!