【アフィンガー５】トップページのカスタマイズ方法【かっこよく見せる方法】

 

 

こんな悩みに答えます。

 

 

ただ、機能がたくさんありすぎてどうやったらおしゃれなデザインのTOPページを作ったら良いのか悩むと思います。

 

そこで、本記事では、AFFINGERでできるトップページをカッコよくカスタマイズする方法を紹介します。

 

以下のように悩んでいる方は参考になると思うので、ぜひ読み進めてみてください！

 

 

それでは、早速解説していきます。

 

【AFFINGER】トップページのバナー風ボックス完成系

 

まずは、AFFINGERトップページの完成系のイメージを紹介します。

 

 

 

 

それでは、実際に設定方法を紹介していきます。

 

手順①：２分割のレイアウト設定

 

まずは、お使いのワードプレスの管理画面を開きます。

 

管理画面を開けましたら、以下のようにサイドメニューにある『固定ページ　→　新規追加』をクリックします。

 

 

続いて、以下の手順でバナー風ボックスを追加していきます。

 

• 新規追加ページで『タグ』→『レイアウト』→『PCとTab(959px以上)』→『左右50%』を選択します。
• 選択後に黄色（左）とブルー（右）の画面が出ますので、これで２分割のレイアウト設定の準備完了です。

 

 

 

 

 

手順②：バナーリンクの挿入

 

続いて『黄色（左）』と『ブルー（右）』のボックスの中に以下のようにバナーリンクを追加します。

 

 

バナーリンクを追加するには、新規追加ページ画面にいき、『タグ → ボックスデザイン → バナー風ボックス → 基本』でバナーリンク用のコードを設定します。

 

 

上記のように、バナーリンク用のコードが追加されます。

 

 バナーリンク用コード
[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』,『カテゴリタイトル』『タイトル下の背景画像』をいれるには、以下のようにクォーテーションマークの中にURLをいれます。

 

 

なお、画像のURLはメディアのライブラリから取得することができます。

 

 

手順③：記事の設定

 

続いて、以下のようにバナーリンク下に入れる『記事＝ブログカード』を追加する方法です。

 

 

まずは以下の手順でブログカードを追加します。

 

• カードをクリックして『記事＝ブログカード』を表示させます。
• ブログカードのショートコードが表示されたら、以下のテキストを変更していきます。

 

 

 

 

 

次に、『管理画面 → AFFINGER5 管理 → デザイン → 抜粋設定 → PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする』にチェックをいれます。

 

 

 

手順④：トップページに表示設定

 

最後にトップページの表示設定をしていきます。

 

 

 

 

AFFINGERトップページ以外のカスタマイズ方法

 

最後におまけでAFFINGERでできるカスタマイズ方法を紹介します。

 

 

もし興味のあるカスタマイズがありましたらぜひ参考にしてみてください！

 

 

今回は、以上になります。

 

ここまで、読んでいただきありがとうございました！