こんな悩みを解決します。
記事の内容
- AFFINGER6について
- ヘッダーカードの設置方法
- おすすめ記事の設置方法
- 新着記事の設置方法
プロフィール
よっしー（@yosshiblog）
この記事を書いている僕はブログ歴１年３か月の高卒ブロガーです。1つ目の超特化ブログで月間1万ＰＶを継続しています。
当サイトのトップページは、以下のようになっています。
当サイトのトップページ
- ヘッダーカード
- おすすめ記事
- 新着記事
どうでしょうか。割ときれいにまとめられていると思います。
AFFINGER6ではこのようなトップページ設定簡単にすることが出来ますし、またCSSコードでこだわれば凝ったデザインにすることが出来ます。
今回は、簡単に出来る当サイトのトップページの作り方をそのままお伝えしますのでぜひ最後までご覧ください。
本記事の最後の方には、正しく表示されない時の対処法などもご紹介します。
AFFINGER6をさっそく導入したい方は、３ステップで分かりやすく解説をしているのでこちらの「AFFINGER6の導入方法」からご覧ください。
AFFINGER6のカスタマイズ前にすること：宣伝です
AFFINGER6は有料サイトの中でも特に優秀なテーマで、筆者も１つ目のブログでAFFINGER6を採用したら検索１位の記事を量産しました。
1つ目のブログの検索順位
AFFINGER6を採用したタイミングで記事が評価され始めた可能性もありますが、正直AFFINGER6を使っていなかったらここまで上位表示記事を量産することはできなかったでしょう。
AFFINGER6のメリットは、以下の通り。
- デザインが自由自在
- カスタマイズが豊富
- 表示速度が速い
- SEO内部対策が強い
他にも様々なメリットがあり、とても優秀なテーマですね。
また個人で稼いでいる有名ブロガーは、アフィンガーを使っていることが多いです。
どの方も有名なブロガーさんで、特に「マナブさん」と「トーマスガジェマガさん」はYouTubeでもよく見かける有名な方ですね。
カスタマイズ前に、まだAFFINGER6を導入していない方は以下のように導入をしてください。
- アフィンガーを購入、ダウンロード
- アフィンガーの導入、有効化
- アフィンガーでの初期設定
アフィンガーは、導入から初期設定まで１時間かからないくらいで完了するので、有料テーマ導入を考えている人は一度AFFINGER6を検討してみてください。
アフィンガーに関しては、こちらの最強テーマAFFINGER6のレビュー【一番おすすめの有料テーマ】で詳しく解説をしているのでぜひ最後までご覧ください。
トップページのカスタマイズ方法３ステップ
トップページのカスタマイズ方法は、以下の通り。
- ヘッダーカード
- おすすめ記事
- 新着記事
順に解説をします。
ステップ①：ヘッダーカード
ヘッダーカード
まずは、ヘッダーカードを設置していきましょう。
このヘッダーカードは人それぞれですが、当サイトでは特におすすめの４つの記事を掲載しています。
「AFFINGER管理」→「ヘッダー下/おすすめ」をクリックすると、ヘッダーカード設定画面が表示されます。
- 画像のURL
- テキスト
- サブテキスト
- リンク先URL
上記の４つを入力していってください。
※サブテキストは好みで入力してください。
ヘッダーカードの設定
入力が完了したら、「save」をクリック。
しっかりと反映されているかを確認していきます。
ヘッダーカードの反映確認
しっかりと反映されていますね。
この調子で、残りの３つを設置していきましょう。
※まだ記事を作成していない方は、記事を書いてから設置をしましょう。
４つとも設置が完了したら、少しデザインを変えてみましょう。
先ほどのヘッダーカード設定画面に戻って、下の方にスクロールをすると以下のような設定があります。
ヘッダーカードのデザイン設定
- テキストのある背景画面を暗くする
- 角丸にする
当サイトでは上記の２つにチェック入れています。
へーっだ―カードが暗くなる設定ですが、ヘッダーカードにカーソルを置くと明るくなるという仕様です。
好みのデザインに設定をしていきましょう。
ステップ②：おすすめ記事
おすすめ記事
おすすめ記事は肯定が少し多いので、ステップ分けして解説します。
step
1固定ページ作成
まずは、固定ページから新規追加をしてください。
固定ページの追加
固定ページの投稿画面に移動したら、タイトルに「トップページ」と入力しましょう。
また本文に「おすすめ記事」と書いて、見出し３に設定をしてください。
タイトルとおすすめ記事
step
2ボックスの設置
「タグ」→「レイアウト」→「PCとTab」→「左右５０％」を選択してください。
おすすめ記事設定
次にバナー風ボックスを設置していきます。
バナー風ボックスは、以下の画像のようにジャンルを示す部分となります。
バナー風ボックス
先ほど追加したレイアウトの中にバナー風ボックスを追加していきます。
黄色側の「このテキストは最後に消して下さい（50%）」の下にカーソルを置いて、「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」の順に選択。
バナー風ボックス
以下のようなコードが表示されるので、タイトルと画像を入力していきましょう。
タイトルと画像の入力
画像に関しては、Wordpressに画像を追加してURLをコピペしないといけません。
メディアの追加から画像をアップロードして、URLをコピペしてください。
画像のコピー
※画像をすべてコピーをしてペーストをすると正しく表示されないので、最後の１文字だけを残してコピーをしつつペーストした後に最後の１文字を入力します。
入力が完了したら、いったんプレビューで反映確認をしましょう。
画像の確認
問題なさそうですね。
次のステップで、ブログカードで記事を挿入していきますが先にAFINGER設定をします。
そのままブログカードを設置してしまうと、本文も載ってしまうので非表示設定していきます。
「AFFINGER6管理」→「全体設定」→「抜粋設定」から以下の欄にチェックを入れてください。
抜粋設定
チェックを入れたら、「save」をクリック。
※ブログカードで本文が表示されてしまうとクリック率が下がってしまう可能性が高いので、このチェックは必ずしましょう
step
3記事の挿入
おすすめ記事のタイトル部分は完成しているので、記事を挿入していきます。
先ほどのバナー風ボックスの下に、デフォルトで表示されている「カード」を選択してください。
カードを入力
以下のようなコードが表示されるので、記事のIDを入力してください。
記事のIDは投稿一覧画面でも確認できますし、記事を開いたときの上に表示されています。
カード作成
記事のID
記事のID
入力が完了したら、プレビューをクリックして反映確認をしていきましょう。
カードの反映確認
しっかりと反映されてしますね。
この工程をあと３回行っていきます。
完成したら、以下の通りになります。
おすすめ記事の完成
これでおすすめ記事の設置は完了です。
ステップ③：新着記事
最後に新着記事を設置していきます。
新着記事はAFFINGER管理やウィジェット、投稿画面から設置が可能ですが、先ほどは投稿画面からおすすめ記事を設置したので、新着記事も同じ投稿画面から設置をしていきます。
まずは、先ほどと同じように「新着記事」と入力して、見出し３に設定します。
表示方法手順はとても簡単で、「タグ」→「記事一覧/カード」→「カテゴリ一覧」をクリックするだけで完了です。
新着記事の設定
入力が完了したら、実際にプレビューから反映確認をしましょう。
新着記事
これでトップページの設置は完了です。
次に、この固定ページをトップページに表示させる設定をしていきます。
ホームページ設定
先ほど作った固定ページを、ホームページに設定していきましょう。
「外観」→「カスタマイズ」→「ホームページ設定」の順に選択して、先ほど作成した固定ページ
ホームページ設定
最後に自分のサイトを開いて、固定ページがホームページに設定されているかを確認しましょう。
反映確認
- ヘッダーカード
- おすすめ記事
- 新着記事
しっかりと反映されていますね。これでトップページの設定が完了します。
まとめ：トップページで回遊率を上げていきましょう！
今回は、「AFFINGER6でのトップページの作り方」のついて解説をしました。
ブログのトップページは印象を与える大事な設定です。
AFFINGER6では色々な機能やデザインがあるので、様々なトップページを作ることが出来ます。
今回は、当サイトのトップページを紹介しましたが、ブログ運営をしていくうえで自分なりにデザインやカスタマイズを変更していってください。
