【AFFINGER5】トップページのデザイン・カスタマイズ設定方法を攻略

あき

AFFINGER5でのトップページの設定方法が分からない
AFFINGER5でのトップページのカスタマイズ方法分からない
あきブログのトップページ真似したい

こんな悩みを解決します。

サイトの中で一番開かれるページである「トップページ」

トップページが見辛かったり、しょぼいとサイトからユーザーが離脱してしまう可能性が。

そうならないためにも見やすくオシャレなトップページを作るように心がけましょう。

AFFINGER5（アフィンガー5）ならトップページを簡単にオシャレに作成することができます。

本記事ではAFFINGER5でのトップページカスタマイズ方法を解説した後、「あきブログ」のトップページの作り方を画像を使って分かりやすく紹介。

この記事を読めば「あきブログ」と同じトップページを作ることができます。

【AFFINGER5】トップページカスタマイズ方法

AFFINGER5でのブログカードのカスタマイズ方法は2種類の設定画面があります。

「AFFINGER5管理」は固定ページ設定や挿入コンテンツ設定、「カスタマイズ設定」は色や背景画像を変更できます。

では、カスタマイズ方法について詳しく説明します。

AFFINGER5管理

AFFINGER5管理では固定ページ設定や挿入コンテンツ設定ができます。

WordPress管理画面より「AFFINGER5管理」→「トップページ」です。

ここでの設定項目は3箇所。

またトップページの表示を

に書きます。

固定ページをトップページとするならIDを調べて記入します。

WordPress管理画面の「固定ページ」をクリックすると右側にIDが表示されるので、ブログカードにしたいページのIDを覚えて、画像のように入力しましょう。

ちなみに私と同じ設定にしたい場合は以下（画像も参照）のように設定してください。

では設定項目について簡単に説明します。

記事一覧

表示する新着記事の種類や数を設定できます。

具体的には以下の新着記事に対する設定が可能。

後ほど解説しますが、スライドショーを使った新着記事を表示させています。理由としてはこれらの設定で新着記事を表示するデザインが気に入らないから。

あき

自分の好きなデザインを作るために新着記事はスライドショーを用いてるよ！

NEWS（お知らせ）の表示

お知らせバーの設定ができます。

具体的には以下のお知らせに対する設定が可能。

実際に設定してみると画像のように表示されます。

YouTube背景

YouTubeの背景表示を設定できます。

ただじ、私は1000人以上のブロガーさんのトップページを見てきましたが、誰も背景にYouTubeを流すブロガーさんはいませんでした。YouTubeを流す必要がないことや、ページの表示速度が重くなってしまうからでしょう。

個人的には推奨しませんが、どうしても流したい場合は設定してください。

カスタマイズ設定

カスタマイズではトップページの色や背景画像を変更できます。

WordPress管理画面より「外観」→「カスタマイズ」です。

上のような画面が表示されたら、「基本エリア設定」→「mainエリア（記事）」に進んでください。

ここでは以下の設定ができます。

背景を単色ではなく、画像を挿入することが可能。

画像の位置の調整もできます。

上の画像を参考にトップページのカスタマイズを決めてください。

画像の設定は「あきブログ」のものです。

【AFFINGER5】あきブログのトップページ作り方

画像はあきブログで左がPC表示、右がスマホ表示です。

あきブログのトップページは2つの構成要素でできています。

また、トップページは固定ページより作成。

まずはワードプレス管理画面の「固定ページ」→「新規追加」をクリックしてください。

画像のようにタイトルや見出しを設定しましょう。

では各構成要素の作り方について解説していきます。

新着記事（スライドショー）

新着記事はスライドショーで表示することにより目立たせてます。

また、表示幅に合わせてPCは3記事、スマホは2記事を表示。

 html
[st-catgroup cat="0" page="6" order="desc" orderby="id" child="off"
slide="on" slides_to_show="3,3,2" slide_date="off" fullsize_type="text" slide_more=""]

また、「タグ」→「記事一覧」→「カテゴリー一覧(スライドショー)」から上記のコードを使うことができます。

設定はカテゴリーによらずに最新6記事を、アイキャッチ画像とタイトルのみ表示させてます。

スライドショーの詳細な設定方法に関してはこちらの記事で解説してるので参考にしてください。自分なりのカスタマイズをすることができます。

カテゴリー別人気（ブログカード）

続いてカテゴリー別人気記事を作成していきます。

ちなみに完成は図のような感じになります。

あき

すごい難しそう...

安心してください、順番に解説していきます！

あき

step
12列の表示設定

「タグ」→「レイアウト」→「PCとTab(959px以上)」→「左右50％」からコードを挿入。

黄色が左側、水色が右側に表示されます。ただし、スマホで見た場合は1列で表示（見出しの画像参考）するように設定されてます。

step
2バナー風ボックス

続いて次のようなバナー風ボックスを設定します。

（クリックするとリンク先に移動します）

「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」からコードを挿入します。

下のコードの一部をコピーして書き換えても使用することも可能。

 html
[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をコピーしてね

特に黄色マーカーを自分好みにカスタマイズしてください。もちろんサイズ等も設定可能ですが、自分で設定するとバランスが悪くなる可能性があるので、確認しながら設定してください。

step
3ブログカード

続いて次のようなブログカードも挿入します。

「カード」からコードを挿入します。

下のコードの一部をコピーして書き換えても使用することができます。

 html
[st-card myclass="" id=記事ID label="" pc_height="" name="" bgcolor=""
color="" fontawesome="" readmore="デフォルトはonだがoffに"]

黄色マーカーを自分好みにカスタマイズしてください。

ブログカードの詳細な設定方法に関してはこちらの記事で解説してるので参考にしてください。

step
4ボタン

最後にボタンを配置します。

「タグ」→「カスタムボタン」→「ミニ」→「基本」からコードを挿入します。

下のコードの一部をコピーして書き換えても使用することができます。

 html
[st-mybutton-mini url="リンク先" title="タイトル" rel="" fontawesome="" target="" color="文字色"
bgcolor="背景色" bgcolor_top="" bordercolor="" borderwidth="" borderradius="3" fontsize=""
fontweight="" fontawesome_after="" shadow="#BDBDBD" ref=""]

黄色マーカーを自分好みにカスタマイズしてください。

ボタンを中央揃いにしたらいい感じに設置されます。

ここまで終えると上記のように表示されているはずです。これで1カテゴリー完成しました！

ここからはお好みでブログカードの数を増やしたり、各カテゴリーを作成していきましょう。

あき

お疲れさまでした！

トップページカスタマイズ注意事項

おしゃれで見やすいトップページにするためにカスタマイズに関して注意事項が2つあります。

アイキャッチ画像のサイズを揃える

アイキャッチ画像のサイズを統一しておきましょう。

統一しないと、紹介した「カテゴリー別人気」でブログカードの大きさがバラバラになってしまいます。

推奨アイキャッチ画像のサイズは横幅1200px以上です。

この理由はGoogleが1200px以上を推奨しているから。

高画質でサイズの大きい画像（幅が 1,200 ピクセル以上）を使用します。

引用：Google Discover

また、画像の横幅と縦幅の比は16：9が見やすくてオススメです。

あき

あきブログの画像は基本1,200px × 675pxにしてるよ！

ブログで使う画像についての注意事項や、画像サイズの揃え方などをこちらの記事にまとめました。

記事を載せすぎない

たくさんの記事をトップページに載せてしまうと、どの記事がオススメなのか伝わりません。なので目安として、トップページで表示させる記事の数は多くても20記事にしましょう。

情報の詰めすぎは、読者を混乱させてしまうからです。

例えばこんな2記事があったとしましょう。

• 春に旅行に行きたい100選
• 春に旅行に行きたい5選

この2記事から旅行先の選びやすさは5選の方です。

100選は情報を知るのにはオススメですが、選択肢が多すぎて選びにくくなります。

記事数でも同じことが言えます。記事の載せすぎは読者の混乱を招くので気をつけましょう。

トップページデザインについてはこちらの記事も参考にしてください。

【AFFINGER5】トップページカスタマイズ設定まとめ

AFFINGER5でのトップページの詳しい設定方法を解説しました。

また、私の「あきブログ」のトップページの作り方をご紹介しました。

デザイン性が高いAFFINGER5で、自分好みのトップページをカスタマイズしてみてください。また、私のトップページカスタマイズ設定も参考にしてみてください。

読者目線で見やすいサイトを意識しつつ、自分好みのトップページを作ってブログを楽しみましょう。

また、他に役に立つAFFINGER5に関する記事は下記にまとめていますので、ご活用下さい。

AFFINGER5記事一覧