こんなふうに悩んでいませんか。
せっかく有料テーマを買ったのですから、どうせならかっこいいおしゃれなデザインに仕上げたいですよね。
特に、サイトの顔となるトップページならなおさらです。
そこで、本記事では、アフィンガー5を使ったおしゃれなトップページのカスタマイズ方法について紹介します。
そのカスタマイズ法とは、このブログのトップページのようなカテゴリーごとに分けられたすっきりとした見やすいページです☟
本記事の内容に沿ってカスタマイズしていくだけで、上の画像のようなトップページが簡単にできますよ。
画像を28枚使って初心者でも分かるように丁寧に解説しているので、ぜひご覧ください！
＼期間限定キャンペーン開催中／
※一度購入するだけで使いまわしができる
アフィンガー5でトップページをおしゃれにカスタマイズする手順
カスタマイズしていくのは、上の画像の赤い四角で囲ったエリアです。
カスタマイズする手順は大きく分けて次の4ステップ！
step
1トップページを2分割する
step
2バナーリンクをつくる
step
3ブログカードを配置
step
4ボタンリンクを設置
ステップ1 トップページを2分割する
まずは、上の画像にようにトップページを2分割していきます。
「固定ページ ＞ 新規追加」で上の画面を表示します。
次に、「スタイル ＞ レイアウト ＞ PCとTab左右50％」を選択。
すると、上の画像のように黄色と青色の枠が現れます。
プレビューで見ると、上の画像のように表示されます。
トップページの2分割はこれで完了です。
ステップ2 バナーリンクをつくる
次に、上の画像の赤い四角で囲った部分のバナーリンクをつくります。
まずは、トップページの左側から編集していきます。
左側の黄色い枠内の「左側のコンテンツ50％」という文字を消し、「タグ ＞ ボックスデザイン ＞ バナー風ボックス ＞ 基本」を選択します。
すると、上の画像のようなコードが自動で書き込まれます。
上の画像の赤い四角で囲った3ヵ所を編集します。
- st-flexbox url="リンク先（カテゴリ一覧など）のURLを入力"
- title="バナーリンクのタイトルを入力"
- background_image="バナーリンクに使う画像のURLを入力"
これで上の図のようなバナーリンクが完成です。
ブログカードを配置
次に、上の画像の赤い四角で囲った部分「ブログカード」を設置していきます。
上の画像の赤い四角で囲った「カード」を選択します。
すると、青い四角で囲ったコードが自動で書き込まれます。
自動で書き込まれたコードを1ヵ所だけ編集します。
- st-card id=表示したい記事のidナンバーを入力
これでブログカードの設置は完了です。
あとは、ブログカードを設置したい数だけ同じ作業を繰り返します。
上の画像はブログカードを3つ設置した場合のプレビューです。
ステップ4 ボタンリンクを設置
最後にボタンリンクを設置します。
「タグ ＞ カスタムボタン ＞ ノーマル ＞ 詳しくはこちら（ブルー）」を選択します。
すると青い四角で囲ったコードが自動で書き込まれます。
編集するのは赤い四角で囲った3ヵ所だけ。
- st-mybutton url="リンク先（カテゴリ一覧など）のURLを入力"
- title="ボタンリンクのタイトルを入力"
- ref=""
これで、下の画像のとおりボタンリンクの設置までが一通り完了です☟
あとはトップページの右側も同じことを繰り返すだけで、カテゴリーごとに分けられたおしゃれなトップページが完成します☟
アフィンガー5でつくったトップページを微調整する方法
以上でトップページはひとまず完成なのですが、少し気になるところがあるので、そこを微調整して完璧なページに仕上げます。
出来上がったトップページをもう一度ご覧ください☟
まずは、赤い四角で囲った部分です。
この部分はブログカード間の幅に比べて、スペースが大きすぎてバランスが悪いです。（もう少しスペースを縮めたい）
そして、青い四角で囲った部分ですが、ブログカードのサイズが違うために横のラインが揃っていません。
トップページのスペースを微調整する方法
まずは、トップページのスペースを微調整する方法を紹介します。
最初に、バナーリンクのコードとブログカードのコードの間の余白を無くします。
次に、バナーリンクのコードとブログコードの間にカーソルを持ってきて、Shiftを押したままEnterを押します。
そうすると、上の画像のようにブログカードのコードが行を空けずに改行されます。
すると、上の画像の赤い四角のスペースが、ブログカード間のスペースと同じぐらいになってすっきりとしてきれいなデザインになります。
トップページの右側半分と比べると違いがよく分かりますよね。
同様に右側半分も同じ作業を繰り返します。
すると上の画像のようになります。
ブログカードのサイズを揃える方法
次に、ブログカードのサイズを揃える方法を紹介します。
方法はいたって簡単で、「アフィンガー管理 ＞ デザイン」を選択し、サムネイル画像設定で「サムネイル画像を大きくする（タブレット以上は1.5倍）」にチェックを入れます。
すると、上の画像のようにサムネイル画像が大きくなって、ブログカードのサイズがすべて均等になります。
これで、横のラインがすべて揃ってトップページは完璧です！
最後にちょっとした調整を加えるだけで、見た目が格段に良くなりますので、ぜひ挑戦してみてください。
【画像28枚】アフィンガー5でトップページをおしゃれにカスタマイズ｜まとめ
以上、「【画像28枚】アフィンガー5でトップページをおしゃれにカスタマイズ」でした。
これで新着記事が並ぶだけの味気ないトップページとはおさらばです。
それに、ブログを訪問した読者が利用しやすくなることで、直帰率や滞在時間が長くなる効果も期待できます。
簡単なので、ぜひ試してみてください！
＼期間限定キャンペーン開催中／
※一度購入するだけで使いまわしができる
こちらの記事も読まれています