初心者必見!Affinger6でできるおすすめカスタマイズ8選

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

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

そこでこの記事では、初心者が最低限やっておきたいおススメカスタマイズを紹介します。

クルエイチ

個人的にAFFINGER6は中級者向けだと思っていますが、初心者でも扱えるように解説します!

目次

前提条件

この記事は、AFFINGER6用のカスタマイズ方法です。
AFFINGER5や他のワードプレステーマでは不可能(または動作未確認)です。

【WordPress】6.7.1
【テーマ:AFFINGER6EX】20250108

なお当ブログ自体は別のテーマを使用していますが、姉妹サイト「UEテク」はAFFINGER6で作っています。完成例としてご覧ください。

AFFINGER6は設定が複雑…

個人的に、AFFINGER6は中級者向けだと思っています。
理由は、良くも悪くも設定がとにかく多くて複雑だからです。

AFFINGER6が中級者向けな理由

多彩な設定があるため他サイトと被りにくい
⇒ 上級者向けのcssやscriptの追加・変更なしで他サイトと差別化が可能

設定がとにかく多くて複雑なので初心者には扱いにくい

とは言え、「もうAFFINGER6を買ってしまった…」という初心者の方もいらっしゃるでしょう。
そこで「最低限これを変えれば十分魅力的なサイトになりますよ!」というカスタマイズをご紹介します。

基本設定の変更で見た目を整える

まずはサイト全体の設定を変えていきます。
ここは極めて重要で、後から簡単に変更できないと思って設定してください。

見出しのデザインなど、細かい設定を変更した後に基本設定を変更すると…
⇒ 基本設定変更前は違和感がなかった部分が目立つ
⇒ 細かいデザインをやり直す
⇒ 別の設定との相性で違和感が出る…と修正の手間が増える!

1.サイトカラーの変更

AFFINGER管理 > 全体設定 と進み、カラー設定とデザインパターンを変更します。

affinger6のカラーパターン設定欄

外観 > カスタマイズ でのカラー設定は(初心者は)不要です。
どちらも色に関する設定ですが、重複する部分もある他、メニューやサイドバーなどあらゆる部分に影響するため、知識がないうちは混乱する原因になります。

配色例としてよく提案されがちなのは「信頼感を高める青系」や「暖かみのあるオレンジ系」です。
基本カラーやデザインに関しては、後から変更すると手間が増える恐れがあるため、時間をかけてでも初めにいろいろ設定を変えてみて雰囲気を見ながら決めきりましょう。
他サイトと重複して良いので、王道且つシンプル目な方が後のカスタマイズはしやすいです!

2.フォントの変更

同じくAFFINGER管理 > 全体設定 と進み、フォントを変更します。
サイトの雰囲気に合わせるだけでなく、読みやすいフォントを選択しましょう!

affinger6のフォント設定欄
フォント名雰囲気
M PLUS Rounded 1c優しく楽しげな丸ゴシック体のフォント。
エンタメ系や子ども向けのデザインでよく使われる。
Noto SansGoogleが推奨するオーソドックスなゴシック体。
ごく一般的なフォントのため可読性に優れる。
Noto SerifGoogleとAdobeが協力して開発したベーシックな明朝体。
ごく一般的なフォントのため可読性に優れる。
游ゴシック字面を小さめで文字間にゆとりを持たせたゴシック体。
文字同士が干渉しないため一字一字の識別性に優れる。
游明朝丸みのあるウロコや柔らかな曲線が特徴の落ち着きある明朝体。
文字の空間が均一で明るく品のある雰囲気。
初心者向けのおススメフォント

Googleフォントは読み込みに時間がかかるため、ページ表示速度が遅くなる傾向があります。
初心者は使用しない方が無難です。

ヘッダー・フッターのカスタマイズ

ヘッダーとフッターをカスタマイズすることで、サイト内の回遊性を高めることができます。

3.ヘッダーデザインの変更

特にPC閲覧時のヘッダーは目に留まりやすいため、他サイトと差別化できる目立ちます。
少し難しめですが、通常は気づきにくい特別なヘッダー設定を以下記事でご紹介しています!

ヘッダーには記事一覧やカテゴリーページなど、回遊率を高めるページへのリンクを貼ると良いでしょう。

4.フッターに便利なリンクを設置

フッターには通常、信頼性を高めるためのリンクを貼ります。
利用規約やプライバシーポリシーなど、サイトを説明するためのページを準備しましょう。

記載内容の細かい部分は、法律改正や時代の流れで時折変わることがあります。
そのため規則系の専門家が説明しているサイトを検索いただき、最新情報を参照してください。

フッターは信頼性を高めるものなので、カスタマイズは極力避けた方が無難です。
強いてあげるなら、フッターを3列にすることでリンクを目立たせることができます。

affinger6のフッター設定欄
フッターを2or3列にするには?

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

affinger6のフッターを3列に設定した例
AFFINGER6のフッターを3列に設定した例

記事の見やすさをアップするレイアウト変更

記事の中でも、タイトルや見出しは特に大事な要素です。

まず読者は、記事タイトルを見て読むかどうかを決めます。
さらに記事の概要を把握したがるため、はじめに見出しや目次を見る傾向があります。

5.記事タイトルのデザイン変更

記事タイトルは「視覚的に目を引くデザイン」が重要です。
しかしあくまで本文がメインなので、タイトルが目立ちすぎても意味がありません。

affinger6の記事タイトル設定
AFFINGER6の記事タイトル設定

外観 > カスタマイズ > 見出しタグ(hx)/ テキスト > 記事タイトル と進みます。

ここで文字色や背景色を設定するだけで、だいぶ他サイトと差別化が可能です。
記事タイトルの下部にある「調整」で文字を中央揃えにするくらいでも良いでしょう。

シンプルすぎず、少しカスタマイズするのがポイントです。
もう一度言いますが、記事タイトルが目立ちすぎても良くありません。

6.見出しの装飾

同じく見出しも、本文を読んでもらえるように少し目立たせるようにしましょう。

affinger6のH2タグ設定
AFFINGER6のH2タグ設定

外観 > カスタマイズ > 見出しタグ(hx)/ テキスト > H2タグ と進みます。

ここで文字色や背景色を設定するだけで、だいぶ他サイトと差別化が可能です。
記事タイトルの下部にある「調整」で文字を中央揃えにするくらいでも良いでしょう。

シンプルすぎず、少しカスタマイズするのがポイントです。
もう一度言いますが、記事タイトルが目立ちすぎても良くありません。

H3タグも同様に設定しましょう。
H4タグ以降は、そもそもタグを使わない人もいるでしょう。必要に応じて設定してください。

アクセスを増やすための設定

サイトの回遊率を上げることで、各ページへのアクセス数を増やすことができます。
別のページへ誘導する設定もしておきましょう。

7.記事一覧のカスタマイズ

人気の記事やおススメの記事を紹介することで、自信のあるコンテンツに誘導することができます。

AFFINGER6は、他テーマでよくある「自動的に閲覧数上位の記事を表示」ではなく、「任意の記事を手動表示」なので戦略に合わせて表示する記事をカスタマイズ出来る点が魅力です。

affinger6のおススメ・人気記事設定
affinger6のおススメ・人気記事設定

AFFINGER管理 > ヘッダー下 / おすすめ > おすすめ記事一覧 と進みます。
ここにある「任意の記事を指定」の欄に、一覧表示させたい記事の投稿IDを設定します。

投稿IDの確認方法

AFFINGER6では、投稿ID一覧を表示させると、各記事のIDが表示されています。
※IDが表示されないテーマもあるので、表示されているAFFINGER6は有難い!

AFFINGER6での投稿ID
AFFINGER6での投稿ID

8.パンくずリストのカスタマイズ

AFFINGER6では自動でパンくずリストが生成・表示されます。

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

affinger6のパンくずリスト設定
affinger6のパンくずリスト設定

外観 > カスタマイズ > 見出しタグ(hx)/ テキスト > 投稿日時・ぱんくず・タグ と進みます。
基本テキスト色を変更すると、投稿日時やぱんくずのテキスト色が変わります。
デフォルト色ではやや暗めで目立たないため、リンクっぽい青色など、サイトに合わせて少し目立つ色に変えてみましょう!

カスタマイズをすることで、他のサイトと差別化されることで、自サイトの魅力がアップします。

AFFINGER6は設定が多いため、使いこなすまでには時間がかかります。
正直、この記事で紹介した設定だけでは物足りないと思います。
まずは簡単な項目から取り組み、少しずつステップアップしましょう!

シェア大歓迎!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次