AFFINGER

AFFINGER6のカスタマイズ方法まとめ【目的別にデザインを設定しよう】

困ってる人
●AFFINGER6を先日購入しましたが、カスタマイズの仕方がよく分かりません。

●AFFINGER6でカッコイイサイトをデザインしたいなあ。カスタマイズ方法を教えてほしい。

 

今回はこんなお悩みを解決していきます。

 

こんな方におすすめ

  • AFFINGER6のカスタマイズ方法を知りたい
  • 初心者でも簡単にAFFINGER6を操作したい方
  • AFFINGER6に関する疑問を解決したい方

 

本記事の信頼性

当ブログはAFFINGER6を使用して月5桁の収益を達成しています。AFFINGER6のカスタマイズ方法について詳しく解説できます。

 

AFFINGER6はブログで収益化するには最適なテーマです。そのため多くのブロガーに愛用されています。

 

しかし、

  • 操作が難しくてわからない
  • カスタマイズしてカッコいいサイトにしたい
  • どうやっておしゃれなサイトを作るんだろう

こんな疑問や悩みがあるかと思います。僕もAFFINGER6を購入したばかりの時はカスタマイズに関する悩みがたくさんありました。

 

そこで今回はAFFINGER6のカスタマイズ方法について徹底解説していきます。

 

本記事を読めば、WordPressブログ初心者でも簡単にAFFINGER6をカスタマイズできるようになると思うので、ぜひ参考にしてみてください。

 

ちなみに当サイト経由でAFFINGER6を購入頂いた方に限定特典10個を無料でプレゼントしています。購入を考えてる方は、ぜひお得にゲットしてAFFINGER6をスタートしてみてください。

 

 

\ブロガー人気No.1有料テーマ/

AFFINGER6の詳細はコチラ

※クリックすると公式サイトへアクセスします

 

合わせて読みたい

なお、購入特典の詳細やレビューについては、AFFINGER6の特典10個付きレビュー!評判やメリット・デメリットにて徹底解説しているのでご覧ください。

 

それでは早速ご紹介していきます。

 

目次

 

AFFINGER6(ACTION)とは?【カスタマイズ自由なテーマ】

AFFINGER6(ACTION)とは?【カスタマイズ自由なテーマ】

AFFINGER6(ACTION)とは?【カスタマイズ自由なテーマ】

 

それではまずAFFINGER6の特徴について見ていきましょう。

 

AFFINGER6(アフィンガー6)の特徴

 

AFFINGER6の特徴は下記になります。

 

アフィンガー6(AFFINGER6)の特徴

テーマ名ACTION(AFFINGER6版)
制作元株式会社オンスピード
料金14,800円(税込)
使用制限複数サイトで使用可能
カスタマイズ性
内部SEO対策
表示速度
amp化対応(モバイル高速表示)◎(記事事に設定可能)
デザインテンプレート◎(デザイン済みデータ配布)

 

アフィンガー6は

  • デザイン性
  • カスタマイズ性
  • 表示速度

どれをとっても申し分なしでして、アフィリエイターが気になる細かい部分までカスタマイズできるようにテーマです。

 

実際僕は完全ブログ初心者でしたが、AFFINGER6を使用することで、収益5桁を達成することができました。

 

AFFINGER6を使用していなければ、サイト設計が上手くいかず未だ達成できていなかったかもしれません。

 

当ブログはAFFINGER6のシンプルなプランを購入し、その後さらなる追加機能を求めてAFFINGER6 EX版を購入しました。

 

始めから多くの機能をカスタマイズしたい方は、EX版から始めるのもいいかもしれません。

 

AFFINGER6をカスタマイズするメリット

 

AFFINGER6をカスタマイズするメリットはたくさんあります。が大きく3つご紹介します。

 

AFFIGER6をカスタマイズするメリット

  • サイトをおしゃれにできる
  • 他と差別化できる
  • テーマの良さを最大限生かせる

上記の通り。特に有料テーマのAFFINGERを使うことで、他のサイトと差別化を図れるのは大きな魅力です。

 

無料テーマだとどうしても似たようなサイトになってしまうことも。またカスタマイズすることでテーマの良さを最大限活用することができます。

 

どうせゲットしたAFFINGER6をカスタマイズして最大限有効活用したほうがいいですね。

 

AFFINGER6を初心者がカスタマイズするのは難しいのか?

 

とはいえAFFINGER6を初心者がカスタマイズするのは難しいと言われることも。

 

これは確かにそうである部分もあります。なぜなら、機能が多すぎるから。

初心者がいきなり多すぎる機能を全て使うのは・・ちょっとしんどいですね。

 

しかしAFFINGER6のカスタマイズは覚えてしまえば難しいものはありません。僕がつまづいた箇所含めてご紹介するので安心してください!

 

と前置きが長くなってしまいましたが、カスタマイズ方法について次にご紹介していきますね。

 

【AFFINGER6】カスタマイズ方法①:トップページ編

【AFFINGER6】カスタマイズ方法①:トップページ編

【AFFINGER6】カスタマイズ方法①:トップページ編

 

まずはAFFINGER6のトップページのカスタマイズ方法についてご紹介します。

 

その①:ヘッダーエリアのカスタマイズ

 

ヘッダーエリアはブログで最初に目につく部分でもあるので、カスタマイズしておきましょう。

 

AFFINGER6:ヘッダーエリアの編集

AFFINGER6:ヘッダーエリアの編集

 

上記の部分ですね。ヘッダーエリアにカード型リンクを設ければ、おすすめの記事を見てもらえるチャンスが増えますよ。

 

設定方法の詳細はヘッダーカードにカード型リンクを設定する方法&カスタマイズ方法にて解説してるので、参考にしてみてください。

 

ヘッダーエリアを編集
【AFFINGER6】ヘッダーカードにカード型リンクを設定する方法&カスタマイズ方法

続きを見る

 

その②:インフォメーションバーのカスタマイズ

 

インフォメーションバーとは、ヘッダーエリア上に表示するラインのようなもの。下記画像をご覧ください。

 

AFFINGER6:インフォメーションバー

AFFINGER6:インフォメーションバー

 

当サイト(Tetsu blog)では、WordPressブログの記事をインフォメーションバーに流しています。

 

インフォメーションバーを活用することで、読者に注目してほしい情報を提供することができます。こちらは少し長くなるので、下記記事でまとめてます。

 

設定しておいて損はないので、サクッとインフォメーションバーを作っておきましょう。

 

 

その③:ホームページのカスタマイズ

 

続いてホームページのカスタマイズを行います。

 

固定ページを新規作成

固定ページを新規作成

 

まず固定ページを作成して、トップページに設定することで、自分のカスタマイズしたページを表示できます。お好みで固定ページを作成しましょう。

 

固定ページの作成ができたら、外観⇒カスタマイズ⇒ホームページ設定⇒ホームページの欄で、作成した固定ページを選択します。

 

ホームページのカスタマイズ方法

ホームページのカスタマイズ方法

 

上記画像の通りですね。設定ができたら固定ページにトップページと表示されます。

 

フロントページの表示

 

上記画像の通り。ここまでできれば、フロントページに作成した固定ページが表示できました。

当ブログでいうところのhttps://tecchanblogs.com/のページですね。

 

続いてトップページのカスタマイズ方法についてもご紹介します。

 

その④:スライドショーのカスタマイズ

 

トップページに新着記事をスライドショーに表示させておしゃれに見せることができます。

 

スライドショーのカスタマイズ方法

スライドショーのカスタマイズ方法

 

上記の通りですね。カテゴリーごとにスライドショーすることで、トップページを訪れた読者に新着記事を見てもらいやすくなるので効果があるかと。

 

トップページにスライドショーを設定したい方は、ぜひ実施してみてください。

 

詳細な設定方法については、少し長くなるのでAFFINGER6でスライドショー設定方法【初心者でも簡単にできます】にて解説していますので参考にご覧ください。

スライドショーのカスタマイズ
AFFINGER6でスライドショー設定方法【初心者でも簡単にできます】

続きを見る

 

その⑤:トップページ&CSSのカスタマイズ

 

ここまでAFFINGERの固定ページのカスタマイズ方法について解説しました。

 

しかしAFFINGERを使いたいけど、色々と自分でカスタマイズして時間をかけたくない、という方もいると思います。そんな方向けにトップページとCSSのカスタマイズを当ブログで公開しています。

 

AFFINGER6 トップページ&CSSカスタマイズ方法

AFFINGER6 トップページ&CSSカスタマイズ方法

 

上記のようなサイトを作るコードを公開しているので、3分程度で作れるかと。当サイト経由でAFFINGERを購入頂いた方へ限定公開しておりますので、サクッと良い感じのホームページを作りたい方はご検討してみてください。

>>AFFINGER6購入者限定ページをチェックする

 

【AFFINGER6】カスタマイズ方法②:サイドバー編

【AFFINGER6】カスタマイズ方法②:サイドバー編

【AFFINGER6】カスタマイズ方法②:サイドバー編

 

続いてAFFINGER6のサイトバーのカスタマイズ方法についてサクッとご紹介します。

 

サイドバーはPC版で記事を閲覧されたとき目につく部分なので、良い感じに仕上げておくことでサイト全体の質向上につながります。

 

その①:プロフィールカードのカスタマイズ方法

 

プロフィールカードをサイドバーに表示する方法についてです。

 

AFFINGER6 プロフィールカードのカスタマイズ方法

AFFINGER6 プロフィールカードのカスタマイズ方法

 

上記のようなプロフィールカードはサクッと作成出来ちゃいます。

 

AFFINGER6 プロフィールカードを設置する方法【書き方も解説】を参考に設定してましょう。

プロフィールを設定
AFFINGER6 プロフィールカードを設置する方法【書き方も解説】

続きを見る

 

その②:サイドバーのおすすめ記事一覧のカスタマイズ方法

 

AFFINGER6では、サイドバーに任意の記事を表示することができます。

 

収益性の高い記事を表示することで、読者に記事を読んでもらえるチャンスを増やすことが可能。またこの記事はスクロールしても追従するので、読者の目に留まるようになっています。

 

AFFINGER6 サイドバーの記事一覧を追従するカスタマイズ

AFFINGER6 サイドバーの記事一覧を追従するカスタマイズ

 

上記画像の通り。画面をスクロールしてもお気に入りの記事が追従するので、目につきますね。

 

こちらもAFFINGER6 サイドバーの『おすすめ記事一覧』を追従させる方法にて解説しているので、サクッと設定しておきましょう。

おすすめ記事一覧
AFFINGER6 サイドバーの『おすすめ記事一覧』を追従させる方法

続きを見る

 

その③:サイドバーに目次を表示するカスタマイズ方法

 

またサイドバーに記事の目次を表示するカスタマイズもできます。

 

AFFINGER6 サイドバー目次のカスタマイズ

AFFINGER6 サイドバー目次のカスタマイズ

 

上記画像の通りです。目次を表示することで、

  • 読者が記事のどこを読んでいるかわかる
  • 読みたい箇所までジャンプできる
  • 記事の全体像がわかる

といった感じで読み手にメリットがあるかと。

 

設定しておきたい方は、AFFINGER6でサイドバーに目次を表示する方法を参考に設定しておきましょう。

サイドバーの目次を設定する
AFFINGER6でサイドバーに目次を表示する方法【ブログ初心者向け】

続きを見る

 

合わせて読みたい

なお、そもそもブログに目次はいるの?とお悩みの方は、ブログ記事に目次はいらない?必要?目次の作成方法を解説【初心者向け】を参考にご覧ください。

 

【AFFINGER6】カスタマイズ方法③:フォント編

【AFFINGER6】カスタマイズ方法③:フォント編

【AFFINGER6】カスタマイズ方法③:フォント編

 

続いてフォントのカスタマイズについてです。

 

フォントは見栄えが変わる部分なので、細かい部分ですがこだわって決めていきましょう。

 

その①:フォントサイズ&文章の行間

 

当ブログのフォントサイズ&行間について公開します。

 

スマホ閲覧時

 

スマホ閲覧時フォントサイズ

 

タブレット閲覧時

タブレット閲覧時フォントサイズ

 

 

PC閲覧時

PC閲覧時フォントサイズ

 

上記のような感じ。特にフォントサイズは、媒体によって見やすい・見にくいがありますので、それぞれ個別に設定しています。

 

行間についても読みやすさに影響するため、お好みで設定してみてください。

 

その②:フォントカラーのカスタマイズ

 

当サイトのフォントカラーは『#333333』です。真っ黒ではなく、若干グレーがかっている色になります。

 

ちなみにYahoo!など多くの大手サイトのフォントカラーはこの色になっています。

 

詳細は、【AFFINGER6】おすすめの文字サイズと色について解説を参考に設定してみてください。

 

合わせて読みたい

なお、他サイトのカラーを調べることが可能です。調べ方は【無料】Colorpick Eyedropperの使い方【Google chrome拡張機能】で解説しているので気になった方はチェックしてみて下さい。

 

その③:フォント種類のカスタマイズ

 

当ブログ(Tetsu blog)のフォント種類は以下のようにカスタマイズしています。

 

AFFINGER6 フォント種類のカスタマイズ

AFFINGER6 フォント種類のカスタマイズ

 

管理画面からAFFINGER管理⇒全体設定で画面下にスクロールすれば上記のように設定できます。

 

フォントのカスタマイズはサイトの表示スピードに影響するため、特に気にならない方は、デフォルトのままでOKです。

 

【AFFINGER6】カスタマイズ方法④:記事内の装飾編

【AFFINGER6】カスタマイズ方法④:記事内の装飾編

【AFFINGER6】カスタマイズ方法④:記事内の装飾編

 

続いて記事内で使える装飾のカスタマイズについて3つほどご紹介します。

 

その①:ブログカードのカスタマイズ

 

ブログカードとは記事内で使えるカード型のリンクのこと。

 

AFFINGER6 ブログカードの例

AFFINGER6 ブログカードの例

 

上記のような感じですね。簡単にカスタマイズが可能です。

 

【AFFINGER6】ブログカード・ラベルの作成方法を紹介【簡単カスタマイズ】を参考にカスタマイズしてみましょう。

関連記事
【AFFINGER6】ブログカード・ラベルの作成方法を紹介【簡単カスタマイズ】

続きを見る

 

その②:吹き出しのカスタマイズ

 

吹き出しはブログ内でよく使う項目です。

 

こんな感じでカスタマイズすることができますよ。

 

詳細は下記記事でまとめているので、まだカスタマイズしてない方はチェックしてみましょう。

関連記事
AFFINGER6で吹き出しの作成方法を解説【右側から表示する方法もあり】

続きを見る

 

その③:表のカスタマイズ

AFFINGER6の表カスタマイズ

AFFINGER6の表カスタマイズ

 

上記のような感じで、表をカスタマイズできます。

 

表をよく使う方はカスタマイズしておきましょう。

関連記事
AFFINGER6簡単な表の作成方法を解説【表を横スクロールする作り方も】

続きを見る

 

【AFFINGER6】カスタマイズ方法⑤:その他編

【AFFINGER6】カスタマイズ方法⑤:その他編

【AFFINGER6】カスタマイズ方法⑤:その他編

 

最後にその他編として、AFFINGER6のカスタマイズで気になるところをまとめました。

 

  • まだ設定してなかった
  • ここはカスタマイズしておこう

という箇所があれば参考にしてみてください。

 

その①:AFFINGER6で使用するプラグイン

 

プラグインはこれでOK
AFFINGER6に必須のおすすめプラグイン10個・不要プラグイン3個を徹底解説

続きを見る

 

その②:Googleアドセンスの申請をカスタマイズ

 

Googleアドセンス
AFFINGER6でGoogleアドセンス審査用コードを貼り付ける手順を解説【3分でOK】

続きを見る

 

その③:ファビコンのカスタマイズ

 

ファビコンの設定
AFFINGER6でファビコン設定をする方法・手順を解説【初心者向け】

続きを見る

 

AFFINGER6でカスタマイズを細部まで行った結果

AFFINGER6でカスタマイズを細部まで行った結果

AFFINGER6でカスタマイズを細部まで行った結果

 

ここまでAFFINGER6のカスタマイズ方法についてご紹介しましたが、カスタマイズするとどうなるのかといった疑問があるかもしれません。

 

結論、AFFINGER6でカスタマイズした結果、当ブログの多くの記事は検索上位を獲得することができました。

 

AFFINGERで検索流入1位を量産できた

AFFINGER5を使用して検索順位1位を獲得①

AFFINGERを使用して検索順位1位を獲得①

 

AFFINGER5を使用して検索順位1位を獲得②

AFFINGERを使用して検索順位1位を獲得②

 

上記画像の通りです。

 

細部までカスタマイズすることで、

  • 読者の滞在時間&周遊率が上がる
  • Googleからのサイト評価が高まる
  • 記事全体の評価が高まる

といった感じで、SEO的にいいことばかりです。元々SEO対策が万全なAFFINGER6だからこそ、細かい部分までこだわって設定することでさらに効果が出るかと思います。

 

AFFINGER6をカスタマイズしてアクセス数をぐんぐん伸ばしていきましょう。AFFINGER6をまだ購入してない方は、早めの導入をおすすめします。

>>AFFINGER6の購入手順をチェックしてみる

 

まとめ:AFFINGER6(ACTION)をカスタマイズして最大限活用しよう

まとめ:AFFINGER6(ACTION)をカスタマイズして最大限活用しよう

まとめ:AFFINGER6(ACTION)をカスタマイズして最大限活用しよう

 

今回はAFFINGER6のカスタマイズ方法について解説しました。

 

当サイトのカスタマイズ方法を参考にAFFINGER6を最大限有効活用してみてください。

 

ブログで稼ぎたい、結果を出したいという方は、早期に無料テーマから有料テーマに変更することで収益速度も上がります。

 

本記事を読んでアフィンガーがいいなと思った方は、ぜひレビュー記事もチェックしてみてください。

 

\当サイト限定特典+公式特典付き/

AFFINGER6の購入・詳細はコチラ

※クリックすると公式サイトへアクセスします

 

関連記事
AFFINGER6の特典10個付きレビュー!評判やメリット・デメリットを徹底解説

続きを見る

 

-AFFINGER