[コピーOK]アフィンガー5でトップページをカスタマイズする手順

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

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

✔本記事の執筆者

Twitter：かずき(@k03mind)

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

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

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

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

kazuki

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

※本記事はすでにAFFINGER5を購入している人向けの記事です。もし、まだ購入されていないのであれば、下記の記事をどうぞ。

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

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

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

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

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

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

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

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

１．ヘッダーの作り方

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

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

まずはタイトルとサイト紹介について。

WordPress管理画面から「設定」→「一般」の順にクリックしてください。

こちらでサイトタイトル、キャッチフレーズを編集できます。

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

WordPress管理画面から「AFFINGER5管理」→「ヘッダー」の順にクリックしていただき、「ヘッダー設定」を探してください。

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

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

kazuki

中央寄せの方が見栄えがいいですね！

続いてはメニューバーの編集です。

WordPress管理画面から「外観」→「メニュー」の順でクリックしてください。

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

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

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

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

まずはWordPress管理画面から「AFFINGER5管理」→「おすすめ記事一覧」の順にクリックしてください。

その中の「おすすめヘッダーカード」で、カード型リンクを作成します。

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

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

kazuki

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

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

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

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

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

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

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

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

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

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

2021/1/31

【令和版】ブログ1年間の総PV・収益を公開【ブログで稼ぐのは難しい】

ブログ1年間でどれくらい稼げるのか？PV数はどれくらいなのか？気になる方のために、本記事では当サイトの1年間のリアルなデータを公開します。本記事を読めばブログ1年間でどれくらい稼げるのか知ることができますよ。

続きを読む

2021/1/30

ブログ40記事のPV数・収益の目安【絶対にやるべき11のことも解説】

ブログを40記事書いた時のPV数や収益について知りたいとは思いませんか？本記事では僕の副サイトのブログ40記事時点でのデータを公開します。ブログ40記事を書いた人、もうすぐ書き終わりそうな人は必見です。

続きを読む

2021/4/14

ブログ50記事のPV数・収益の目安【リアルな現状を公開】

ブログを50記事書いた時のPV数や収益について知りたいとは思いませんか？本記事では僕の副サイトのブログ50記事時点でのデータを公開します。ブログ50記事を書いた人、もうすぐ書き終わりそうな人は必見です。

続きを読む

2021/1/30

ブログ60記事のPV数・収益の目安【リアルな現状を公開】

ブログを60記事書いた時のPV数や収益について知りたいとは思いませんか？本記事では僕の副サイトのブログ60記事時点でのデータを公開します。ブログ60記事を書いた人、もうすぐ書き終わりそうな人は必見です。

続きを読む

2021/1/30

ブログ70記事のPV数・収益の目安【リアルなデータを公開】

ブログを70記事書いた時のPV数や収益について知りたいとは思いませんか？本記事では僕の副サイトのブログ70記事時点でのデータを公開します。ブログ70記事を書いた人、もうすぐ書き終わりそうな人は必見です。

続きを読む

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

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

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

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

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

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

そして、「タグ」→「レイアウト」→「PCとTab（959px以上）」→「左右50％」の順にクリック。

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

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

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

すると、コードが出力されます。

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

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

これでバナー風ボックスの完成。続いては、カードリンクの作成です。

「カード」をクリックしてショートコードを出力してください。

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

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

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

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

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

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

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

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

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

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

AFFINGER5

有名ブロガーが愛する最強のテーマ、AFFINGER5。

カスタマイズが豊富で初心者でも簡単に使いこなせます。

今なら「詳細ページ」から購入いただけますと、当サイト限定の6つの特典が付いてきますよ。

詳細ページへ

公式ページ

こんな感じにね。

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

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

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

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

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

その中の、「11̠STINGERサイト管理者紹介」を「サイドバーウィジェット」に追加。

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

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

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

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

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

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

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

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

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

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

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

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

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

kazuki

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

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

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

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

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

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

kazuki

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

８．フッターの作り方

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

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

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

kazuki

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

kazuki

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

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

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

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

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

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

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

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

kazuki

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

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

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

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

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

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

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

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

kazuki

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

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

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

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

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

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

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

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

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

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

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

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

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

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

続いてはh3です。

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

kazuki

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

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

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

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

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

kazuki

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

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

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

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

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