【WordPress】AFFINGER6のトップページのカスタマイズ方法３ステップ

 

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

 

記事の内容

 

プロフィール

よっしー（@yosshiblog）

 

当サイトのトップページは、以下のようになっています。

 

 

 

どうでしょうか。割ときれいにまとめられていると思います。

 

AFFINGER6ではこのようなトップページ設定簡単にすることが出来ますし、またCSSコードでこだわれば凝ったデザインにすることが出来ます。

今回は、簡単に出来る当サイトのトップページの作り方をそのままお伝えしますのでぜひ最後までご覧ください。

 

本記事の最後の方には、正しく表示されない時の対処法などもご紹介します。

 

AFFINGER6のカスタマイズ前にすること：宣伝です

 

AFFINGER6は有料サイトの中でも特に優秀なテーマで、筆者も１つ目のブログでAFFINGER6を採用したら検索１位の記事を量産しました。

 

AFFINGER6を採用したタイミングで記事が評価され始めた可能性もありますが、正直AFFINGER6を使っていなかったらここまで上位表示記事を量産することはできなかったでしょう。

 

AFFINGER6のメリットは、以下の通り。

 

 

他にも様々なメリットがあり、とても優秀なテーマですね。

 

また個人で稼いでいる有名ブロガーは、アフィンガーを使っていることが多いです。

• マナブさん
• tsuzukiさん
• トーマスガジェマガさん

どの方も有名なブロガーさんで、特に「マナブさん」と「トーマスガジェマガさん」はYouTubeでもよく見かける有名な方ですね。

カスタマイズ前に、まだAFFINGER6を導入していない方は以下のように導入をしてください。

 

アフィンガーは、導入から初期設定まで１時間かからないくらいで完了するので、有料テーマ導入を考えている人は一度AFFINGER6を検討してみてください。

トップページのカスタマイズ方法３ステップ

トップページのカスタマイズ方法は、以下の通り。

 

 

順に解説をします。

ステップ①：ヘッダーカード

 

まずは、ヘッダーカードを設置していきましょう。

このヘッダーカードは人それぞれですが、当サイトでは特におすすめの４つの記事を掲載しています。

 

「AFFINGER管理」→「ヘッダー下/おすすめ」をクリックすると、ヘッダーカード設定画面が表示されます。

 

 

 

上記の４つを入力していってください。

※サブテキストは好みで入力してください。

 

 

入力が完了したら、「save」をクリック。

しっかりと反映されているかを確認していきます。

 

 

しっかりと反映されていますね。

この調子で、残りの３つを設置していきましょう。

※まだ記事を作成していない方は、記事を書いてから設置をしましょう。

 

４つとも設置が完了したら、少しデザインを変えてみましょう。

先ほどのヘッダーカード設定画面に戻って、下の方にスクロールをすると以下のような設定があります。

当サイトでは上記の２つにチェック入れています。

 

へーっだ―カードが暗くなる設定ですが、ヘッダーカードにカーソルを置くと明るくなるという仕様です。

好みのデザインに設定をしていきましょう。

 

ステップ②：おすすめ記事

 

おすすめ記事は肯定が少し多いので、ステップ分けして解説します。

step
1固定ページ作成

まずは、固定ページから新規追加をしてください。

 

 

固定ページの投稿画面に移動したら、タイトルに「トップページ」と入力しましょう。

また本文に「おすすめ記事」と書いて、見出し３に設定をしてください。

 

 

step
2ボックスの設置

「タグ」→「レイアウト」→「PCとTab」→「左右５０％」を選択してください。

 

 

次にバナー風ボックスを設置していきます。

バナー風ボックスは、以下の画像のようにジャンルを示す部分となります。

 

 

先ほど追加したレイアウトの中にバナー風ボックスを追加していきます。

黄色側の「このテキストは最後に消して下さい（50%）」の下にカーソルを置いて、「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」の順に選択。

 

 

以下のようなコードが表示されるので、タイトルと画像を入力していきましょう。

 

 

画像に関しては、Wordpressに画像を追加してURLをコピペしないといけません。

メディアの追加から画像をアップロードして、URLをコピペしてください。

 

※画像をすべてコピーをしてペーストをすると正しく表示されないので、最後の１文字だけを残してコピーをしつつペーストした後に最後の１文字を入力します。

入力が完了したら、いったんプレビューで反映確認をしましょう。

 

 

問題なさそうですね。

 

次のステップで、ブログカードで記事を挿入していきますが先にAFINGER設定をします。

そのままブログカードを設置してしまうと、本文も載ってしまうので非表示設定していきます。

 

「AFFINGER6管理」→「全体設定」→「抜粋設定」から以下の欄にチェックを入れてください。

 

 

チェックを入れたら、「save」をクリック。

※ブログカードで本文が表示されてしまうとクリック率が下がってしまう可能性が高いので、このチェックは必ずしましょう

 

step
3記事の挿入

おすすめ記事のタイトル部分は完成しているので、記事を挿入していきます。

先ほどのバナー風ボックスの下に、デフォルトで表示されている「カード」を選択してください。

 

 

以下のようなコードが表示されるので、記事のIDを入力してください。

記事のIDは投稿一覧画面でも確認できますし、記事を開いたときの上に表示されています。

 

 

入力が完了したら、プレビューをクリックして反映確認をしていきましょう。

 

 

しっかりと反映されてしますね。

この工程をあと３回行っていきます。

 

完成したら、以下の通りになります。

 

これでおすすめ記事の設置は完了です。

 

ステップ③：新着記事

 

最後に新着記事を設置していきます。

 

まずは、先ほどと同じように「新着記事」と入力して、見出し３に設定します。

表示方法手順はとても簡単で、「タグ」→「記事一覧/カード」→「カテゴリ一覧」をクリックするだけで完了です。

 

 

入力が完了したら、実際にプレビューから反映確認をしましょう。

 

 

これでトップページの設置は完了です。

次に、この固定ページをトップページに表示させる設定をしていきます。

 

ホームページ設定

 

先ほど作った固定ページを、ホームページに設定していきましょう。

「外観」→「カスタマイズ」→「ホームページ設定」の順に選択して、先ほど作成した固定ページ

 

 

最後に自分のサイトを開いて、固定ページがホームページに設定されているかを確認しましょう。

 

しっかりと反映されていますね。これでトップページの設定が完了します。

 

まとめ：トップページで回遊率を上げていきましょう！

今回は、「AFFINGER6でのトップページの作り方」のついて解説をしました。

ブログのトップページは印象を与える大事な設定です。

AFFINGER6では色々な機能やデザインがあるので、様々なトップページを作ることが出来ます。

 

今回は、当サイトのトップページを紹介しましたが、ブログ運営をしていくうえで自分なりにデザインやカスタマイズを変更していってください。

関連記事最強テーマAFFINGER6のレビュー【一番おすすめの有料テーマ】

関連記事WordPressの初期設定と固定ページの書き方【細かく解説】