WordPressテーマ「AFFINGER6」は、豊富なカスタマイズ機能を持つことが最大の特徴です。
初心者には少し難しめのテーマですが、中級者からプロの間ではよく使われています。
そこでこの記事では、初心者が最低限やっておきたいおススメカスタマイズを紹介します。

個人的にAFFINGER6は中級者向けだと思っていますが、初心者でも扱えるように解説します!
前提条件
この記事は、AFFINGER6用のカスタマイズ方法です。
AFFINGER5や他のワードプレステーマでは不可能(または動作未確認)です。
【WordPress】6.7.1
【テーマ:AFFINGER6EX】20250108
なお当ブログ自体は別のテーマを使用していますが、姉妹サイト「UEテク」はAFFINGER6で作っています。完成例としてご覧ください。
AFFINGER6は設定が複雑…
個人的に、AFFINGER6は中級者向けだと思っています。
理由は、良くも悪くも設定がとにかく多くて複雑だからです。
とは言え、「もうAFFINGER6を買ってしまった…」という初心者の方もいらっしゃるでしょう。
そこで「最低限これを変えれば十分魅力的なサイトになりますよ!」というカスタマイズをご紹介します。
基本設定の変更で見た目を整える
まずはサイト全体の設定を変えていきます。
ここは極めて重要で、後から簡単に変更できないと思って設定してください。
見出しのデザインなど、細かい設定を変更した後に基本設定を変更すると…
⇒ 基本設定変更前は違和感がなかった部分が目立つ
⇒ 細かいデザインをやり直す
⇒ 別の設定との相性で違和感が出る…と修正の手間が増える!
1.サイトカラーの変更
AFFINGER管理 > 全体設定 と進み、カラー設定とデザインパターンを変更します。


外観 > カスタマイズ でのカラー設定は(初心者は)不要です。
どちらも色に関する設定ですが、重複する部分もある他、メニューやサイドバーなどあらゆる部分に影響するため、知識がないうちは混乱する原因になります。
配色例としてよく提案されがちなのは「信頼感を高める青系」や「暖かみのあるオレンジ系」です。
基本カラーやデザインに関しては、後から変更すると手間が増える恐れがあるため、時間をかけてでも初めにいろいろ設定を変えてみて雰囲気を見ながら決めきりましょう。
他サイトと重複して良いので、王道且つシンプル目な方が後のカスタマイズはしやすいです!
2.フォントの変更
同じくAFFINGER管理 > 全体設定 と進み、フォントを変更します。
サイトの雰囲気に合わせるだけでなく、読みやすいフォントを選択しましょう!


フォント名 | 雰囲気 |
---|---|
M PLUS Rounded 1c | 優しく楽しげな丸ゴシック体のフォント。 エンタメ系や子ども向けのデザインでよく使われる。 |
Noto Sans | Googleが推奨するオーソドックスなゴシック体。 ごく一般的なフォントのため可読性に優れる。 |
Noto Serif | GoogleとAdobeが協力して開発したベーシックな明朝体。 ごく一般的なフォントのため可読性に優れる。 |
游ゴシック | 字面を小さめで文字間にゆとりを持たせたゴシック体。 文字同士が干渉しないため一字一字の識別性に優れる。 |
游明朝 | 丸みのあるウロコや柔らかな曲線が特徴の落ち着きある明朝体。 文字の空間が均一で明るく品のある雰囲気。 |
ヘッダー・フッターのカスタマイズ
ヘッダーとフッターをカスタマイズすることで、サイト内の回遊性を高めることができます。
3.ヘッダーデザインの変更
特にPC閲覧時のヘッダーは目に留まりやすいため、他サイトと差別化できる目立ちます。
少し難しめですが、通常は気づきにくい特別なヘッダー設定を以下記事でご紹介しています!


ヘッダーには記事一覧やカテゴリーページなど、回遊率を高めるページへのリンクを貼ると良いでしょう。
4.フッターに便利なリンクを設置
フッターには通常、信頼性を高めるためのリンクを貼ります。
利用規約やプライバシーポリシーなど、サイトを説明するためのページを準備しましょう。
フッターは信頼性を高めるものなので、カスタマイズは極力避けた方が無難です。
強いてあげるなら、フッターを3列にすることでリンクを目立たせることができます。


外観 > ウィジェット と進み、フッター(2列目)とフッター(3列目)にボタンやテキストリンクを貼ります。


記事の見やすさをアップするレイアウト変更
記事の中でも、タイトルや見出しは特に大事な要素です。
まず読者は、記事タイトルを見て読むかどうかを決めます。
さらに記事の概要を把握したがるため、はじめに見出しや目次を見る傾向があります。
5.記事タイトルのデザイン変更
記事タイトルは「視覚的に目を引くデザイン」が重要です。
しかしあくまで本文がメインなので、タイトルが目立ちすぎても意味がありません。


外観 > カスタマイズ > 見出しタグ(hx)/ テキスト > 記事タイトル と進みます。
ここで文字色や背景色を設定するだけで、だいぶ他サイトと差別化が可能です。
記事タイトルの下部にある「調整」で文字を中央揃えにするくらいでも良いでしょう。
シンプルすぎず、少しカスタマイズするのがポイントです。
もう一度言いますが、記事タイトルが目立ちすぎても良くありません。
6.見出しの装飾
同じく見出しも、本文を読んでもらえるように少し目立たせるようにしましょう。


外観 > カスタマイズ > 見出しタグ(hx)/ テキスト > H2タグ と進みます。
ここで文字色や背景色を設定するだけで、だいぶ他サイトと差別化が可能です。
記事タイトルの下部にある「調整」で文字を中央揃えにするくらいでも良いでしょう。
シンプルすぎず、少しカスタマイズするのがポイントです。
もう一度言いますが、記事タイトルが目立ちすぎても良くありません。
H3タグも同様に設定しましょう。
H4タグ以降は、そもそもタグを使わない人もいるでしょう。必要に応じて設定してください。
アクセスを増やすための設定
サイトの回遊率を上げることで、各ページへのアクセス数を増やすことができます。
別のページへ誘導する設定もしておきましょう。
7.記事一覧のカスタマイズ
人気の記事やおススメの記事を紹介することで、自信のあるコンテンツに誘導することができます。


AFFINGER管理 > ヘッダー下 / おすすめ > おすすめ記事一覧 と進みます。
ここにある「任意の記事を指定」の欄に、一覧表示させたい記事の投稿IDを設定します。
AFFINGER6では、投稿ID一覧を表示させると、各記事のIDが表示されています。
※IDが表示されないテーマもあるので、表示されているAFFINGER6は有難い!


8.パンくずリストのカスタマイズ
AFFINGER6では自動でパンくずリストが生成・表示されます。
パンくずリストは、ユーザーのサイト内移動をスムーズにするメリットがあります。
SEO的にもパンくずリストは表示した方が良いので、よほどの理由がない限りは表示したままにしましょう。


外観 > カスタマイズ > 見出しタグ(hx)/ テキスト > 投稿日時・ぱんくず・タグ と進みます。
基本テキスト色を変更すると、投稿日時やぱんくずのテキスト色が変わります。
デフォルト色ではやや暗めで目立たないため、リンクっぽい青色など、サイトに合わせて少し目立つ色に変えてみましょう!
まとめ
カスタマイズをすることで、他のサイトと差別化されることで、自サイトの魅力がアップします。
AFFINGER6は設定が多いため、使いこなすまでには時間がかかります。
正直、この記事で紹介した設定だけでは物足りないと思います。
まずは簡単な項目から取り組み、少しずつステップアップしましょう!
コメント