
このような疑問にお答えします。
✔本記事の内容
- AFFINGER6でトップページをカスタマイズする手順
AFFINGER6は簡単にトップページをカスタマイズできる点が非常に優秀で、数々のブロガーに愛されてきました。
しかし、実はブログ初心者にとっては少しカスタマイズが難しいです。。。
ということで今回は、初心者でも簡単にカスタマイズできるよう、当サイトのトップページを基に解説しますね。
一度当サイトを真似することで、カスタマイズ方法を理解することが狙いです。

目次
AFFINGER6(アフィンガー)トップページのイメージ
今回作成するトップページは下記の通り。以前当サイトで使っていたトップページであり、Tsuzuki Blogを参考にしたものです。
イメージで大丈夫なので、まずは上記の画像をご覧ください。次の項から作り方を具体的に解説していきます。
また、コピーしてもOKですよ。
AFFINGER6(アフィンガー)トップページのカスタマイズ手順
- ヘッダーの作り方
- ヘッダーのカード型リンクの作り方
- 新着記事(スライドショー)の作り方
- おすすめ記事の作り方
- ランキング機能の作り方
- サイト管理者紹介の作り方
- よく読まれている記事の作り方
- フッターの作り方
トップページ作成手順は上記の通り。多いように見えますが、それぞれ簡単な作業ばかりなのですぐに終わります。
それでは1つずつ解説していきますね。
①ヘッダーの作り方
ヘッダーとは上記、赤枠の部分。画像を使わず、タイトルとサイト紹介、メニューバーのみで作成しています。
まずはタイトルとサイト紹介について。下記の通り、WordPress管理画面から「設定」→「一般」の順にクリックしてください。
こちらでサイトタイトル、キャッチフレーズを編集できます。また、このままでは左側にタイトルとキャッチフレーズが表示されてしまうので、中央に寄せます。
下記の通り、WordPress管理画面から「AFFINGER6管理」→「ヘッダー」の順にクリックしていただき、「ヘッダー設定」を探してください。そこで下記2点にチェック。(※画像はAFFINGER5のものですが、内容は同じです)
- ヘッダーを分割しない
- ヘッダーエリアをセンタリング
これでタイトルとキャッチフレーズが中央に寄りました。
続いてはメニューバーの編集です。下記の通り、WordPress管理画面から「外観」→「メニュー」の順でクリックしてください。
こちらでヘッダーメニューを編集できます。
プロフィールを作成するのか?Twitterをリンクさせるのか?お好みでOKです。
②ヘッダーのカード型リンクの作り方
ヘッダーのカード型リンクとは、上記画像の赤枠部分。
まずは下記の通り、WordPress管理画面から「AFFINGER6管理」→「おすすめ記事一覧」の順にクリックしてください。(※画像はAFFINGER5のものですが、内容は同じです)
その中の「おすすめヘッダーカード」で、カード型リンクを作成します。
下記の通り、「おすすめヘッダーカード」が出てくるまでスクロールしてください。
ここでは下記3点を編集してください。
- 画像のURL:表示したい画像のURLを入力
- テキスト:表示したいテキストを入力
- リンク先URL:飛ばしたいURLを入力
設定が終わりましたら最後に「SAVE」です。これでカード型のリンクが完成しました。

③新着記事(スライドショー)の作り方
新着記事(スライドショー)とは、上記画像の赤枠部分。
こちらは先ほどとは違い、固定ページで作ります。まずは下記の通り、WordPress管理画面から「固定ページ」へアクセスしてください。
そこで、タイトルを"トップページ"、見出しをh3で"新着記事"と入力してください。画像で見ると下記の通りです。
そこから、「タグ」→「記事一覧」→「カテゴリー一覧」の順にクリックしていただき、ショートコードを出力します。下記の赤枠をクリックすればショートコードが出力されます。
ショートコードには下記のように一つ一つ意味があります。
- st-catgroup cat="カテゴリID指定"
- page="読み込み数"
- orderby="id"
- child="子カテゴリーの読み込み"
- slide="スライドショーのオンオフ"
- slide_to_show="列数の指定"
- slide_more="続きを読む"
- slide_center="off"
これは覚えなくてもOK。スクショでも取っておいたら後で見返せます。
ちなみに、出力したショートコードを、当サイトでは少しだけ編集しています。
すると、こんな感じで表示されます。
また、スライドショーについては、こちらの【超おしゃれ】アフィンガー6のスライドショーの設定方法と使い方でもまとめています。
使い方の注意点などをまとめているので、スライドショーについてさらに詳しく知ることができますよ。
④おすすめ記事の作り方
おすすめ記事とは上記赤枠の部分。
こちらも先ほどと同様に固定ページで作ります。まずはバナー風ボックスから。下記の赤枠の部分です。
新着記事(スライドショー)で使った固定ページで、見出しh3で「おすすめ記事」と入力してください。
そして、「タグ」→「レイアウト」→「PCとTab(959px以上)」→「左右50%」の順にクリック。画像で見ると下記の通りです。
すると、下記のように二つの列が作られます。
まずは左の黄色のボックスから編集します。
下記の通り、「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」の順でクリック。
すると、次のようにコードが出力されます。
同じように右側の青色のボックスもコードを出力。そして下記3点のコードを修正します。
- st-flexbox url="リンク先URL"
- title="カテゴリーのタイトル"
- background_image="タイトルの背景画像"
当サイトでは次のようになります。
これでバナー風ボックスの完成。続いては、カードリンクの作成です。下記赤枠の部分ですね。
次のように、「カード」をクリックしてショートコードを出力してください。
そして、下記のようにコードを修正。
記事IDは自分がカード型にしたいものを入力してください。(WordPress管理画面から「投稿記事一覧」で確認できます)
ちなみにブログカードは多くても良くないので最大でも4枚までにしときましょう。また、このブログカードは記事中でも内部リンクとして表示することができます。
さらに詳しく知りたい人は、こちらのアフィンガー6のブログカードの作り方。2秒で作れます。をどうぞ。作り方や使う際の注意点など、ブログカードについて網羅的にまとめています。
⑤ランキング機能の作り方
ランキング機能とは、上記画像の赤丸部分。
こちらは下記の通り、WordPress管理画面から「ランキング管理」をクリックすると設定できます。
こちらの設定は少し複雑ですが、一度設定を終わらせてしまえばショートコードを入力するだけでランキングを出力することができます。
こんな感じにね。
ランキングの作り方についてここで解説すると少し長くなるので、こちらのアフィンガー6のランキング作成手順を徹底解説をどうぞ。作り方から使う際の注意点を詳しく解説しています。
⑥サイト管理者紹介の作り方
サイト管理者紹介とは、上記の赤丸部分。
まずはWordPress管理画面から「外観」→「ウィジェット」をクリックしてください。その中の、「11̠STINGERサイト管理者紹介」を「サイドバーウィジェット」に追加。画像で見ると下記の通りです。
次に、WordPress管理画面から「ユーザー」→「プロフィール」の順にクリックしていただき、下にスクロール。すると、下記画像のように「ニックネーム」を設定できる欄があります。
表示したい名前を入力しましょう。終わりましたらさらにスクロール。
すると、下記のようなプロフィール情報の編集欄があります。
簡単な自己紹介を入力してください。終わりましたら、最後に「保存」をクリック。
さて、続いてはWordPress管理画面から「外観」→「カスタマイズ」をクリック。
下記の通り、その中の「+オプションカラー」をクリックしてください。
下にスクロールしていただくと「サイト管理者紹介」が見つかります。
そこで「プロフィールカードに変更」にチェックを入れ、「アバター画像」を挿入してください。
他にもカスタマイズできますが、ひとまずはこれでOK。
最後に「公開」をクリックしてください。

⑦よく読まれている記事の作り方
よく読まれている記事とは、上記画像の赤枠部分。
WordPress管理画面から「AFFINGER6管理」→「おすすめ記事一覧」をクリック。その中の、「おすすめ記事一覧の作成」で設定することができます。画像で見ると下記の通りです。
- おすすめ記事一覧に表示する文字:表示したい文字を入力
- 任意の人気記事を指定(投稿又は固定記事ID):表示したい記事IDを入力
- サイドのスクロールに表示にする(抜粋非表示):チェックを入れる
(記事IDはWordPress管理画面から「投稿一覧」で確認できます)
これでよく読まれている記事の作成は完了です。

⑧フッターの作り方
フッターとは、上記画像の赤丸部分。
ヘッダーの作り方と同じで、WordPress管理画面から「外観」→「メニュー」の順でクリックしてください。
編集するメニューをフッターに変更。

以上、AFFINGER6トップページのカスタマイズ手順でした。
ただ、これではまだデフォルトの青色のまま。続いてはフォントのカスタマイズ手順を解説しますね。
AFFINGER6(アフィンガー)トップページのカスタマイズ手順(フォント編)
- ヘッダーのフォントカスタマイズ
- サイドバーのフォントカスタマイズ
- フッターのフォントカスタマイズ
フォントのカスタマイズについては上記3点に分けて解説します。
それでは1つずつ解説していきます。
①ヘッダーのフォントカスタマイズ
上記画像の赤枠部分、ヘッダーのフォントをカスタマイズします。
まずはタイトルとキャッチフレーズのフォントカスタマイズから。WordPress管理画面から「外観」→「カスタマイズ」をクリックしてください。
そこから「基本エリア設定」→「ヘッダーエリア」をクリック。
それぞれ下記のようにカスタマイズします。
- サイト上部にライン:#ffffff
- ラインの高さ(px):5px
- 背景色:#ffffff
- 背景色(グラデーション上部):#fffffff
- サイトタイトルとキャッチフレーズの文字色:#333333
続いてはメニューバーのフォントカスタマイズ。
カスタマイズ画面から「メニューのカラー設定」→「PCヘッダーメニュー」をクリック。
そこでメニューバーのフォントをカスタマイズします。
下記のようにカスタマイズしてください。
- 背景色:#333333
- 背景色(グラデーション上部):#333333
- ボーダー上下色:#ffffff
- ボーダー左右色:#ffffff
- ボーダー右色:#ffffff
- 文字色:#ffffff
- メニューをセンター寄せにする:チェックを入れる
- メニューの横幅を100%にする:チェックを入れる
- メニューの幅(px):160
- メニューの上下に隙間を作る:設定しない
- 下層ドロップダウンメニュー背景色:#333333
これでヘッダーのフォントカスタマイズが完了です。

③サイドバーのフォントカスタマイズ
上記画像の赤枠部分をカスタマイズしていきます。
まずはカスタマイズ画面から、「基本エリア設定」→「サイドバー」をクリック。
下記画像のようにカスタマイズしてください。
- サイドの文字色(一部カラーの強制変更):#333333
- サイドバーウィジェットエリアの背景色:#ffffff
続いて、「各テキストとhタグ(見出し)」→「ウィジェットタイトル(サイドバー)」をクリック。
下記画像のようにカスタマイズします。
- 文字色:#333333
- 背景色:#ffffff
- 背景色(グラデーション上部):#ffffff
- ボーダー色:#333333
- ボーダー色(サブ):#333333
- グラデーションアンダーラインに変更(※要ボーダー色):チェックを入れる
これで当サイトと同じサイドバーのフォントにカスタマイズできました。

③フッターのフォントカスタマイズ
上記画像の赤枠部分をカスタマイズしていきます。
カスタマイズ画面から「基本エリア設定」→「フッターエリア」をクリック。
下記画像のようにカスタマイズしていきます。
- フッター文字色:#333333
- 背景色:#ffffff
- 背景色(グラデーション上部):#ffffff
以上でトップページカスタマイズの全工程が終了です。
さて、最後にトップページ以外のカスタマイズ手順を解説します。
AFFINGER6(アフィンガー)トップページ以外のカスタマイズ
- フォントサイズ・行間のカスタマイズ
- 各テキストとhタグのカスタマイズ
トップページ以外のカスタマイズとしては上記2点。
1つずつ解説していきますね。
①フォントサイズ・行間のカスタマイズ
WordPress管理画面から「AFFINGER6管理」→「デザイン」をクリックし、「フォントのサイズ」を見つけて下さい。
当サイトではそれぞれ、下記画像のようにカスタマイズしてます。
同じに設定してもOKですが、最後に「save」をクリックすることだけ忘れずに。
これでフォントサイズ・行間のカスタマイズが完了です。
②各テキストとhタグのカスタマイズ
WordPress管理画面から「外観」→「カスタマイズ」→「+各テキストとhタグ(見出し)」をクリック。
当サイトではそれぞれ、h2、h3をカスタマイズしています。
まずはh2から。下記画像のようにカスタマイズしてください。
- 文字色:#333333
- 背景色:#f7f7f7
- 背景色(グラデーション上部):#f7f7f7
- ボーダー色:#4865b2
- ボーダー色(サブ):#4865b2
- 左ラインデザインに変更(※要ボーダー色):チェックを入れる
- 左の余白(px):40
- 上下の余白(px):20
続いてはh3です。
- 文字色:#333333
- 背景色:#f7f7f7
- 背景色(グラデーション上部):#f7f7f7
- ボーダー色:#4865b2
- ボーダー色(サブ):#4865b2
- 左ラインデザインに変更(※要ボーダー色):チェックを入れる
- 左の余白(px):20
- 上下の余白(px):0
以上でトップページ以外のカスタマイズが完了です。お疲れさまでした。

まとめ:AFFINGER6(アフィンガー)トップページのカスタマイズ手順
本記事ではAFFINGER6を使ったトップページのカスタマイズ手順について解説しました。
当サイトをベースに解説しているので、解説した内容通り実行してただくと同じトップページが完成します。
このまま真似していただいてもいいですし、さらにアレンジしてもOK。

また、このようにAFFINGER6には便利な機能がたくさんあります。
他の機能も知りたい人や実際に利用している人の口コミ・評判を知りたい人は、個別でまとめた記事があるので参考にしてください。
-
[購入特典あり]AFFINGER6(アフィンガー)の購入&導入手順
続きを見る
-
【特典付きレビュー】AFFINGER6(アフィンガー)の口コミ・評判まとめ
続きを見る
-
【アフィンガー6 JET】評価、導入・カスタマイズ方法【すべて語る】
続きを見る
-
【最短5分】AFFINGER6(アフィンガー)の初期設定を徹底解説
続きを見る
-
AFFINGER6(アフィンガー)がSEOに強いと言われる5つの理由
続きを見る
-
【初心者向け】AFFINGER6の使い方【絶対に使う機能6選】
続きを見る
-
【徹底解説】AFFINGER6で目次を作る方法3選
続きを見る
-
【超おしゃれ】AFFINGER6のスライドショーの設定方法と使い方
続きを見る
-
AFFINGER6のランキング作成手順を徹底解説
続きを見る
-
AFFINGER6(アフィンガー)のブログカードの作り方。2秒で作れます。
続きを見る
-
【AFFINGER6】吹き出し機能の設定から使い方まで徹底解説
続きを見る
気になるものがあれば読んでみてください。
それでは今日はこのへんで。グッバーイ