AFFINGER5

AFFINGER5(アフィンガー5)の使い方を1から10まで徹底解説する

2020年6月2日

【解決】AFFINGER5(アフィンガー5)のプラグインは5つでOK(アフィンガー)でブログカードを作る方法【コツあり】

 

悩んでいる人
最近、アフィンガー5を購入したブログ初心者です。しかし、AFFINGER5の使い方がまったくわかりません。そこで、アフィンガー5の使い方を初心者でもわかるように教えてください。

こんな疑問を解決します。

 

 記事の内容

・AFFINGER5(アフィンガー5)とはどんなテーマなのか?【前提知識】
・AFFINGER5(アフィンガー5)の使い方を1から10まで徹底解説

 

 記事の信頼性

Katakuri Blog:プロフィール

この記事を書いている僕は、AFFINGER5(アフィンガー5)を導入しブログ収益を5桁あげています。

 

AFFINGER5(アフィンガー5)はかなり優秀なテーマです。

しかし、ブログ初心者にとっては使い方がわかりにくい箇所が多いです。

 

そこで今回は、AFFINGER5(アフィンガー5)の使い方を1から10まで徹底解説します。

 

この記事を読めば、ブログ初心者でも簡単に使い方をマスターできるので、最後まで読んでみてください。

では、いきましょう(´∀`*)

 

 アフィンガー5をまだ導入していない人へ

アフィンガー5の導入方法からメリット、デメリットなどをアフィンガー5をブログ初心者が購入するべき10の理由【本音】にて詳しく解説しているので、まだアフィンガー5を導入していない人は読んでみてください。




もくじ

AFFINGER5(アフィンガー5)とはどんなテーマなのか?【前提知識】

アフィンガー5とはどんなテーマなのか?【前提知識】

AFFINGER5(アフィンガー5)とはどんなテーマなのか?【前提知識】

 

最初に、AFFINGER5(アフィンガー5)とはどんなテーマなのかについて簡単に解説します。

 

 アフィンガー5の基本情報

名前AFFINGER5
機能性
カスタマイズ性
使いやすさ
料金14800円(税込)

 

WordPressの有料テーマの中では、比較的コスパのよい値段設定になっています。

 

また、AFFINGER5(アフィンガー5)には、さまざまなプランがありますが当サイトでは1番シンプルなプランであるWING(AFFINGER5版)を利用しています。

 

 アフィンガー5のメリット

  • 複数サイトで運用OK
  • SEO内部対策がバッチリ
  • モバイルの表示速度が速い
  • カスタマイズ性がかなり高い
  • 有名なテーマなので信頼性あり

 

このようにAFFINGER5(アフィンガー5)には、多くのメリットがあります。

 

アフィンガー5は、アフィリエイトに特化しているテーマなので、ブログでマネタイズを考えているブログ初心者には最適です。

 

実際、アフィンガー5を使って月に7桁以上稼いでいるブロガーさんがゴロゴロいます。
カタクリ

 

AFFINGER5(アフィンガー5)の使い方①:カスタマイズ編

AFFINGER5(アフィンガー5)の使い方①:デザイン編

AFFINGER5(アフィンガー5)の使い方①:カスタマイズ編

 

まずは、ブログの顔でもあるAFFINGER5(アフィンガー5)のカスタマイズについてお話ししていきます。

AFFINGER5をカスタマイズする上で重要な点は以下の3つです。

 

  • 読者を引き込めるか
  • 読んでいて疲れないか
  • シンプルすぎず派手すぎないか

 

上記の3つの点を100%実現できるテーマがAFFINGER5(アフィンガー5)です。

 

具体的なブログのカスタマイズ方法は アフィンガー5のおすすめデザイン方法をご紹介【超簡単です】にて詳しく解説しています。

 

 よくある質問:カスタマイズにどれくらい時間がかかる?

Katakuri Blog:デザイン

Katakuri Blog:カスタマイズ

 

実際に多くの方から定評をいただいている当ブログのカスタマイズですが、実際にかけた時間は1時間ほどです。

 

僕自身、アフィンガー5を導入する前は、無料テーマでカスタマイズをしていましたが、上記のようなカスタマイズになるまで半日はかかってしまっていました。

 

ブログのカスタマイズにあまり時間をかけずにアフィンガー5なら「いい感じ」にできます。
カタクリ

 

AFFINGER5(アフィンガー5)の使い方②:文字の装飾編

AFFINGER5(アフィンガー5)の使い方②:文字の装飾編

AFFINGER5(アフィンガー5)の使い方②:文字の装飾編

 

AFFINGER5(アフィンガー5)なら以下のように文字装飾ができます。

 

  • 太文字
  • 小文字
  • 大文字

 

また、ひとことで文字の装飾と言っても、アフィンガー5ではさまざまな文字の装飾ができます。

 

 文字装飾の具体例

これはメモです

これはお知らせです

これははてなです

これはコメントです

これは注意文です

 

このように読者に印象の残りやすい文字の装飾ができます。

 

AFFINGER5(アフィンガー5)で文字装飾を使うメリット

 

AFFINGER5)アフィンガー5)で文字装飾を使うメリットは以下のとおりです。

 

  1. 読者に飽きさせない
  2. 読者の印象が残りやすい
  3. 読者にわかりやすく説明する

 

つまり、単にブログを書くだけが読者のためになるのではなく、文字の装飾などを行うことでも読者のためになります。

 

また、いきなりすべての文字の装飾を使おうとするのではなく、まずは3つ程度使うものを決めておき、慣れてきたら増やしていけばOKです。

 

実際、僕もアフィンガー5を導入した1ヶ月目は2つ程度した文字の装飾を使っていません。
カタクリ

 

AFFINGER5(アフィンガー5)の文字装飾の使い方

 

次に、具体的にAFFINGER5(アフィンガー5)の文字装飾の使い方を説明していきます。

 

「タグ」「テキストパーツ」「クリップメモ」「メモ」をクリックすると、文字の装飾(メモ)が表示されます。

 

「タグ」→「テキストパーツ」→「クリップメモ」→「メモ」をクリックすると、文字の装飾(メモ)が表示されます。

 

あとは、文字の装飾の中に表示させたい文字を下記の画像の箇所に入力すればOKです。

 

あとは、文字の装飾の中に表示させたい文字を下記の画像の箇所に入力すればOKです。

 

間違えずに文字を入力すれば、下記のように反映されます。

 

文章の装飾

 

AFFINGER5(アフィンガー5)の使い方③:ボックス編

AFFINGER5(アフィンガー5)の使い方③:ボックス編

AFFINGER5(アフィンガー5)の使い方③:ボックス編

 

次は、AFFINGER5(アフィンガー5)で表示できるボックスの使い方を解説していきます。

 

 表示できるボックスの例

ポイント

基本のボックスです

参考

参考のボックスです

関連

関連のボックスです

注意ポイント

注意ポイントのボックスです

 

このようにさまざまなボックスをAFFINGER5(アフィンガー5)であれば表示できます。

 

AFFINGER5(アフィンガー5)でボックスを使うメリット

 

AFFINGER5(アフィンガー5)でボックスを使うメリットは以下の3つです。

 

  1. 読者の離脱を下げる
  2. 言葉の強調などができる
  3. 他サイトとの差別化ができる

 

ボックスを使うことで読者に言葉の強調などができます。

 

文字の装飾などでも言葉の強調はできますが、ボックスの方が有効的です。
カタクリ

 

 よくある質問①:どれくらいの頻度でボックスを出すべき?

 

結論、文章が4行以上続いた場合、必ずボックスを使いましょう。

 

なぜなら、人は文章が続いてしまうと、そのブログから離脱してしまう可能性が高いからです。

そのため、1つの見出しの中で文章が4行以上続いたら、必ずボックスを使いましょう。

 

 よくある質問②:ボックスは何種類使うべき?

 

基本的にボックスの種類は2種類までにしましょう。

その理由は、ボックスが増えるということは、読者の印象に残りづらくなります。

 

結果、あなたのブログを読んでも何も得られなかったという印象だけが残ります。

 

それを防ぐためにも、1つの記事で使用するボックスは基本的に2種類までにしましょう。

 

AFFINGER5(アフィンガー5)のボックスの使い方

 

AFFINGER5(アフィンガー5)のボックスの使い方はかなり簡単です。

 

「タグ」「ボックス」「マイボックス」「基本」で基本のボックスを出すことができます。

 

「タグ」→「ボックスデザイン」→「マイボックス」→「基本」で基本のボックスを出すことができます。

 

また、ボックスの中に文字を入れる場合は、以下の画像の空白の箇所に入力すればOKです。

 

また、ボックスの中に文字を入れる場合は、以下の画像の空白の箇所に入力すればOKです。

 

ボックスには、さまざまな種類があるので自分の中でお気に入りを見つけてください。
カタクリ

 

AFFINGER5(アフィンガー5)の使い方④:ボタン編

AFFINGER5(アフィンガー5)の使い方④:ボタン編

AFFINGER5(アフィンガー5)の使い方④:ボタン編

 

AFFINGER5(アフィンガー5)で表示できるボタンは主に3種類です。

 

  1. ノーマルのボタン
  2. 光るボタン
  3. 吹き出しがあるボタン

 

 ノーマルのボタン

 

比較的シンプルなボタンです

アフィリエイトを行う上で、押し売りはNGです。

 

そのため、押し売り感をあまり出したくない方はノーマルのボタンを使いましょう。

 

ノーマルのボタン

 

 光るボタン

 

ノーマルのボタンが光るタイプのボタンです。

一見、ボタンが光ると押し売り感が強くなる印象ですが、実はそれは大きな間違いです。

 

 

上記のツイートのように、ボタンの種類を変えるだけでアフィリエイトのクリック率が大きく変わります。

 

ボタンは、そもそもクリックされないとアフィリエイトの成約まで持ち込めませんから、第一段階のクリック率をあげることはかなり重要です。

 

光るボタン

 

 吹き出しがあるボタン

 

光るタイプのボタンに吹き出しがついているタイプのボタンです。

吹き出しがあることによって、ノーマルのボタンよりも付加価値が付くため、通常よりもクリック率が上がる可能性が高いです。

 

ただ、あまりにも多くの文字を吹き出しに入れてしまうと、読者が混乱してしまうので注意が必要です。

 

\吹き出しを作れる/

吹き出しがあるボタン

※超簡単です

 

AFFINGER5(アフィンガー5)のボタンの使い方

 

今回は、ノーマルのボタンの使い方を解説します。

 

「タグ」「カスタムボタン」「ノーマル」「基本」をクリックすると、ノーマルのボタンが表示されるコードが出ます。

 

「タグ」→「カスタムボタン」→「ノーマル」→「基本」をクリックすると、ノーマルのボタンが表示されるコードが出ます。

 

少しごちゃごちゃとしたコードが出てきましたが焦る必要性なしです。

 

少しごちゃごちゃとしたコードが出てきましたが焦る必要性なしです。

 

ここで入力することは以下の2つだけです。

 

  • url="アフィリエイトのURL"
  • title="ボタンに表示するタイトル"

 

他の光るボタンや吹き出しがついているボタンでも、上記と同様の事項を入力すればOKです。

 

AFFINGER5(アフィンガー5)でボタンの色を変える方法

 

アフィンガー5には、元々6色ほどのボタンの色の種類があります。

 

しかし、それ以外の色を使いたいのであれば、color="#"を変更すればOKです。

 

しかし、それ以外の色を使いたいのであれば、color="#"を変更すればOKです。

 

AFFINGER5(アフィンガー5)の使い方⑤:吹き出しの出し方編

AFFINGER5(アフィンガー5)の使い方⑤:吹き出しの出し方編

AFFINGER5(アフィンガー5)の使い方⑤:吹き出しの出し方編

 

AFFINGER5(アフィンガー5)では、吹き出しの出し方といっても、吹き出しには2種類あります。

 

  1. 人物の言葉の吹き出し
  2. 文字やアイコンの吹き出し

 

では、順に説明していきます。

 

人物の言葉の吹き出し

人物の言葉の吹き出し

 

人物の言葉の吹き出しを使うことによって、読者視点で物事を解説できます。

 

step
1
アイコンの設定を行う

 

吹き出しの出し方を説明する前に、アイコンの設定を行いましょう。

 

「アフィンガー5管理」「会話・ファビコン管理」「会話風アイコン」で設定できます。

 

「アフィンガー5管理」→「会話・ファビコン管理」→「会話風アイコン」で設定できます。

 

  1. アイコン下に表示される名前
  2. アイコンで表示する画像

 

上記の2点を記入してください。

 

僕は悩んでいる人という名前で設定しており、男女それぞれのアイコンを設定しています。
カタクリ

 

step
2
人物の言葉の吹き出しの出し方

 

「タグ」「会話吹き出し」「会話1」を選択してください。

 

※「会話1」とは先ほど設定した画面に表示されている番号です。

 

※「会話1」とは先ほど設定した画面に表示されている番号です。

 

選択すると、2つのかたまりのコードが表示されるので、間に吹き出し部分に記載したい言葉を入力すればOKです。

 

選択すると、2つのかたまりのコードが表示されるので、間に吹き出し部分に記載したい言葉を入力すればOKです。

 

 補足:吹き出しの色を変える方法

補足:吹き出しの色を変える方法

 

吹き出しの背景の色を変えたい場合は以下の方法を使用してください。

 

「外観」「カスタマイズ」「オプションカラー」「会話風吹き出し」をクリックしてください。

 

「外観」→「カスタマイズ」→「オプションカラー」→「会話風吹き出し」をクリックしてください。

 

先ほど、設定したアイコンの番号ごとに吹き出しの背景の色を変えられます。

 

ちなみに当ブログは白色よりのグレーを採用しています。
カタクリ

 

文字やアイコンの吹き出し

 

文字やアイコンの吹き出しの具体例は以下のとおりです。

 

ココがポイント

文字やアイコンの吹き出し

ココがおすすめ

文字やアイコンの吹き出し

ココがダメ

文字やアイコンの吹き出し

ココに注意

文字やアイコンの吹き出し

 

文字やアイコンの吹き出しを使うことで、読者の注意を引くことができます。

 

では、文字やアイコンの吹き出しの出し方を解説します。

 

step
1
文字やアイコンの吹き出しを出す

 

「タグ」「テキストパーツ」「複合」で文字やアイコンの吹き出しを出せます。

 

「タグ」→「テキストパーツ」→「複合」で文字やアイコンの吹き出しを出せます。

 

step
2
文字を入力していく

 

さまざまなコードが出てきましたが、下記の画像で「ここに入力」という部分に文字を入力すればOKです。

 

 

AFFINGER5(アフィンガー5)の使い方⑥:ランキング編

AFFINGER5(アフィンガー5)の使い方⑥:ランキング編

AFFINGER5(アフィンガー5)の使い方⑥:ランキング編

 

AFFINGER5(アフィンガー5)は、ランキング形式の装飾に特化しています。

アフィンガー5は、ランキング形式の装飾に特化しています。

このようにボタン1つでランキング形式の装飾を表示させられます。

 

AFFINGER5(アフィンガー5)でランキングを使うメリット

 

AFFINGER5(アフィンガー5)でランキングを使うメリットは、ブログを収益化させるためです。

 

ブログで収益化をするためには、アフィリエイトを利用する必要があります。

 

そのアフィリエイトでの収益の1番の助けとなってくれる機能がランキング機能です。

 

関連記事アフィリエイトを始める手順を解説【初日で3万円必ず稼げる】

 

AFFINGER5(アフィンガー5)のランキングの作り方

 

AFFINGER5(アフィンガー5)のランキングの作り方もかなり簡単です。

 

「タグ」「ランキング」を選択し、順位を決定するのみです。

 

「タグ」→「ランキング」を選択し、順位を決定するのみです。

 

また、ランキングマークの横に文字を入れることで、よりランキングの具体性が増します。

また、ランキングマークの横に文字を入れることで、よりランキングの具体性が増します。

 

 よくある質問:星なども表示できるの?

 

結論、アフィンガー5であれば、星なども簡単に表示できます。

 

星などを使う理由としては、やはりレビュー記事などを書くときでしょう。

 

「タグ」「その他のパーツ」「スター」を選択し、星のレベルを選択してください。

 

「タグ」→「その他のパーツ」→「スター」を選択し、星のレベルを選択してください。

 

このようにアフィンガー5であれば、ボタン1つで簡単に星を表示させられます。

このようにアフィンガー5であれば、ボタン1つで簡単に星を表示させられます。

星は口コミなどにも応用できます。
カタクリ

 

AFFINGER5(アフィンガー5)の使い方⑦:グラフ編

AFFINGER5(アフィンガー5)の使い方⑦:グラフ編

AFFINGER5(アフィンガー5)の使い方⑦:グラフ編

 

AFFINGER5(アフィンガー5)では、ボタン1つでグラフを出せます。

 

※横にスクロールできます

 

また、グラフを出すことによって、何かと何かを比較するときにかなり便利です。

 

当ブログでも、グラフを比較系の記事を書くときに使用しており、やはりグラフがある場合とない場合では、クリック率が大きく異なります。

 

結果、ブログの収益が大きく変わってきます。

 

AFFINGER5(アフィンガー5)のグラフの使い方

 

タグの隣にある「グラフ」「テーブル」「行列」を選んでいきましょう。

 

タグの隣にある「グラフ」→「テーブル」→「行列」を選んでいきましょう。

 

グラフが表示されたら、あとはグラフに文字や数字を記入していくだけです。

 

グラフが表示されたら、あとはグラフに文字や数字を記入していくだけです。

 

AFFINGER5(アフィンガー5)でグラフの色を変える方法

 

「外観」「カスタマイズ」「オプションカラー」「table(表)」を選択してください。

 

それぞれの項目でグラフの色を簡単に変えられます。

 

「外観」→「カスタマイズ」→「オプションカラー」→「table(表)」を選択してください。

 

AFFINGER5(アフィンガー5)の使い方⑧:目次の作り方編

AFFINGER5(アフィンガー5)の使い方⑧:目次の作り方編

AFFINGER5(アフィンガー5)の使い方⑧:目次の作り方編

 

AFFINGER5(アフィンガー5)で目次を作る手順は2つです。

 

  1. プラグインをインストール
  2. プラグインを設定

 

では、順に説明していきます。

 

手順①:プラグインをインストール

 

アフィンガー5では、目次を作るときに「Table of Contents Plus」というプラグインを使用します。

 

アフィンガー5では、目次を作るときに「Table of Contents Plus」というプラグインを使用します。

 

Table of Contents Plusをプラグインの「新規追加」でインストールしましょう。

 

インストールが完了したら、有効化をお忘れなく。
カタクリ

 

手順②:プラグインの設定を行う

 

次は、Table of Contents Plusの設定を行います。

 

プラグインのインストールが完了すれば「設定」「TOC +」をクリックしてください。

 

プラグインのインストールが完了すれば「設定」→「TOC +」をクリックしてください。

 

具体的に設定方法を解説していきます。

 

具体的に設定方法を解説していきます。

 

  1. 目次が表示される条件
  2. 目次のタイトル名

 

上記の2点の記入が完了したら下へスクロールして「設定を更新」をクリックしてください。

 

以上がアフィンガー5の目次の作り方です。

 

以上がアフィンガー5の目次の作り方でした。

 

かなり簡単でしたね。
カタクリ

 

AFFINGER5(アフィンガー5)の使い方⑨:Google連携編

アフィンガー5の使い方⑨:Google連携編

AFFINGER5(アフィンガー5)の使い方⑨:Google連携編

 

AFFINGER5(アフィンガー5)を使うなら、必ずGoogle連携を行いましょう。

なぜなら、いくら優秀なテーマであるアフィンガー5を使用しても、分析ができなければ意味がないからです。

 

AFFINGER5(アフィンガー5)でGoogle連携を行う点は2つです。

 

  1. Googleアナリティクス
  2. Googleサーチコンソール

 

では、Google連携の方法を解説していきます。

 

「アフィンガー5管理」「Google連携」をクリックしてください。

 

「アフィンガー5管理」→「Google連携」をクリックしてください。

 

  • Googleアナリティクス:トラッキングID
  • Googleサーチコンソール:HTMLタグ

 

上記の2点を入力すればOKです。

 

AFFINGER5(アフィンガー5)の使い方⑩:SNS編

アフィンガー5の使い方⑩:SNS編

AFFINGER5(アフィンガー5)の使い方⑩:SNS編

 

最後にAFFINGER5(アフィンガー5)でSNSの設定方法を解説します。

SNSの設定を行うと、ブログ経由でSNSへの流入が見込めます。

 

ちなみにSNS設定を行った当ブログのホームページは以下のとおりです。

 

ちなみにSNS設定を行った当ブログのホームページは以下のとおりです。

 

では、具体的にアフィンガー5でSNSの設定を行う方法を解説していきます。

 

まずは、使用しているSNSのURLを入力していきましょう。

「ユーザー」からSNSのURLを入力できます。

 

「ユーザー」からSNSのURLを入力できます。

 

 SNSアイコンがうまく表示されないときの対処法

SNSアイコンがうまく表示されないときの対処法:アフィンガー5

 

このように本来Twitterのアイコンが表示されるはずですが表示されていません。

 

そのような場合は「Font Awesome」というプラグインをインストールしましょう。

 

そのような場合は「Font Awesome」というプラグインをインストールしましょう。

 

「Font Awesome」を使うことで、アフィンガー5がさまざまなアイコンに対応できます。

 

「Font Awesome」を導入したことでTwitterのアイコンが表示されるようになりました。

 

「Font Awesome」を導入したことでTwitterのアイコンが表示されるようになりました。

 

以上でアフィンガー5の使い方の解説は終了です。

 

かなり長い時間でしたが、おつかれさまでした。
カタクリ

 

まとめ:AFFINGER5(アフィンガー5)の使い方は少しずつマスターすればOK

まとめ:AFFINGER5(アフィンガー5)の使い方は少しずつマスターすればOK

まとめ:AFFINGER5(アフィンガー5)の使い方は少しずつマスターすればOK

 

今回は、AFFINGER5(アフィンガー5)の使い方を1から10まで徹底解説しました。

 

アフィンガー5の使い方に慣れるまでは、なかなかうまく使いこなすことができません。

 

しかし、アフィンガー5の使い方は少しずつマスターすればOKです。

 

AFFINGER5(アフィンガー5)をフル活用してブログの収益をあげていきましょう。

今回は以上です。

人気記事アフィンガー5をブログ初心者が購入するべき10の理由【本音】




-AFFINGER5
-

Copyright © Katakuri Blog , All Rights Reserved.