
こんな悩みを解決します。
記事の内容
- AFFINGER6について
- AFFINGER6設定
- カスタマイズ
- デザイン
プロフィール
よっしー(@yosshiblog)
この記事を書いている僕はブログ歴1年3か月の高卒ブロガーです。1つ目の超特化ブログで月間1万PVを継続しています。
アフィンガーは機能がとても多いので、最初は人のデザインとカスタマイズを真似をした方がいいです。
というのも、機能が多すぎてカスタマイズやデザインを決めるのに1,2日くらいかかってしまうからです。
当サイトのデザインやカスタマイズは以下のようになります。

当サイトのデザイン・カスタマイズ
読者に読まれるブログとは、きれいにまとめられているブログなので統一したデザインやカスタマイズが必要になります。
今回は、記事の前半でAFFINGERのカスタマイズについて、記事の後半でAFFINGERのデザインテンプレートについて解説します。
記事の最後の方には、AFFINGERを使用する上での注意点なども開設するのでぜひ最後までご覧ください。
AFFINGER6をさっそく導入したい方は、3ステップで分かりやすく解説をしているのでこちらの「AFFINGER6の導入方法」からご覧ください。

AFFINEGR6について:最強テーマ
AFFINGER6は有料サイトの中でも特に優秀なテーマで、筆者も1つ目のブログでAFFINGER6を採用したら検索1位の記事を量産しました。

1つ目のブログの検索順位
AFFINGER6を採用したタイミングで記事が評価され始めた可能性もありますが、正直AFFINGER6を使っていなかったらここまで上位表示記事を量産することはできなかったでしょう。
AFFINGER6のメリットは、以下の通り。
- デザインが自由自在
- カスタマイズが豊富
- 表示速度が速い
- SEO内部対策が強い
他にも様々なメリットがあり、とても優秀なテーマですね。
また個人で稼いでいる有名ブロガーは、アフィンガーを使っていることが多いです。
どの方も有名なブロガーさんで、特に「マナブさん」と「トーマスガジェマガさん」はYouTubeでもよく見かける有名な方ですね。
カスタマイズ前に、まだAFFINGER6を導入していない方は以下のように導入をしてください。
- アフィンガーを購入、ダウンロード
- アフィンガーの導入、有効化
- アフィンガーでの初期設定
アフィンガーは、導入から初期設定まで1時間かからないくらいで完了するので、有料テーマ導入を考えている人は一度AFFINGER6を検討してみてください。
アフィンガーに関しては、こちらの最強テーマAFFINGER6のレビュー【一番おすすめの有料テーマ】で詳しく解説をしているのでぜひ最後までご覧ください。

AFFINGER設定
アフィンガー設定は、以下の通り。
- 見出し
- フォントの種類、サイズ
- 文字の行間
- アイキャッチ画像
- SNS設定
順に解説をします。
AFFINGER設定①:見出し

見出し
上画像のように、見出しのデザインを設定していきます。
「外観」→「カスタマイズ」→「見出しタグ(hx)/テキスト」を選択して、まずは「H2タグ」を設定していきます。

H2タグ
- 文字色・・・#222428
- ボーダー色・・・#4865b2
- 左ラインデザインに変更(※要ボーダー色)を選択
- 背景画像の横位置・・・左
- 背景画像の縦位置・・・真ん中
- 左の余白(px)・・・40
- 上下の余白(px)・・・20
上記のように設定をしていってください。
この後に同じように「H3タグ」を設定していきますが、念のために上の方にある「公開」をクリックして保存をしておきましょう。
また、①と②の色についてはカラーコードと呼ばれており、「#〇〇〇〇〇〇」という英数字の列を入力することで、お好きなカラーをデザインすることが出来ます。
このカスタマイズ画面で設定が可能ですが、カラーコード一覧表を参考にした方が好みの色を選びやすいので、自分で探してみてください。

カラーコード一覧表
「H2タグ」の設定が終わったら、「H3タグ」の設定をしていきます。
※当サイトでは見出し4以上のタグを使っていないので、見出し3までの設定をします。
AFFINGER設定②:フォントの種類
フォントの種類はも好みの物に設定することが出来ますが、当サイトはそこまで変更しておりません。
「AFFINGER管理」→「全体設定」→「フォントの種類」を選択して、以下に設定をしてください。

フォントの種類
- Googleフォントに「display=swap」を付与(表示速度改善)にチェック
- 全体・・・デフォルト
- 記事タイトル・見出し(h2~3)・ウィジェットボタンなど・・・ Noto Sans(700)
- 追加の反映範囲:・・・「サイト名」、「h4,h5見出しタグ」、「記事一覧タイトル」、「おすすめ記事・ブログカードタイトル」、「各メニュー(第一階層及びウィジェットボタン)」、「
こちらも、文字の形が変わったり細字になったりするので、空いた時間なのでいろいろな文字を試してみてください。
AFFINGER設定③:フォントのサイズと文字の行間
フォントのサイズと文字の行間は、スマホとPCの2つを設定していきます。
「AFFINGER管理」→「全体設定」→「フォントのサイズ」を探して、設定していきます。
スマホの場合

スマホのフォントのサイズ
基本(Pタグ他) | 16 | px/行間 | 30 |
記事タイトル | 18 | px/行間 | 36 |
H2タグ | 18 | px/行間 | 30 |
H3タグ | 18 | px/行間 | 36 |
PCの場合

PCのフォント設定
基本(Pタグ他) | 17 | px/行間 | 35 |
記事タイトル | 25 | px/行間 | 48 |
H2タグ | 23 | px/行間 | 38 |
H3タグ | 20 | px/行間 | 38 |
設定が完了したら、「save」のクリックを忘れずに。
反映確認をして、設定どおりのフォントサイズや行間になっていることを確認したら完了です。
AFFINGER設定④:アイキャッチ画像
アイキャッチは通常タイトルの下に設定されます。
ただ、AFFINGERはデフォルトの状態だとタイトルの上にアイキャッチが設置されてしまうので、AFFINGER設定で設置を変えていきます。
「AFFINGER管理」→「投稿・固定記事」→「アイキャッチ設定」を探して、以下のように設定をしてください。

アイキャッチ設定
- アイキャッチ画像の表示を全ての記事で有効化する(デフォルトは上部)にチェック
- アイキャッチ画像をタイトル下表示に変更するにチェック
- 何もしないにチェック
3番目の「何もしない」「ワイド化する」「ポロライド風にする」の中から好きなデザインを選択することが出来ますが、基本的には何もしないで大丈夫です。
AFFINGER設定⑤:SNS設定
最後にSNSの設定をしていきます。
とはいっても、当サイトは記事の本文にSNSの表示をしていないため、非表示設定だけを行えば十分です。
「AFFINGER管理」→「SNS/OPG」の順に選択をして、以下のように設定を行ってください。

SNS設定
すべてのSNSやボタンを非表示にしています。
物足りないよと言う方はSNSを表示させてもいいですし、プロフィールカードを記事の最後に表示させる方法でも構いません。
当サイトでは、サイドバーに設置してあるプロフィールカード内のSNSだけを表示させています。
投稿記事や固定記事の下にSNSの表示をさせたい方は、チェックを外しておきましょう。

AFFINGER6のカスタマイズ
アフィンガーのカスタマイズは、以下の通り。
- トップページ
- ヘッダー
- フッター
- サイドバー
順に解説をします。
カスタマイズ①:トップページ
当サイトのトップページは、以下のようになっております。

当サイトのトップページ
- ヘッダーカード
- おすすめ記事
- 新着記事
AFFINGER6ではこのようなトップページ設定簡単にすることが出来ますし、またCSSコードでこだわれば凝ったデザインにすることが出来ます。
このデザインは、tsuzukiさんのデザインを参考にしています。
トップページを整えることによって、読者の回遊率に繋がるので必ずやっておいた方がいいですね。
AFFINGER6の公式ホームページには、様々なブログのサイトが掲載されているのでぜひ参考にしてください。
また、AFFINGER6を使ったトップページ作成については、こちらの【WordPress】AFFINGER6のトップページのカスタマイズ方法3ステップで詳しく解説をしているのでぜひご覧ください。
カスタマイズ②:ヘッダー

ヘッダー
ヘッダーをカスタマイズしていきます。
当サイトは、AFFINGER設定で「カラーパターン」と「デザインパターン」を以下のように設定しています。

AFFINGER管理設定でのカラー
- カラーパターン・・・グレー(ダーク)
- デザインパターン・・・ブログ(初心者おすすめ)
試しに、デザインパターンをピンクに設定してみると、以下のようになります。

カラーパターンをピンクに
このようにAFFINGERでは、簡単に好みの色を設定することが出来ます。
※本記事では、カラーパターンを「グレー」で設定して解説していきます。
step
1外観設定
先ほどのカラーパターンを設定することで、その色がデフォルトとして表示されるはずです。
「外観」→「カスタマイズ」→「基本エリア設定」→「ヘッダーエリア」の順に選択をして、設定画面を表示させてください。
※headerエリアではなく「ヘッダーエリア」という日本語表記の方を選択してください。
設定画面を表示させてたら、以下のように設定をしていきます。

ヘッダーの外観設定
- 背景色・・・#222428
- 背景色(グラデーション上部)・・・#222428
上記のカラーコードをコピペしていきましょう。
入力が完了したら「公開」をクリック。
step
2サイトタイトル
サイトタイトルは、タイトルとキャッチフレーズを設定することが出来ます。
AFFINGERのデフォルトではタイトルが真ん中に入力されないので、まずはAFFINGER設定でタイトルをセンタリングしていきます。
「AFFINGER設定」→「ヘッダー」を選択して、以下の欄にチェックを入れてください。

タイトルをセンタリング
チェックをしたら、「save」をクリック。
次にサイト基本情報を入力していきます。
「外観」→「カスタマイズ」→「サイト基本情報」の順に選択をすると、設定画面が出てきます。
サイトタイトルだけでもいいですし、キャッチフレーズもあれば入力をしていきましょう。

サイト基本情報設定
- サイトタイトル・・・yosshi
- キャッチフレーズ・・・ズボラでも出来るブログ術
上記のように入力が完了したら、「公開」をクリック。
こちらのサイトタイトルとキャッチフレーズは、AFFINGER設定で入れ替えることが出来ます。
「AFFINGER設定」→「ヘッダー」の順に選択をして、「 サイト名とキャッチフレーズを上下反対にする」にチェックを入れてください。

タイトルとキャッチフレーズの入れ替え
チェックを入れたら、「save」をクリック。
反映されているか確認をしていきましょう。

反映確認
しっかりと反映されていますね。
サイトタイトルとキャッチフレーズを入れ替えてみて、戻したいときは先ほどのチェックを外しておきましょう。
※当サイトでは、ロゴ画像を挿入するのでキャッチフレーズは入力せずサイトタイトルだけ入力しています。
step
3ロゴ画像

ロゴ画像
ロゴ画像を設置する利点は、以下の通り。
- ブログを覚えてもらいやすい
- ファンが出来る
- 何を発信しているか一目でわかる
通常のタイトルとキャッチフレーズでも問題ありませんが、ロゴ画像を設置することで読者の印象に残すことが出来るので、時間に余裕があれば設置しておきたいです。
ロゴ画像は以下の方法で準備することが出来ます。
- Canvaを使って自分で作る
- Twitterで募集をする
- ココナラで募集する
当サイトのロゴ画像は、「Canva Pro」で作成しております。
Canvaとは、写真加工や動画編集など様々な編集作業をできるツールとなっており、豊富な素材やエフェクトがあるので自由自在に編集することが出来ます。
無料でも十分使えるのですが、これからブログ運営をしていくのならproに入ったほうがメリットは大きいです。
「自分でロゴ画像を作ってみたいよ」と言う方は、Canvaをおすすめします。
※当サイトのロゴ画像は「1000px × 200px」で作成しています。
ロゴ画像の準備が出来たら、自分のサイトに挿入していきます。
「外観」→「カスタマイズ」→「ロゴ画像/サイトタイトル」の順に選択をして、設定画面を表示させてください。
「ロゴ画像」と「スマホロゴ画像」に用意した画像を挿入していきましょう。

ロゴ画像挿入
PCサイトのロゴ画像は大きく表示されてしまうので、「ロゴの最大の高さ(px)」の欄に100と入力します。
入力が完了したら、「公開」をクリック。
下の方にある「アイコンロゴ画像」は、ヘッダーとフッター両方に挿入されますが、当サイトのフッターにはロゴ画像を設定しないので使いません。
これでロゴ画像挿入作業を完了です。
カスタマイズ③:フッター

フッター
まずは、外観カスタマイズでフッターの色を設定してきましょう。
「外観」→「カスタマイズ」→「基本エリア設定」→「フッターエリア」の順に選択をして、以下のように設定してください。

フッターの色設定
- 背景色・・・#222428
- 背景色(グラデーション上部)・・・#222428
上記のように入力が完了したら、「公開」をクリック。
フッターのデザインは大きく分けると、2種類あります。
- デフォルトのメニュー設定のまま表示
- 外観ウィジェットを使って、3列表示
当サイトでは、後者の3列表示を採用しています。
今回は、2つの表示方法を解説していきます。
通常のフッターメニュー

フッターメニュー
上画像のようなフッターメニューを作成していきます。
「外観」→「メニュー」を選択して、新しいメニューを作成していきます。

新しいメニュー
- 新しいメニューを作成しましょうをクリック
- メニュー名にフッターメニューと入力
- メニューの位置の「フッターメニュー」にチェック
上記の設定が完了したら、「メニューを作成」をクリック。
メニューが作成されたら、追加した固定ページにチェックを入れて「メニューを追加」をクリック。

メニューを追加
- プライバシーポリシー
- お問い合わせ
- サイトマップ
- プロフィール
当サイトでは上記の固定ページを追加していますが、自分の好みで色々なページを追加してください。
固定ページが追加されたら、「メニューを保存」をクリック。
実際に反映されているか、確認をしていきましょう。

反映確認
しっかりと表示されていますね。
通常のフッターメニュの設定は、これで完了です。
3列のフッターメニュー

3列のフッターメニュー
- 1列目・・・タイトル
- 2列目・・・yosshi ブログについて
- 3列目・・・検索、カテゴリー、当サイトのリンクについて
当サイトも採用している3列のフッターメニューですが、上図のように設置をすることでデザイン性が向上するだけではなく、読者の回遊率も上がるのでお勧めのカスタマイズとなっています。
回遊率・・・1訪問あたりどれだけの記事を回ったか
CSSコードを使用するので、「難しいことはしたくない」と言う方は、先ほどの通常フッターメニューでも大丈夫です。
※先ほどの通常フッターメニューを追加した方は、「フッターメニュー」を削除しておいてください。
先ほども解説しましたが、フッターの色を統一させてください。
- 背景色・・・#222428
- 背景色(グラデーション上部)・・・#222428
step
1フッター右用ウィジェット(2列目)
「外観」→「ウィジェット」をクリックして、ウィジェット設定画面を開いてください。
開いたら、「固定ページ」→「フッター右用ウィジェット(2列目)」を選択して、「ウィジェットを追加」をクリック。

2列目フッターメニュー
固定ページが追加されたら、タイトルの欄に自サイトについての名前を入力して、「完了」をクリック。

タイトルの入力
一度反映されているかを確認していきましょう。
タイトルが白色で固定ページのリンクが暗くなっていますが、後程追加CSSコードでリンクの色を変えます。
しっかりと反映されていますね。
同じように3列目も設定をしていきましょう。
step
2フッター右用ウィジェット(3列目)
3列目は、以下のウィジェットを追加していきます。
- 検索
- 16_STINGERカテゴリー
- テキスト
「外観」→「ウィジェット」をクリックして、ウィジェット設定画面を開いてください。
開いたら、「検索」→「フッター右用ウィジェット(3列目)」を選択して、「ウィジェットを追加」をクリック。

検索を追加
追加されたら、お好みのタイトルを入力してください。
当サイトの場合は、英語表記で統一しているので以下のように入力をしています。

タイトルの入力
後は、「16_STINGERカテゴリー」と「テキスト」を同じように追加していきます。

16_STINGERカテゴリーの設定は以下の通り。

16_STINGERカテゴリー
「ドロップダウンで表示」、「投稿数を表示」、「階層を表示」の3つにチェックを入れて「保存」をクリック。
テキストの設定は、以下の通り。

当サイトのリンクについ
- タイトル・・・当サイトのリンクについて
- 本文・・・当サイトへのリンクは完全フリーです。リンクを掲載する際の許可などは、一切必要ありません。 また、リンクの設定や引用をする際は、当サイト(自サイトのブログ名)へのリンクであることを必ず記載してください。
上記のように入力が完了したら、「保存」をクリック。
実際に反映されているかを確認しましょう。

3列目の反映確認
※文字が暗くて分かりにくいですが、しっかりと反映されています。
step
3追加CSSコード
CSSコードとは、ウェブページのスタイルを設定するコードのことを言い、AFFINGER6の機能やカスタマイズの多さとコードを使うことで色々なデザインを作成することが出来ます。
追加CSSコードで固定ページのリンクの色や、当サイトのリンクについての本文を白色に表示させていきます。
「外観」→「カスタマイズ」→「追加CSS」の順に選択をして、追加CSSコード入力画面を表示させてください。
表示させたら、以下のようなコードを入力していきます。

追加CSSコード
リンクの文字色
#footer a{
color:#fff;
line-height: 2;
}
文字色
#footer p{
color:#fff;
font-size: 13px;
line-height: 2;
}
- font-size・・・文字の大きさ
- line-heigh・・・行間
上記の数字を変えることで文字の大きさだったり、行間を変えたり出来るのでお好みのカスタマイズが可能です。
入力が完了したら、「公開」をクリック。
しっかりと反映されているかを確認しましょう。

フッター
しっかりと反映されていますね。
これで追加CSSコードの入力を完了です。
追加CSSが上手く反映されない時の対処法
- キャッシュが残っていないか
- CSSが機能しているか
- 他の記述が優先されていないか
- 書いたCSSがちゃんと確認できるか
- レイアウトのミスを疑う
CSSコードが反映されない場合は、上記のようなチェックすべきポイントがあります。
当サイトでも、コードを入力して反映されない原因が2つありました。
1つ目は、他サイトで紹介されているCSSコードが使えないということです。
#footer a{
color:#fff;
line-height: 2;
/*箇条書きの色*/
}
赤色で表記されている「/*箇条書きの色*/」は後々どんな色に設定したかをメモする箇所なのですが、このコードが邪魔で反映がされませんでした。
もう一つの原因として、前述してあるコードが消えていたというわけです。

反映されない原因
この括弧が消えてしまうことで、範囲が設定できなくなっていたんですね。
このCSSコードが赤色になると反映されないので、赤色になっていたらどこかがおかしいということになります。

カスタマイズ④:サイドバー

サイドバー
- 検索
- プロフィール
- アーカイブ
- カテゴリー
- よく読まれている記事
当サイトでは、上記のように設置をしています。
ブログのサイドバーとは、サイトの右の方にあるブログの案内板みたいなもので、プロフィールやおすすめ記事などを設置することが多いです。
サイドバーは、ただ設置をするだけではなく直帰率や回遊率を良くするための役割もあるのです。
サイドバーについては、こちらの【AFFINGER6】サイドバーの設定方法とオシャレなデザイン【10分で完了】で詳しく解説をしているのでぜひご覧ください。
AFFINGER6のデザインテンプレート
アフィンガーには、無料のデザインテンプレートが配布されています。
- SIMPLE START
- Tidy2
- MUKU
- cloud
- Study Bear
- INAZUMA 6EX(EX限定)
- Separate(EX限定)
- mocha 6EX(EX限定)
- MUKU EX(EX限定)
- Tidy2 EX(EX限定)
- WIDE / EX(EX限定)
- JET2(有料)
このように沢山のデザインが配布されているので、「カスタマイズとかはやらずに簡単に始めたい」と言う方にはとてもお勧めします。
デザインを導入する手順としては、以下の通り。
- プラグインとデザインをインストール
- AFFINGER6へZipファイルをアップロード
- 2つのファイルをインポート
10分程度で好みをデザインを導入することが出来ます。

「デザインが気になる~」と言う方は、こちらの「AFFINGER6公式ホームページ」で詳しく載っているので参考にしてください。
また、デザインテンプレートの設置方法については、今後記事を執筆するのでお待ちください。
カスターマイザーのリセット
アフィンガー設定がごちゃごちゃになってしまったり、デザインテンプレートが上手く反映されなかったときは、カスタマイズのリセットでデフォルト状態にすることが出来ます。
「外観」→「カスタマイズ」→「全体カラー設定」の順に選択をすると、一番下に「カスターマイザーのリセット」があります。

カスターマイザーのリセット
AFFINGER管理設定だけをデフォルト状態にすることは出来ず、すべてをリセットしてしまうのでご注意ください。
AFFINGER6に触れておこう
アフィンガーのカスタマイズやデザインにこだわり始めたら、キリがありません。
ブログ運営を始めても数か月はびっくりするほど読まれないので、最初は執筆に集中しましょう。
アフィンガーの機能やカスタマイズは非常に多くあります。
1週間や2週間では使いこなすことが難しいので、記事執筆の息抜きとして設定をいじってみたり、デザインを定期的に変えたりして慣れておきましょう。

まとめ:AFFINGER6のデザインで楽しいブログ運営を
今回は、「AFFINGER6のデザインやカスタマイズの設定方法」について解説をしました。
AFFINGER6は非常に優秀なテーマではありますが、適当なカスタマイズやデザインにしてしまうことでせっかくの有料テーマが台無しになってしまいます。
収益化にこだわったAFFINGER6ですので、本記事を参考にしつつ自分なりにアレンジしていってくださいませ。
今回は、以上です。