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

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

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

✔本記事の執筆者

Twitter：かずき(@k03mind)

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

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

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

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

kazuki

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

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

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

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

上記は画像ですが、リアルを見たい人はトップページをクリックしてください。

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

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

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

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

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

１．ヘッダーの作り方

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

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

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

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

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

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

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

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

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

kazuki

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

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

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

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

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

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

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

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

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

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

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

kazuki

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

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

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

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

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

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

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

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

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

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

2020/10/19

【初心者向け】アフィンガー5の使い方【絶対に使う機能6選】

アフィンガー5の使い方を詳しく知りたくないですか？本記事ではAFFINGER5で絶対に使う機能6つの使い方を解説します。また、その他にも便利な機能３つを解説するので、アフィンガー5の使い方がわからない人は本記事で解決できること間違いなしですよ。

続きを読む

2020/10/18

【超おしゃれ】アフィンガー5のスライドショーの設定方法と使い方

アフィンガー５のスライドショーの設定方法と使い方を知りたくないですか？本記事ではスライドショーの具体的な設定方法から使い方まで詳しく解説します。AFFINGER5の設定方法と使い方を知りたい人は必見です。

続きを読む

2020/6/5

[初心者向け]ブログアフィリエイトにおすすめのツール8選。とりあえずこれだけでOK。

ブログアフィリエイトにおすすめのツールが何か知りたいとは思いませんか？本記事では誰もが導入しているツールを8個、ご紹介します。ブログアフィリエイトにおすすめのツールを探している人は、本記事で紹介するツール8個を導入しておけばOKです。

続きを読む

2020/5/29

[悲報]AFFINGER5(アフィンガー5)初心者は○○ができないと使えない

実はアフィンガー5は、○○ができないと使うことができないんですよ？本記事ではアフィンガー5初心者に必要な「あること」についてや、初心者におすすめである理由を解説します。アフィンガー5を購入しようか悩んでいる初心者ブロガーさんは必見です。

続きを読む

2020/5/28

[最新版]アフィリエイト向きのWordPressテーマ3選~有名ブロガー使用~

アフィリエイト向きのWordPressテーマを知りたいとは思いませんか？結論から言うと、「稼いでいるブロガーが使っているテーマ」を選べばOKです。本記事では実際に稼いでいるブロガーさんが使っているテーマを3つご紹介します。

続きを読む

また、スライドショーについては、こちらの【超おしゃれ】アフィンガー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には便利な機能がたくさんあります。

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

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