アフィンガーの機能を使いこなしてサイトのオリジナリティを出したい。
この記事ではこんな悩みを解決していきます。
AFFINGER6（アフィンガー6）はカスタマイズ性能が非常に高く、デザインを自分好みに作り込める優れたWordPressテーマです。
一方で、カスタマイズ性能が優れているがゆえに、「どんな設定ができるの？」「ここの設定はどうやるの？」といった疑問も多いのではないかと思います。
そこで、本記事ではAFFINGER6（アフィンガー6）を使いこなしてオリジナリティ溢れるサイトを作るためのカスタマイズ方法を徹底解説していきます。
記事の最後にはご意見箱も用意しました！この記事にないカスタマイズ方法で記事にしてほしい内容があればぜひリクエストください！
AFFINGER6を検討中の方
AFFINGER6の導入を検討中の方は「AFFINGER6を4年使用した感想・レビュー」も読んでみてください。
実際にAFFINGERを4年利用した経験をもとに、本音でレビューしました。メリット・デメリットを包み隠さず感想を書きましたので、きっと役に立つと思います。
【永久保存版】AFFINGER6(アフィンガー)のカスタマイズ方法
この記事はアフィンガー6でできるカスタマイズ方法の永久保存版です。
大きく以下の7つの項目に分けてカスタマイズ方法を紹介していきます。
アフィンガーのカスタマイズ方法で迷ったことがあればぜひ参考にしてみてください！
AFFINGER6カスタマイズ方法初期設定編
AFFINGER6（アフィンガー6）を導入したらまずやっておきたいのが初期設定です。
初期設定を済ませておかないと記事を書いてブログ運営していくのに困ることがあるので、まず最初に設定を済ませておきましょう。
具体的には以下の設定を済ませておくことをおすすめします。
- パーマリンクの更新
- デザインパターンの選択
- 吹き出しアイコン設定
- トップページのSEO
- SNSのOGP設定・Twitter設定
- 最低限必要なプラグインの導入
- Googleサーチコンソールとの連携
- Googleアナリティクスとの連携
初期設定についての記事は【Affinger6(アフィンガー)の初期設定】最適なサイト作りにやっておきべき8つの項目を解説をご覧ください。
AFFINGER6カスタマイズ方法トップページ編
トップページのデザインを整える設定について解説します。
スライドショーの設置
ブログサイトでよく見かける記事一覧のスライドショー表示を設定できます。
他のテーマではプラグインが必要だったりしますが、アフィンガーなら標準の機能で簡単に設定できます。
表示するスライドショーは任意の記事にしたり、スライド速度を変えたり細かい設定もできるよ。
スライドショーをトップページに設置したい！という方は【全6パターン】AFFINGER6でスライドショーを設置する方法を参考にしてください。
AFFINGER6カスタマイズ方法投稿ページ編
最も読者の目にとまる投稿ページのカスタマイズ方法を解説します。
フォント設定
フォントは記事の読みやすさやサイトイメージに関係します。
アフィンガーのフォント設定はサイズやカラー設定など、かなり細かく設定できます。
フォント設定について詳しく知りたい方はAFFINGER6(アフィンガー)のフォント設定を解説！文字サイズや色を調整する方法をご覧ください。
見出しデザイン
見出しは読者が記事のポイントを伝えるためにとっても大事な要素です。
記事の内容を読んでもらうには、見出しで読者を惹きつけられるかどうかが鍵と言っても過言ではないくらいです
そんな見出しのデザインをカスタマイズする方法を以下の記事で紹介しています。
»AFFINGER6(アフィンガー6)の見出しデザインカスタマイズ方法を解説
行間・余白調整
インターネットで調べ物をするときに「文字で埋め尽くされた記事」と「適度な余白がある記事」はどちらを読みたいでしょうか。
余白や行間がある程度あった方が読みやすくはないでしょうか。
アフィンガーでも余白や行間が設定できるので、テーマを導入したら初期設定から変更しておくのをおすすめします。設定方法は行間と余白を調整する4つの方法【適切な使い分けも解説】で解説しています。
アイキャッチ画像
アフィンガー6ではアイキャッチ画像の表示デザインやサイズを自由にカスタマイズすることができます。
たとえば、アイキャッチの表示デザインでは以下のように複数パターン用意されています。
- 角丸にする
- 正方形にする
- ポラロイド風にする
- セロテープ風にする
アイキャッチ画像はブログ記事の顔とも言えます。少しでもクリックしたくなるように工夫を凝らしましょう。
アフィンガー6でアイキャッチ画像をカスタマイズする方法はAFFINGER6でアイキャッチ画像を設定する方法【最適サイズも紹介】をご覧ください。
会話吹き出し
記事を書く際に便利な会話風の吹き出しデザインを最大8つまで簡単に設定できます。
こんな感じの吹き出しデザインが簡単に作れるよ
また以下のようなデザイン変更も簡単にできます。
- 吹き出しの色を変える
- アイコンを大きくする
- アイコンを動かす
会話風の吹き出しを使いたいという方はアフィンガーの会話吹き出しの使い方・カスタマイズ方法【デザイン追加あり】を参考にカスタマイズしてみてください。
目次設置
読者のユーザービリティを上げるために目次は絶対に設置しておいた方がいいです。
記事に何が書かれているかを探すとき、まず目次を見てますよね
アフィンガーで目次を設置する方法は全部で3パターンあります。
詳しい解説はAFFINGER6(アフィンガー6)で目次を作成する3つの方法を解説をチェックしてくださいね。
AFFINGER6カスタマイズ方法ヘッダーエリア編
画面上部に固定されるヘッダーエリアのカスタマイズ方法を解説していきます。
ヘッダーエリアではブログでよく見かけるカスタマイズをやっていきます。
- ヘッダーメニュー
- インフォメーションバー
ヘッダーメニュー
アフィンガーではヘッダーメニューの設定箇所が多く色々なパターンの設定ができます。
具体的には次の3箇所に設定可能です。
- ヘッダー画像の上(デフォルト設定)
- ヘッダー画像の下
- サイトタイトルの右
割と設定方法が複雑だったりするので、詳しくは【アフィンガー6】PC用ヘッダーメニューの設定方法をわかりやすく解説という記事で説明しているのでぜひ。
インフォメーションバーの設置
アフィンガーのウィジェットを使うと、推しの記事やページに誘導したい場合に効果的なインフォメーションバーも簡単に設置できます。
また、次のようなデザインも自由に変更ができます。
- 色・デザイン
- フォント設定
- 幅の変更
- アイコンを表示
- 流れるインフォメーションバーにする
詳しくは【徹底解説】AFFINGER6でインフォメーションバーを設置する方法をご覧ください。
AFFINGER6カスタマイズ方法サイドバー編
ここからは、メインエリアの横にあるサイドバーのカスタマイズ方法を説明します。
人気記事の表示
閲覧数の多い記事や、読者に読んでもらいたい記事を一覧にして表示することができます。
AFFINGERでは記事IDで人気記事として表示したい記事を任意で選ぶことができます。
おすすめ記事一覧を表示したい方はAFFINGER6でよく読まれる人気記事・おすすめ記事一覧を表示する方法を参考にしてみてください。
プロフィールカード作成
アフィンガーでは管理者のプロフィールをサイト内の任意の場所に設置することができます。
プロフィールの表示は、下の画像のような「デフォルト」と「カード型」の2パターンあります。
デザイン面でカード型の方が圧倒的にいいのでカード型にカスタマイズするのがおすすめです。
デフォルトからカード型にする方法はAFFINGER6でプロフィールカードを作成・カスタマイズする方法の手順に沿ってカスタマイズしてみてください。
AFFINGER6カスタマイズ方法その他よくあるカスタマイズ
こんなカスタマイズはAFFINGER6でできないの？といったブログサイトでよく見かけるデザインの設定方法を紹介します。
- SNSボタンの設置
- ランキンの作成
- お問い合わせフォームの設置
- Googleアドセンスの広告を表示する
- アフィンガー独自のアイコン一覧
それでは順番に見ていきましょう！
SNSボタンの設置
SNSボタンの役割はユーザーがコンテンツを共有したり、自分のSNSアカウントにリンクしたりできます。
AFFINGERではSNSボタンにも複数デザインが用意されていて、簡単に表示変更できます。
SNSボタンのカラー変更なんかも簡単にできますよ
AFFINGER6のSNSボタン設定方法を解説【当記事オリジナルカスタマイズも紹介】の記事を参考にしていただければ、5分もあればサクッと設定できます。オリジナルデザインも用意したのでぜひご覧ください。
ランキング作成
アフィンガーには比較サイトなどでよく見かけるランキング表示が標準機能で備わっています。
決まったテンプレートに必要な情報を入力していくだけで簡単にランキング作成ができるので、ブログ初心者でもおしゃれなランキングが作れますよ。
具体的には次のような設定ができます。
- 商品画像
- スター表示
- 商品の説明文
- リンクボタンの設置
作ったランキングを表示する方法まで【テンプレート使用するだけ】AFFINGER6でランキングを作成する方法で紹介しています。
お問い合わせフォーム設置
当ブログでおすすめのお問い合わせフォームは『WPForms』というプラグインを利用した方法です。
ContactForms7をおすすめしているブログが多いですが、直感的にフォーム作成できるためWPFormsを当ブログでは推しています。
問い合わせフォームは何かと必要になるのでテーマ導入したら一緒に導入しておきましょう。
»AFFINGER6にWPFormsでお問い合わせフォームを設置する【ContactForm7より簡単】
Googleアドセンス広告の設置
通常、アドセンス広告の審査ではテーマのfunctions.phpをいじる必要がありますが、アフィンガーならそんなややこしい設定も不要です。
またアフィンガーでは以下のような場所に自由に広告を貼ることができます。
- 自動広告の設置
- 任意の場所にショートコードで表示
- 記事下に自動表示
- インフィード広告
- 見出し前広告
それぞれの設定方法についてはAFFINGER6でアドセンス広告を貼る方法｜審査〜設置まで解説で説明しました。
つまづきやすい審査コードの設置方法も説明しているのでアドセンス広告の導入を考えている人は参考にしてみてください。
独自アイコンを使う
アフィンガーにはテーマ独自のアイコンが用意されています。
FontAwesomeを使えば豊富なアイコンが使える反面、外部CSSを読み込むため表示速度が遅くなります。一方でアフィンガーのアイコンを使えば、表示速度の心配なく使うことができます。
アイコンを使うにはショートコードが必要です。詳しい使い方とアイコン一覧は【FontAwesome不要】AFFINGER6のアイコン一覧と使い方からどうぞ！
おすすめのプラグイン
多機能なアフィンがーですがプラグインに頼るべきところはしっかり頼っていきましょう。
アフィンガーを使ってるならこれは入れた方がいい！ってプラグイン12選を以下の記事にまとめてみました。ぜひとも参考にしてみてください。
»【全て無料】アフィンガー6におすすめ・必須プラグイン12選！
AFFINGERとAFFINGER EXの違いは？
AFFINGER6にEX版というのがあるみたいだけど何が違うの？
アフィンガーには大きく分けて2つのテーマがあります。
- AFFINGER6
- AFFINGER6 EX版
どちらも使った僕の経験も踏まえて、それぞれの違いや、EX版を選ぶべき人がどんな人かということについてお話ししていこうと思います。
AFFINGER EX版の違いについて
EX版はデザイン・機能ががさらにパワーアップして、通常版にはない機能が20種類以上も追加されます。
追加される機能の例としては、、、
- トップページ記事一覧のカードデザイン化
- トップページ1カラム表示
- カウントダウン機能
- 自動更新する年月を設定
これはごく一部の例です。
AFFINGER6 EXの強みはアフィリエイト対策に特化した機能が充実してるところです！
EX版を使った方がいい人
通常版からEX版に変更するには追加料金が必要なので、EX版にすべきか悩む人もいるでしょう。
悩んだ末に通常→EXに変えた僕の経験則で言うと、次のような人はEX版にしても損することはないかなと思います。
- 収益化を加速したい人
- EX版を購入するかモヤモヤしてる人
アップグレードに12,000円必要ですが、思い切って購入する価値は十分ありますよ。
EX版の機能についてもっと知りたい方はAFFINGER6 EXを使った感想・レビュー【通常版との違いを徹底解説】もチェックしてみてください。
【購入者特典】当ブログ限定AFFINGERカスタマイズ方法を公開
当ブログ経由でAFFINGER関連の製品を購入した方に限定公開している特典を用意しました。
『より効率的で使いやすく、よりオシャレに、アフィンガーを購入してよかった！』をコンセプトに、アフィンガーをとことん使い倒すためのノウハウを特典をとして用意しています。
特典対象のAFFINGER製品は次の4つです。
特典内容は今後も少しずつ拡充していく予定です！
【ご意見箱】こんなカスタマイズできない？
アフィンガーのカスタマイズについてご意見を用意しました。
- AFFINGERの〇〇の機能のカスタマイズ方法も記事にしてほしい
- 他のテーマでできるけどアフィンガーでもできないか？
などなど。
いただいた意見を参考にこのブログを読んでご覧いただいている方のお役に立てればと考えています。
すべてのご要望にお応えできるわけではないですが、投稿は無料・自由なのでぜひぜひお気軽にどうぞ。
