AFFINGERでトップページをカスタマイズする方法を紹介！

悩む人

AFFINGERでトップページのカスタマイズをしたいな...。カテゴリを２分割に分けて表示させたり、カッコよく見せるにはどうやって設定していいか分からないので教えてほしいです。

こんな悩みに答えます。

本記事の執筆者

当ブログでは、WordPressの基本的な設定方法からアフィリエイトに関する役立つ情報を発信しています。（WordPressテーマAFFINGERの使用歴３年以上です）現在では、Webディレクターとして８年間働いており月５桁稼いでいます。

本記事ではこんな方におすすめ

AFFINGERのトップページをかっよく見せたい！
機能がたくさんあるのでまずはAFFINGERのトップページだけでもカスタマイズ方法だけでも覚えたい

WordPressテーマのAFFINGERに変えたら、ブログの顔となるTOPページをカッコ良く見せたいと思いますよね。

ただ、AFFINGERはカスタマイズができるメリットがある一方で、機能が多く使い慣れていないと操作方法に悩んでしまうのが本音ではないでしょうか。

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

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

AFFINGERトップページのバナー風ボックス

まずはAFFINGERトップページにバナー風ボックスを設置する方法を紹介します。

最終的な完成形

手順は以下の通りです。

２分割のレイアウト設定
バナーリンクの挿入
記事の設定

1. ２分割のレイアウト設定

まずは、お使いのWordPress管理画面を開きまして、「AFFINGER管理」→「トップページ」をクリックします。

トップページの画面になりましたら、以下の手順でバナー風ボックスを追加していきます。

ツールバー切り替えをクリック。
『タグ』→『レイアウト』→『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」「タイトル」「タイトルの背景画像」をそれぞれ入力していきます。

リンク先URL：st-flexbox url
タイトル：title
タイトルの背景画像：backgroud_image

『リンク先URL』『タイトル』『タイトルの背景画像』をいれるには、以下のようにクォーテーションマークの中に必要な情報を入れていきます。

リンク先URLを入れる場合

st-flexbox url=""　→　st-flexbox url="https://www.keiblog0815.com/"

タイトルを入れる場合

title=""　→　title="タイトル"

タイトルの背景画像を入れる場合

backgroud_image="" 　→　backgroud_image="https://www.keiblog0815.com/..."

画像のURLは「メディアを追加」ボタンをクリックして、メディアのライブラリから取得できます。

コピーができましたら「backgroud_image=""」のダブルクォーテーションの中にコピーしたURLをペーストして、「save」ボタンをクリックすればOKです。

画像のURLをそのままコピー&ペーストすると、うまく反映されない場合があります。うまく表示されない場合は「テキスト」タブをクリックして「<img src=」「/>」をそれぞれ削除しましょう。

3. 記事の設定

バナー風ボックの設定ができましたら、続いてバナー風ボックス下に『ブログカード』を追加する方法です。

ブログカードを追加するには「カード」をクリックしてタグを追加できます。

以下のコードをコピーして使うこともOKです。

 command
[st-card myclass="" id="ここに記事IDを入れる" label="" pc_height="" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""]

「id="" 」のクォーテーションマークの間に表示させたい記事のIDをいれます。
「readmore="on"」→「readmore="off"」に変更。

上記の設定ができましたら、「save」ボタンを忘れずにクリックしたら完了です。

なお、記事の「id」の取得方法はWordPress管理画面から「投稿」→「投稿一覧」を開いて記事一覧の右にあるIDから取得できます。

最後に右側のブルー箇所にも同じように、入れたい数だけブログカードをいれて完了です。

AFFINGERトップページヘッダーカード

AFFINGERには上記のように、ヘッダーカードを表示させる方法があります。

ヘッダーカードは画像を表示させることができ、リンクとタイトルを置くことができます。

ヘッダーカードは、バナー風ボックスと同じように「AFFINGER管理」から編集できます。

「AFFINGER5 → AFFINGER5管理 → おすすめ記事一覧 → おすすめのヘッダーカード」

ヘッダーカードの表示方法については。以下記事で詳しく紹介していますのでご覧ください。

: AFFINGERでヘッダーカードを設定・カスタマイズする方法【５分で設定完了】

続きを見る

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

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

当ブログでは、トップページ以外にもAFFINGERでできるカスタマイズ方法をいろいろ紹介しています！もし興味のあるカスタマイズがありましたら、以下もぜひ参考にしてみてください！