[コピーOK]AFFINGER6でトップページをカスタマイズする手順

AFFINGER6のトップページをカスタマイズしたいんだけど、どうやったらいいの？カスタマイズ方法を教えて！

このような疑問にお答えします。

AFFINGER6は簡単にトップページをカスタマイズできる点が非常に優秀で、数々のブロガーに愛されてきました。

しかし、実はブログ初心者にとっては少しカスタマイズが難しいです。。。

ということで今回は、初心者でも簡単にカスタマイズできるよう、当サイトのトップページを基に解説しますね。

一度当サイトを真似することで、カスタマイズ方法を理解することが狙いです。

そのまま使ってもいいですし、そこからさらにアレンジしてもOKですよ。

kazuki

※当サイト経由でAFFINGER6を購入すると、限定特典として9点を無料プレゼントします。

AFFINGER6(アフィンガー)トップページのイメージ

まずは当サイトのトップページをご覧ください。

上記は画像ですが、リアルを見たい人はトップページをクリックしてください。（※2021年1月にトップページを変更しました）

今回はこのトップページの作り方を解説していきますね。

AFFINGER6(アフィンガー)トップページのカスタマイズ手順

当サイトを作るためには、下記8つの手順を行う必要があります。

多いように見えますが、それぞれ簡単な作業ばかりなのですぐに終わります。

それでは一つずつ解説していきますね。

１．ヘッダーの作り方

ヘッダーとは下記、赤枠の部分。

当サイトでは画像を使わず、タイトルとサイト紹介、メニューバーのみで作成しています。

まずはタイトルとサイト紹介について。下記の通り、WordPress管理画面から「設定」→「一般」の順にクリックしてください。

こちらでサイトタイトル、キャッチフレーズを編集できます。また、このままでは左側にタイトルとキャッチフレーズが表示されてしまうので、中央に寄せます。

下記の通り、WordPress管理画面から「AFFINGER6管理」→「ヘッダー」の順にクリックしていただき、「ヘッダー設定」を探してください。（※画像はAFFINGER5のものですが、内容は同じです）

そこで下記2点にチェック。

これでタイトルとキャッチフレーズが中央に寄りました。

続いてはメニューバーの編集です。下記の通り、WordPress管理画面から「外観」→「メニュー」の順でクリックしてください。

こちらでヘッダーメニューを編集できます。

プロフィールを作成するのか？Twitterをリンクさせるのか？お好みでOKです。

２．ヘッダーのカード型リンクの作り方

ヘッダーのカード型リンクとは、下記画像の赤枠部分。

まずは下記の通り、WordPress管理画面から「AFFINGER6管理」→「おすすめ記事一覧」の順にクリックしてください。（※画像はAFFINGER5のものですが、内容は同じです）

その中の「おすすめヘッダーカード」で、カード型リンクを作成します。下記の通り、「おすすめヘッダーカード」が出てくるまでスクロールしてください。

ここでは下記3点を編集してください。

設定が終わりましたら最後に「SAVE」です。これでカード型のリンクが完成しました。

4枚じゃなく、2枚でも表示できます。お好みで設定しよう！

kazuki

３．新着記事(スライドショー)の作り方

新着記事(スライドショー)とは、下記画像の赤枠部分。

こちらは先ほどとは違い、固定ページで作ります。まずは下記の通り、WordPress管理画面から「固定ページ」へアクセスしてください。

そこで、タイトルを"トップページ"、見出しをh3で"新着記事"と入力してください。画像で見ると下記の通りです。

そこから、「タグ」→「記事一覧」→「カテゴリー一覧」の順にクリックしていただき、ショートコードを出力します。下記の赤枠をクリックすればショートコードが出力されます。

ショートコードには下記のように一つ一つ意味があります。

これは覚えなくてもOK。スクショでも取っておいたら後で見返せます。

ちなみに、出力したショートコードを、当サイトでは少しだけ編集しています。

すると、こんな感じで表示されます。

2021/10/17

【収益公開】ブログを1年続けたら月6万稼げた話【方法も解説する】

ブログを１年続けると稼げるのか知りたくないですか？本記事では実際に僕が運営しているブログが１年経ちましたので、現在のPV数と収益を公開したいと思います。本記事を読めばブログ１年で稼げるのか知ることができますよ。

続きを読む

2021/7/17

Shutterstock(シャッターストック)を無料で使う方法【注意点も解説】

Shutterstockを無料で使う方法を知っていますか？結構有名な方法ですが知らないという方のために、無料で使う方法を画像付きで詳しく解説します。Shutterstockを無料で使う方法を知りたい方は必見です。

続きを読む

2021/6/18

【unDrawの使い方】無料でおしゃれなイラスト画像サイトを徹底解説

undrawの使い方をご存知ですか？undrawは英語表記なので、英語ができない方は使い方がわからないですよね。ということで今回はundrawの使い方を徹底的に解説します。undrawの使い方がわからない方は必見です。

続きを読む

2021/10/18

【単価比較】ebookjapanのアフィリエイトができるASP【稼ぐコツも解説】

ebookjapanのアフィリエイトができるASPを知りたいとは思いませんか？本記事では報酬単価の高いASPやebookjapanのアフィリエイトで稼ぐコツについて解説します。ebookjapanのアフィリエイトを始めたい方は必見です。

続きを読む

2021/10/18

【単価比較】hontoのアフィリエイトができるASP【稼ぐコツも解説】

hontoのアフィリエイトができるASPを知りたいですか？本記事では高単価なhontoの広告と提携できるASPについてと、稼ぐコツについて解説します。hontoのアフィリエイトで稼ぎたい方は必見です。

続きを読む

また、スライドショーについては、こちらの【超おしゃれ】アフィンガー6のスライドショーの設定方法と使い方でもまとめています。

使い方の注意点などをまとめているので、スライドショーについてさらに詳しく知ることができますよ。

４．おすすめ記事の作り方

おすすめ記事とは下記、赤枠の部分。

こちらも先ほどと同様に固定ページで作ります。まずはバナー風ボックスから。下記の赤枠の部分です。

新着記事(スライドショー)で使った固定ページで、見出しh3で「おすすめ記事」と入力してください。

そして、「タグ」→「レイアウト」→「PCとTab（959px以上）」→「左右50％」の順にクリック。画像で見ると下記の通りです。

すると、下記のように二つの列が作られます。

まずは左の黄色のボックスから編集します。

下記の通り、「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」の順でクリック。

すると、次のようにコードが出力されます。

同じように右側の青色のボックスもコードを出力。そして下記3点のコードを修正します。

当サイトでは次のようになります。

これでバナー風ボックスの完成。続いては、カードリンクの作成です。下記赤枠の部分ですね。

次のように、「カード」をクリックしてショートコードを出力してください。

そして、下記のようにコードを修正。

記事IDは自分がカード型にしたいものを入力してください。(WordPress管理画面から「投稿記事一覧」で確認できます)

ちなみに当サイトでは、ブログカードを3つずつ配置しています。多くても良くないので最大でも4枚までにしときましょう。

また、このブログカードは記事中でも内部リンクとして表示することができます。

さらに詳しく知りたい人は、こちらのアフィンガー6のブログカードの作り方。2秒で作れます。をどうぞ。

作り方や使う際の注意点など、ブログカードについて網羅的にまとめています。

５．ランキング機能の作り方

ランキング機能とは、下記画像の赤丸部分。

こちらは下記の通り、WordPress管理画面から「ランキング管理」をクリックすると設定できます。

こちらの設定は少し複雑ですが、一度設定を終わらせてしまえばショートコードを入力するだけでランキングを出力することができます。

検索順位チェックツールGRC

ブログの有料ツールの中でも絶対に導入しなければならないツールで有名です。

もし導入していないのであれば成功への道は大きく遠ざかること間違いなし。

まずは下記の詳細ページをどうぞ。

詳細ページはこちら

公式ページはこちら

こんな感じにね。

ランキングの作り方についてここで解説すると少し長くなるので、こちらのアフィンガー6のランキング作成手順を徹底解説をどうぞ。

作り方から使う際の注意点を詳しく解説しています。

６．サイト管理者紹介の作り方

サイト管理者紹介とは、下記の赤丸部分。

まずはWordPress管理画面から「外観」→「ウィジェット」をクリックしてください。

その中の、「11̠STINGERサイト管理者紹介」を「サイドバーウィジェット」に追加。画像で見ると下記の通りです。

また、当サイトのサイドバーは下記のように配置しています。

順番はお好みで入れ替えてOK。ドラッグすれば簡単に入れ替えることができます。

次に、WordPress管理画面から「ユーザー」→「プロフィール」の順にクリックしていただき、下にスクロール。

すると、下記画像のように「ニックネーム」を設定できる欄があります。

表示したい名前を入力しましょう。終わりましたらさらにスクロール。

すると、下記のようなプロフィール情報の編集欄があります。

簡単な自己紹介を入力してください。終わりましたら、最後に「保存」をクリック。

さて、続いてはWordPress管理画面から「外観」→「カスタマイズ」をクリック。

下記の通り、その中の「＋オプションカラー」をクリックしてください。

下にスクロールしていただくと「サイト管理者紹介」が見つかります。

そこで「プロフィールカードに変更」にチェックを入れ、「アバター画像」を挿入してください。

他にもカスタマイズできますが、ひとまずはこれでOK。

最後に「公開」をクリックしてください。

kazuki

これでサイト管理者紹介の設定が完了です！

７．よく読まれている記事の作り方

よく読まれている記事とは、下記画像の赤枠部分。

WordPress管理画面から「AFFINGER6管理」→「おすすめ記事一覧」をクリック。

その中の、「おすすめ記事一覧の作成」で設定することができます。画像で見ると下記の通りです。

これでよく読まれている記事の作成は完了です。

kazuki

記事は3～5つくらいに。多すぎると見栄えが悪いです！

８．フッターの作り方

フッターとは、下記画像の赤丸部分。

ヘッダーの作り方と同じで、WordPress管理画面から「外観」→「メニュー」の順でクリックしてください。

編集するメニューをフッターに変更。

何を表示させたいかはお好みでOKです。

kazuki

以上、AFFINGER6トップページのカスタマイズ手順でした。

ただ、これではまだデフォルトの青色のまま。続いてはフォントのカスタマイズ手順を解説しますね。

AFFINGER6(アフィンガー)トップページのカスタマイズ手順(フォント編)

フォントのカスタマイズについては下記3点に分けて解説します。

それでは1つずつ解説していきます。

１．ヘッダーのフォントカスタマイズ

まずは下記画像の赤枠部分、ヘッダーのフォントをカスタマイズします。

まずはタイトルとキャッチフレーズのフォントカスタマイズから。

WordPress管理画面から「外観」→「カスタマイズ」をクリックしてください。

そこから「基本エリア設定」→「ヘッダーエリア」をクリック。

それぞれ下記のようにカスタマイズします。

続いてはメニューバーのフォントカスタマイズ。

カスタマイズ画面から「メニューのカラー設定」→「PCヘッダーメニュー」をクリック。

そこでメニューバーのフォントをカスタマイズします。

下記のようにカスタマイズしてください。

これでヘッダーのフォントカスタマイズが完了です。

kazuki

お疲れさまでした。続いてはサイドバーをカスタマイズしましょう！

２．サイドバーのフォントカスタマイズ

下記画像の赤枠部分をカスタマイズしていきます。

まずはカスタマイズ画面から、「基本エリア設定」→「サイドバー」をクリック。

下記画像のようにカスタマイズしてください。

続いて、「各テキストとhタグ(見出し)」→「ウィジェットタイトル(サイドバー)」をクリック。

下記画像のようにカスタマイズします。

これで当サイトと同じサイドバーのフォントにカスタマイズできました。

お疲れ様です！次で最後なので頑張りましょう。

kazuki

３．フッターのフォントカスタマイズ

下記画像の赤枠部分をカスタマイズしていきます。

カスタマイズ画面から「基本エリア設定」→「フッターエリア」をクリック。

下記画像のようにカスタマイズしていきます。

これで当サイトと同じフッターのフォントにカスタマイズできました。

以上でトップページカスタマイズの全工程が終了です。

このまま当サイトと同じトップページを使ってもいいですが、どこを触ればどのように変化するのか？すでに理解できているかと思います。

自分好みのトップページを作ることもできるはずですよ！

kazuki

さて、最後にトップページ以外のカスタマイズ手順を解説します。

AFFINGER6(アフィンガー)トップページ以外のカスタマイズ

トップページ以外のカスタマイズとしては下記2点。

1つずつ解説していきますね。

１．フォントサイズ・行間のカスタマイズ

WordPress管理画面から「AFFINGER6管理」→「デザイン」をクリックし、「フォントのサイズ」を見つけて下さい。

当サイトではそれぞれ、下記画像のようにカスタマイズしてます。

同じに設定してもOKですが、最後に「save」をクリックすることだけ忘れずに。

これでフォントサイズ・行間のカスタマイズが完了です。

２．各テキストとhタグのカスタマイズ

WordPress管理画面から「外観」→「カスタマイズ」→「＋各テキストとhタグ(見出し)」をクリック。

当サイトではそれぞれ、h2、h3をカスタマイズしています。

まずはh2から。下記画像のようにカスタマイズしてください。

続いてはh3です。

以上でトップページ以外のカスタマイズが完了です。お疲れさまでした。

kazuki

これでカスタマイズに関しては完璧です。次はじゃんじゃん記事を書いて収益化を目指しましょう！

まとめ：AFFINGER6(アフィンガー)トップページのカスタマイズ手順

本記事ではAFFINGER6を使ったトップページのカスタマイズ手順について解説しました。

当サイトをベースに解説しているので、解説した内容通り実行してただくと同じトップページが完成します。

このまま真似していただいてもいいですし、さらにアレンジしてもOK。

好きなようにカスタマイズしていきましょう！

kazuki

また、このようにAFFINGER6には便利な機能がたくさんあります。

他の機能も知りたい人や実際に利用している人の口コミ・評判を知りたい人は、個別でまとめた記事があるので参考にしてください。

気になるものがあれば読んでみてください。

それでは今日はこのへんで。グッバーイ