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

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

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

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

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

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

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

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

kazuki

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

今回作成するトップページは下記の通り。以前当サイトで使っていたトップページであり、Tsuzuki Blogを参考にしたものです。

イメージで大丈夫なので、まずは上記の画像をご覧ください。次の項から作り方を具体的に解説していきます。

また、コピーしてもOKですよ。

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

トップページ作成手順は上記の通り。多いように見えますが、それぞれ簡単な作業ばかりなのですぐに終わります。

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

①ヘッダーの作り方

ヘッダーとは上記、赤枠の部分。画像を使わず、タイトルとサイト紹介、メニューバーのみで作成しています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

kazuki

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

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

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

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

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

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

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

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

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

2021/11/20

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

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

続きを読む

2021/11/20

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

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

続きを読む

2021/11/20

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

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

続きを読む

2022/1/14

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

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

続きを読む

2022/1/14

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

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

続きを読む

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

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

④おすすめ記事の作り方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ちなみにブログカードは多くても良くないので最大でも4枚までにしときましょう。また、このブログカードは記事中でも内部リンクとして表示することができます。

さらに詳しく知りたい人は、こちらのアフィンガー6のブログカードの作り方。2秒で作れます。をどうぞ。作り方や使う際の注意点など、ブログカードについて網羅的にまとめています。

⑤ランキング機能の作り方

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

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

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

Y!mobile

ポイント

• ワイモバ親子割で15GBが月々990円（税込み）～
• 全国どこでも大手キャリアと同じで速度が安定
• 余ったデータ容量は次月へ繰り越し！
• 他社からの乗り換えで最大1万円キャッシュバック

公式ページはこちら

こんな感じにね。

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

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

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

まずはWordPress管理画面から「外観」→「ウィジェット」をクリックしてください。その中の、「11̠STINGERサイト管理者紹介」を「サイドバーウィジェット」に追加。画像で見ると下記の通りです。

次に、WordPress管理画面から「ユーザー」→「プロフィール」の順にクリックしていただき、下にスクロール。すると、下記画像のように「ニックネーム」を設定できる欄があります。

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

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

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

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

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

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

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

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

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

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

kazuki

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

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

WordPress管理画面から「AFFINGER6管理」→「おすすめ記事一覧」をクリック。その中の、「おすすめ記事一覧の作成」で設定することができます。画像で見ると下記の通りです。

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

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

kazuki

⑧フッターの作り方

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

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

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

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

kazuki

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

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

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

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

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

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

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

まずはタイトルとキャッチフレーズのフォントカスタマイズから。WordPress管理画面から「外観」→「カスタマイズ」をクリックしてください。

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

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

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

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

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

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

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

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

kazuki

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

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

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

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

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

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

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

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

kazuki

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

続いてはh3です。

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

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

kazuki

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

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

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

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

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

kazuki

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

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

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

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