AFFINGER6

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

AFFINGER6
悩んでいる人
AFFINGER6は機能が豊富と聞き導入してみたんだけど、トップページのカスタマイズで手こずっている。お勧めのカスタマイズ方法とかあったら教えてほしいな。

 

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

 

記事の内容

  • AFFINGER6について
  • ヘッダーカードの設置方法
  • おすすめ記事の設置方法
  • 新着記事の設置方法

 

プロフィール

プロフィール

よっしー(@yosshiblog

この記事を書いている僕はブログ歴1年3か月の高卒ブロガーです。1つ目の超特化ブログで月間1万PVを継続しています。

 

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

 

当サイトのトップページ

当サイトのトップページ

 

  1. ヘッダーカード
  2. おすすめ記事
  3. 新着記事

 

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

 

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

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

 

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

AFFINGER6をさっそく導入したい方は、3ステップで分かりやすく解説をしているのでこちらの「AFFINGER6の導入方法」からご覧ください。

では、早速行きましょう!
yosshi

 

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

 

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

1つ目のブログの検索順位

1つ目のブログの検索順位

 

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

 

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

 

  • デザインが自由自在
  • カスタマイズが豊富
  • 表示速度が速い
  • SEO内部対策が強い

 

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

 

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

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

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

  • アフィンガーを購入、ダウンロード
  • アフィンガーの導入、有効化
  • アフィンガーでの初期設定

 

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

アフィンガーに関しては、こちらの最強テーマAFFINGER6のレビュー【一番おすすめの有料テーマ】で詳しく解説をしているのでぜひ最後までご覧ください。

上記事を見ることでAFFINGER6の優秀さが分かるので、気になる方は見て損はないです
yosshi

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

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

 

  1. ヘッダーカード
  2. おすすめ記事
  3. 新着記事

 

順に解説をします。

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

ヘッダーカード

ヘッダーカード

 

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

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

 

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

 

ヘッダーカード

 

  1. 画像のURL
  2. テキスト
  3. サブテキスト
  4. リンク先URL

 

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

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

 

ヘッダーカードの設定

ヘッダーカードの設定

 

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

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

 

ヘッダーカードの反映確認

ヘッダーカードの反映確認

 

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

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

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

 

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

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

ヘッダーカードのデザイン設定

ヘッダーカードのデザイン設定

  • テキストのある背景画面を暗くする
  • 角丸にする

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

 

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

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

 

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

おすすめ記事

おすすめ記事

 

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

step
1
固定ページ作成

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

 

固定ページの追加

固定ページの追加

 

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

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

 

タイトルとおすすめ記事

タイトルとおすすめ記事

 

step
2
ボックスの設置

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

 

おすすめ記事設定

おすすめ記事設定

 

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

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

 

バナー風ボックス

バナー風ボックス

 

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

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

 

バナー風ボックス

バナー風ボックス

 

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

 

タイトルと画像の入力

タイトルと画像の入力

 

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

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

 

画像のコピー

画像のコピー

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

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

 

画像の確認

画像の確認

 

問題なさそうですね。

 

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

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

 

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

 

抜粋設定

抜粋設定

 

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

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

 

step
3
記事の挿入

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

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

 

カードを入力

カードを入力

 

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

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

 

カード作成

カード作成

記事のID

記事のID

記事のID

記事のID

 

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

 

カードの反映確認

カードの反映確認

 

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

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

 

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

おすすめ記事の完成

おすすめ記事の完成

 

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

 

ステップ③:新着記事

 

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

新着記事はAFFINGER管理やウィジェット、投稿画面から設置が可能ですが、先ほどは投稿画面からおすすめ記事を設置したので、新着記事も同じ投稿画面から設置をしていきます。

 

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

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

 

新着記事の設定

新着記事の設定

 

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

 

新着記事

新着記事

 

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

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

 

ホームページ設定

 

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

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

 

ホームページ設定

ホームページ設定

 

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

 

反映確認

反映確認

  1. ヘッダーカード
  2. おすすめ記事
  3. 新着記事

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

 

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

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

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

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

 

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

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

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

  • この記事を書いた人

yosshi

ブラックなサイト運営を解説しています。
【経歴】高卒で大手企業に就職▶︎2サイト運営▶︎今のSEOで正攻法では戦えないと気づく▶︎中古ドメインとInstagram運用
インフルエンサーを信じるなっ
とにかく被リンク獲得せいっ
ブロガー界隈は闇が深いでっ

-AFFINGER6