●AFFINGER6でカッコイイサイトをデザインしたいなあ。カスタマイズ方法を教えてほしい。
今回はこんなお悩みを解決していきます。
こんな方におすすめ
- AFFINGER6のカスタマイズ方法を知りたい
- 初心者でも簡単にAFFINGER6を操作したい方
- AFFINGER6に関する疑問を解決したい方
本記事の信頼性
AFFINGER6はブログで収益化するには最適なテーマです。そのため多くのブロガーに愛用されています。
しかし、
- 操作が難しくてわからない
- カスタマイズしてカッコいいサイトにしたい
- どうやっておしゃれなサイトを作るんだろう
こんな疑問や悩みがあるかと思います。僕もAFFINGER6を購入したばかりの時はカスタマイズに関する悩みがたくさんありました。
そこで今回はAFFINGER6のカスタマイズ方法について徹底解説していきます。
本記事を読めば、WordPressブログ初心者でも簡単にAFFINGER6をカスタマイズできるので、ぜひ参考にしてみてください。
ちなみに当サイト経由でAFFINGER6を購入頂いた方に限定特典14個を無料でプレゼントしています。収益6桁を達成したノウハウを詰め込んでいます。
＼ブロガー人気No.1有料テーマ／
※クリックすると公式サイトへアクセスします
詳細はAFFINGER6の評判は？利用者のガチ評判をレビュー！にて解説しているので、気になった方はご覧ください。
超特化祭2024実施中
期間 2023/12/23 ～ 2024/ 1 / 10
.
なんと2024年1月10日まで超お得なキャンペーン実施中です。以下対象商品がお得にゲットできます。
.
特化祭2024
.
ACTION PACK3は2万円以上お得に。
.
AFFINGER6のキャンペーンは1年に1回このタイミングくらいです。AFFINGER6 EX版が欲しい方はこの機会に検討してみてください。
.
＼期間限定キャンペーン中／
＼PACK3の詳細なら／
それでは早速ご紹介していきます。
目次
AFFINGER6(ACTION)とは？【カスタマイズ自由なテーマ】
AFFINGER6(ACTION)とは？【カスタマイズ自由なテーマ】
それではまずAFFINGER6の特徴について見ていきましょう。
AFFINGER6（アフィンガー6）の特徴
AFFINGER6の特徴は下記になります。
アフィンガー6（AFFINGER6）の特徴
| テーマ名 | ACTION（AFFINGER6版） |
| 制作元 | 株式会社オンスピード |
| 料金 | 14,800円（税込） |
| 使用制限 | 複数サイトで使用可能 |
| カスタマイズ性 | ◎ |
| 内部SEO対策 | ◎ |
| 表示速度 | ◎ |
| amp化対応（モバイル高速表示） | ◎（記事事に設定可能） |
| デザインテンプレート | ◎（デザイン済みデータ配布） |
アフィンガー6は
- デザイン性
- カスタマイズ性
- 表示速度
どれをとっても申し分なしでして、アフィリエイターが気になる細かい部分までカスタマイズできるようにテーマです。
実際僕は完全ブログ初心者でしたが、AFFINGER6を使用することで、収益5桁を達成することができました。
AFFINGER6を使用していなければ、サイト設計が上手くいかず未だ達成できていなかったかもしれません。
当ブログはAFFINGER6のシンプルなプランを購入し、その後さらなる追加機能を求めてAFFINGER6 EX版を購入しました。
AFFINGER6をカスタマイズするメリット
AFFINGER6をカスタマイズするメリットはたくさんあります。が大きく3つご紹介します。
AFFIGER6をカスタマイズするメリット
- サイトをおしゃれにできる
- 他と差別化できる
- テーマの良さを最大限生かせる
上記の通り。特に有料テーマのAFFINGERを使うことで、他のサイトと差別化を図れるのは大きな魅力です。
無料テーマだとどうしても似たようなサイトになってしまうことも。またカスタマイズすることでテーマの良さを最大限活用することができます。
AFFINGER6を初心者がカスタマイズするのは難しいのか？
とはいえAFFINGER6を初心者がカスタマイズするのは難しいと言われることも。
これは確かにそうである部分もあります。なぜなら、機能が多すぎるから。
初心者がいきなり多すぎる機能を全て使うのは・・ちょっとしんどいですね。
しかしAFFINGER6のカスタマイズは覚えてしまえば難しいものはありません。僕がつまづいた箇所含めてご紹介するので安心してください！
【AFFINGER6】カスタマイズ方法①：トップページ編
【AFFINGER6】カスタマイズ方法①：トップページ編
まずはAFFINGER6のトップページのカスタマイズ方法についてご紹介します。
その①：ヘッダーエリアのカスタマイズ
ヘッダーエリアはブログで最初に目につく部分でもあるので、カスタマイズしておきましょう。
AFFINGER6：ヘッダーエリアの編集
上記の部分ですね。ヘッダーエリアにカード型リンクを設ければ、おすすめの記事を見てもらえるチャンスが増えますよ。
設定方法の詳細はヘッダーカードにカード型リンクを設定する方法＆カスタマイズ方法にて解説してるので、参考にしてみてください。
-
【AFFINGER6】ヘッダーカードにカード型リンクを設定する方法
続きを見る
その②：インフォメーションバーのカスタマイズ
インフォメーションバーとは、ヘッダーエリア上に表示するラインのようなもの。下記画像をご覧ください。
AFFINGER6：インフォメーションバー
当サイト（Tetsu blog）では、WordPressブログの記事をインフォメーションバーに流しています。
インフォメーションバーを活用することで、読者に注目してほしい情報を提供することができます。こちらは少し長くなるので、下記記事でまとめてます。
設定しておいて損はないので、サクッとインフォメーションバーを作っておきましょう。
その③：ホームページのカスタマイズ
続いてホームページのカスタマイズを行います。
固定ページを新規作成
まず固定ページを作成して、トップページに設定することで、自分のカスタマイズしたページを表示できます。お好みで固定ページを作成しましょう。
固定ページの作成ができたら、外観⇒カスタマイズ⇒ホームページ設定⇒ホームページの欄で、作成した固定ページを選択します。
ホームページのカスタマイズ方法
上記画像の通りですね。設定ができたら固定ページにトップページと表示されます。
フロントページの表示
上記画像の通り。ここまでできれば、フロントページに作成した固定ページが表示できました。
当ブログでいうところのhttps://tecchanblogs.com/のページですね。
その④：スライドショーのカスタマイズ
トップページに新着記事をスライドショーに表示させておしゃれに見せることができます。
スライドショーのカスタマイズ方法
上記の通りですね。カテゴリーごとにスライドショーすることで、トップページを訪れた読者に新着記事を見てもらいやすくなるので効果があるかと。
トップページにスライドショーを設定したい方は、ぜひ実施してみてください。
詳細な設定方法については、少し長くなるのでAFFINGER6でスライドショー設定方法【初心者でも簡単にできます】にて解説していますので参考にご覧ください。
-
AFFINGER6でスライドショー設定方法【初心者でも簡単にできます】
続きを見る
その⑤：トップページ＆CSSのカスタマイズ
ここまでAFFINGERの固定ページのカスタマイズ方法について解説しました。
しかしAFFINGERを使いたいけど、色々と自分でカスタマイズして時間をかけたくない、という方もいると思います。そんな方向けにトップページとCSSのカスタマイズを当ブログで公開しています。
AFFINGER6 トップページ＆CSSカスタマイズ方法
上記のようなサイトを作るコードを公開しているので、3分程度で作れるかと。当サイト経由でAFFINGERを購入頂いた方へ限定公開しておりますので、サクッと良い感じのホームページを作りたい方はご検討してみてください。
【AFFINGER6】カスタマイズ方法②：サイドバー編
【AFFINGER6】カスタマイズ方法②：サイドバー編
続いてAFFINGER6のサイトバーのカスタマイズ方法についてサクッとご紹介します。
サイドバーはPC版で記事を閲覧されたとき目につく部分なので、良い感じに仕上げておくことでサイト全体の質向上につながります。
その①：プロフィールカードのカスタマイズ方法
プロフィールカードをサイドバーに表示する方法についてです。
AFFINGER6 プロフィールカードのカスタマイズ方法
上記のようなプロフィールカードはサクッと作成出来ちゃいます。
AFFINGER6 プロフィールカードを設置する方法【書き方も解説】を参考に設定してましょう。
-
AFFINGER6 プロフィールカードを設置する方法【書き方も解説】
続きを見る
その②：サイドバーのおすすめ記事一覧のカスタマイズ方法
AFFINGER6では、サイドバーに任意の記事を表示することができます。
収益性の高い記事を表示することで、読者に記事を読んでもらえるチャンスを増やすことが可能。またこの記事はスクロールしても追従するので、読者の目に留まるようになっています。
AFFINGER6 サイドバーの記事一覧を追従するカスタマイズ
上記画像の通り。画面をスクロールしてもお気に入りの記事が追従するので、目につきますね。
こちらもAFFINGER6 サイドバーの『おすすめ記事一覧』を追従させる方法にて解説しているので、サクッと設定しておきましょう。
-
AFFINGER6 サイドバーの『おすすめ記事一覧』を追従させる方法
続きを見る
その③：サイドバーに目次を表示するカスタマイズ方法
またサイドバーに記事の目次を表示するカスタマイズもできます。
AFFINGER6 サイドバー目次のカスタマイズ
上記画像の通りです。目次を表示することで、
- 読者が記事のどこを読んでいるかわかる
- 読みたい箇所までジャンプできる
- 記事の全体像がわかる
といった感じで読み手にメリットがあるかと。
設定しておきたい方は、AFFINGER6でサイドバーに目次を表示する方法を参考に設定しておきましょう。
-
AFFINGER6でサイドバーに目次を表示する方法【ブログ初心者向け】
続きを見る
合わせて読みたい
なお、そもそもブログに目次はいるの？とお悩みの方は、ブログ記事に目次はいらない？必要？目次の作成方法を解説【初心者向け】を参考にご覧ください。
【AFFINGER6】カスタマイズ方法③：フォント編
【AFFINGER6】カスタマイズ方法③：フォント編
続いてフォントのカスタマイズについてです。
フォントは見栄えが変わる部分なので、細かい部分ですがこだわって決めていきましょう。
その①：フォントサイズ＆文章の行間
当ブログのフォントサイズ＆行間について公開します。
スマホ閲覧時
スマホ閲覧時フォントサイズ
タブレット閲覧時
タブレット閲覧時フォントサイズ
PC閲覧時
PC閲覧時フォントサイズ
上記のような感じ。特にフォントサイズは、媒体によって見やすい・見にくいがありますので、それぞれ個別に設定しています。
行間についても読みやすさに影響するため、お好みで設定してみてください。
その②：フォントカラーのカスタマイズ
当サイトのフォントカラーは『#333333』です。真っ黒ではなく、若干グレーがかっている色になります。
ちなみにYahoo!など多くの大手サイトのフォントカラーはこの色になっています。
詳細は、【AFFINGER6】おすすめの文字サイズと色について解説を参考に設定してみてください。
合わせて読みたい
なお、他サイトのカラーを調べることが可能です。調べ方は【無料】Colorpick Eyedropperの使い方【Google chrome拡張機能】で解説しているので気になった方はチェックしてみて下さい。
その③：フォント種類のカスタマイズ
当ブログ（Tetsu blog)のフォント種類は以下のようにカスタマイズしています。
AFFINGER6 フォント種類のカスタマイズ
管理画面からAFFINGER管理⇒全体設定で画面下にスクロールすれば上記のように設定できます。
フォントのカスタマイズはサイトの表示スピードに影響するため、特に気にならない方は、デフォルトのままでOKです。
【AFFINGER6】カスタマイズ方法④：記事内の装飾編
【AFFINGER6】カスタマイズ方法④：記事内の装飾編
続いて記事内で使える装飾のカスタマイズについて3つほどご紹介します。
その①：ブログカードのカスタマイズ
ブログカードとは記事内で使えるカード型のリンクのこと。
AFFINGER6 ブログカードの例
上記のような感じですね。簡単にカスタマイズが可能です。
【AFFINGER6】ブログカード・ラベルの作成方法を紹介【簡単カスタマイズ】を参考にカスタマイズしてみましょう。
-
【AFFINGER6】ブログカード・ラベルの作成方法を紹介
続きを見る
その②：吹き出しのカスタマイズ
吹き出しはブログ内でよく使う項目です。
詳細は下記記事でまとめているので、まだカスタマイズしてない方はチェックしてみましょう。
-
AFFINGER6で吹き出しの作成方法を解説【右側から表示する方法もあり】
続きを見る
その③：表のカスタマイズ
AFFINGER6の表カスタマイズ
上記のような感じで、表をカスタマイズできます。
表をよく使う方はカスタマイズしておきましょう。
-
AFFINGER6簡単な表の作成方法を解説【表を横スクロールする作り方も】
続きを見る
【AFFINGER6】カスタマイズ方法⑤：その他編
【AFFINGER6】カスタマイズ方法⑤：その他編
最後にその他編として、AFFINGER6のカスタマイズで気になるところをまとめました。
- まだ設定してなかった
- ここはカスタマイズしておこう
という箇所があれば参考にしてみてください。
その①：AFFINGER6で使用するプラグイン
-
AFFINGER6に必須のおすすめプラグイン10個・不要プラグイン3個を徹底解説
続きを見る
その②：Googleアドセンスの申請をカスタマイズ
-
AFFINGER6でGoogleアドセンス審査用コードを貼り付ける手順【3分でOK】
続きを見る
その③：ファビコンのカスタマイズ
-
AFFINGER6でファビコン設定をする方法・手順を解説【初心者向け】
続きを見る
AFFINGER6でカスタマイズを細部まで行った結果
AFFINGER6でカスタマイズを細部まで行った結果
ここまでAFFINGER6のカスタマイズ方法についてご紹介しましたが、カスタマイズするとどうなるのかといった疑問があるかもしれません。
結論、AFFINGER6でカスタマイズした結果、当ブログの多くの記事は検索上位を獲得することができました。
AFFINGERで検索流入1位を量産できた
AFFINGERを使用して検索順位1位を獲得①
AFFINGERを使用して検索順位1位を獲得②
上記画像の通りです。
細部までカスタマイズすることで、
- 読者の滞在時間＆周遊率が上がる
- Googleからのサイト評価が高まる
- 記事全体の評価が高まる
といった感じで、SEO的にいいことばかりです。元々SEO対策が万全なAFFINGER6だからこそ、細かい部分までこだわって設定することでさらに効果が出るかと思います。
まとめ：AFFINGER6（ACTION）をカスタマイズして最大限活用しよう
まとめ：AFFINGER6（ACTION）をカスタマイズして最大限活用しよう
今回はAFFINGER6のカスタマイズ方法について解説しました。
当サイトのカスタマイズ方法を参考にAFFINGER6を最大限有効活用してみてください。
ブログで稼ぎたい、結果を出したいという方は、早期に無料テーマから有料テーマに変更することで収益速度も上がります。
本記事を読んでアフィンガーがいいなと思った方は、ぜひレビュー記事もチェックしてみてください。
＼当サイト限定特典+公式特典付き／
※クリックすると公式サイトへアクセスします
ちなみに当サイトはAFFINGER通常版からAFFINGER PACK3を購入し、収益がグンと伸びました。収益をさらに伸ばしたい方は、参考に以下もどうぞ。
-
【AFFINGER PACK3】AFFINGER6 EX版を徹底レビュー【感想を公開】
続きを見る
関連記事AFFINGER6の初期設定14個のやり方を徹底解説