AFFINGER5

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

2020年6月2日

【辛口】AFFINGER5の感想をレビューする【デメリットも暴露】

 

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

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

 

 記事の内容

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

 

 記事の信頼性

Katakuri Blog:プロフィール

この記事を書いている僕は、ブログ歴11ヶ月のブロガーです。今は「AFFINGER5」を導入し、5桁のブログ収益をあげています。

 

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

しかし、優秀なテーマだけに、ブログ初心者にとって、わからない箇所などが多数あります。

 

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

 

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

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

 

8,000文字ほどの記事なので、ブックマークなどにしておくと、後から見返せるのでいいかもです。
カタクリ

 

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

アフィンガー5の導入方法からメリットやデメリット、評判などは【辛口】AFFINGER5の感想をレビューする【デメリットも暴露】にて詳しく解説しているので、まだアフィンガー5を導入していない方は読んでみてください。

 

AFFINGER5(アフィンガー5)とは?【使い方を知る前に】

AFFINGER5(アフィンガー5)とは?【使い方を知る前に】

AFFINGER5(アフィンガー5)とは?【使い方を知る前に】

 

最初に、アフィンガー5の使い方を知る前に、AFFINGER5についてサクッと解説しておきますね。

 

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

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

「もう少しAFFINGER5について知りたいな...。」という方は以下の記事で詳しく解説しているので、そちらを読んでみてください。

 

関連記事
【辛口】AFFINGER5の感想をレビューする【デメリットも暴露】
【辛口】AFFINGER5の感想をレビューする【デメリットも暴露】

 

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

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

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

 

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

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

 

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

 

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

 

具体的な、アフィンガー5のカスタマイズ方法はAFFINGER5(アフィンガー5)のデザイン方法を4つ紹介するにて詳しく解説しています。

 

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

Katakuri Blog:カスタマイズ

Katakuri Blog:カスタマイズ

 

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

 

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

 

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

 

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

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

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

 

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

 

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

 

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

 

 文字装飾の具体例

これはメモです

これはお知らせです

これははてなです

これはコメントです

これは注意文です

 

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

 

文字装飾を使うメリット

 

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

 

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

 

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

 

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

 

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

 

文字装飾の使い方

 

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

 

「メモ」をクリック

「メモ」をクリック

 

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

 

文字を入力

文字を入力

 

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

 

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

 

文章の装飾

 

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

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

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

 

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

 

 表示できるボックスの例

ポイント

基本のボックスです

参考

参考のボックスです

関連

関連のボックスです

注意ポイント

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

 

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

 

ボックスを使うメリット

 

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

 

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

 

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

 

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

 

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

結論、文章が4行以上続いた場合、ボックスを使うべき。

 

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

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

 

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

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

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

 

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

 

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

 

ボックスの使い方

 

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

 

「基本ボックス」を表示

「基本ボックス」を表示

 

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

 

ボックス内に文字を入力

ボックス内に文字を入力

 

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

 

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

 

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

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

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

 

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

 

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

 

 ノーマルのボタン

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

アフィリエイトを行う上で、押し売りはNGでして、押し売り感をあまり出したくない方向けのボタンですね。

 

ノーマルのボタン

 

 光るボタン

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

 

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

 

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

 

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

 

光るボタン

 

 吹き出しがあるボタン

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

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

 

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

 

\吹き出しを作れる/

吹き出しがあるボタン

※超簡単です

 

ボタンの使い方

 

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

 

「基本」をクリック

「基本」をクリック

 

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

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

 

コードが表示

コードが表示

 

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

 

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

 

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

 

ボタンの色を変える方法

 

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

 

color="000000"を変更

color="000000"を変更

 

また、アフィンガー5のデフォルトの状態であるボタンの色以外のものを使いたい場合は、color="#000000"という箇所を変更すればOKです。

カラーコードについては、カラーコード一覧表を参考にしてみてください。

 

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

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

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

 

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

 

 吹き出しの種類

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

 

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

 

吹き出し①:人物の言葉

AFFINGER5(アフィンガー5)の吹き出し①:人物の言葉

AFFINGER5(アフィンガー5)の吹き出し①:人物の言葉

 

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

では、アフィンガー5で人物の言葉の吹き出しを出す方法をご紹介していきますね。

 

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

アイコンの設定

アイコンの設定

 

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

 

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

 

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

 

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

 

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

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

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

 

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

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

 

吹き出しに言葉を入力

吹き出しに言葉を入力

 

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

 

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

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

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

 

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

 

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

 

ちなみに、当ブログは白色よりの青色(#f2fbff)を採用しています。
カタクリ

 

吹き出し②:文字やアイコン

 

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

 

ココがポイント

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

ココがおすすめ

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

ココがダメ

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

ココに注意

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

 

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

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

 

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

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

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

 

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

 

step
2
文字を入力していく

文字を入力していく

文字を入力していく

 

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

 

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

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

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

 

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

 

アフィンガー5:ランキング形式

アフィンガー5:ランキング形式

 

上記のとおりでして、AFFINGER5では、ボタン1つでランキング形式の装飾を表示させられます。

 

ランキングを使うメリット

 

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

 

また、ブログを収益化させるには、アフィリエイトを始める必要がありまして、以下の記事では、ブログ初心者が登録しておくべきASPをご紹介しています。

>>アフィリエイトASPのおすすめ6選【ブログ初心者は登録必須です】

 

1つ3分ほどで無料登録ができるので、この機会にサクッと登録しておきましょう。
カタクリ

 

ランキングの使い方

 

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

 

ランキングの作り方

ランキングの作り方

 

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

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

 

補足:星(スター)を出す方法

 

評判やレビュー記事などに、星を使うと効果的です。

 

星を出す方法

星を出す方法

 

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

 

上記のとおりでして、アフィンガー5であれば、ボタン1つで簡単に星を表示させられます。

 

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

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

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

 

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

 

無料テーマ有料テーマ
機能面
カスタマイズ面

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

 

上記のとおりでして、グラフを使用するorしないによって、読者がブログを読みやすくなったりします。

 

グラフの使い方

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

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

 

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

 

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

 

グラフの色を変える方法

グラフの色を変える方法

グラフの色を変える方法

 

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

 

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

 

グラフをスクロールさせる方法

 

結論、グラフを以下のHTMLコードでサンドすればOKです。

 

HTMLコード:<div class="scroll-box">グラフ</div>

 

とはいえ、あまりイメージできていない方もいるかもなので、実例をご紹介しますね。

以下は、グラフのHTMLコードです。(スクロール設定をする前)

 

グラフのHTMLコード

グラフのHTMLコード(スクロール前)

 

あとは、先ほどご紹介したコードで上記のグラフのHTMLコードをサンドするだけです。

完成形としては、以下の画像のとおり。

 

グラフのHTMLコード(スクロール後)

グラフのHTMLコード(スクロール後)

 

しっかりと、スクロール用のコードが入力されていますね。

 

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

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

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

 

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

 

 アフィンガー5で目次を作る手順

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

 

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

 

「そもそもブログに目次は必要なのか?」という悩みを持った方はブログに目次はいらない?【初心者こそ作成するべきです】にて詳しく解説しているので、そちらを先に読んでみてください。

 

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

 

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

 

プラグインをインストール

プラグインをインストール

 

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

 

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

 

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

 

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

 

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

では、具体的な設定方法を解説していきますね。

 

プラグインの設定

プラグインの設定

 

ここで入力すべき項目は、以下の2点です。

 

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

※上記は当ブログの設定でして、あなたのブログに合わせて変更しても問題なしです。

 

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

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

 

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

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

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

 

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

なぜなら、いくら優秀なテーマであるアフィンガー5を使用しても、分析をしなければ、ブログを成長させられないからです。

 

また、まだ「Googleアナリティクス」「Googleサーチコンソール」をブログと連携させていない方は、以下の記事で画像つきで解説しているので、そちらを参考にどうぞ。

 

 Googleアナリティクスの記事

Googleアナリティクスの初期設定を3つの手順で解説【WordPress】
Googleアナリティクスの初期設定を3つの手順で解説【WordPress】

 

 Googleサーチコンソールの記事

サーチコンソールをWordPressで初期設定をする方法を解説【簡単】
サーチコンソールをWordPressで初期設定をする方法を解説【簡単】

 

では、AFFINGER5(アフィンガー5)をGoogleのツールと連携する方法を解説していきますね。

 

Googleのツールと連携する方法

Googleのツールと連携する方法

 

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

そこで、以下の2つのコードを入力すればOKです。

 

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

※当ブログは、既にGoogle連携をしているため、それぞれの入力項目がありません。

 

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

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

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

 

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

SNS設定をしておくと、「ブログ」→「SNS」といったように、読者をSNSへと誘導することができます。

 

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

 

Katakuri Blog:SNS設定

Katakuri Blog:SNS設定

 

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

 

SNSのURLを入力

SNSのURLを入力

 

使用しているSNSのURLを入力していくために、「ユーザー」へと移動しましょう。

あとは、「SNSのURL」を入力すればOKです。

 

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

結論、「Font Awesome」というプラグインをインストールすれば解決。

 

「Font Awesome」:プラグイン

「Font Awesome」:プラグイン

 

「Font Awesome」を使うことで、アフィンガー5にSNSアイコンが表示されるようになったかと思います。

※もし、プラグインをインストールしても解決しない場合は、AFFINGER5のお問い合わせを利用してもいいかもしれません。

 

 補足:目次以外で導入すべきプラグイン

「アフィンガー5を導入したけれど、どのプラグインを導入すればいいのかわからない...」といった方は、以下の記事でAFFINGER5におすすめのプラグインを解説しているので、そちらを参考にどうぞ。

>>【解決】AFFINGER5(アフィンガー5)のプラグインは5つでOK

 

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

 

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

 

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

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

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

 

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

アフィンガー5は、優秀なテーマですが、すべての使い方をマスターするまでには、かなりの時間が必要になってきます。

 

そのため、1日少しずつでOKなので、アフィンガー 5の使い方をマスターしていきましょう。

今回は以上です。

 

人気記事【高額】AFFINGER5(アフィンガー5)のアフィリエイトをする方法

人気記事AFFINGER5(アフィンガー5)はSEOに強いのか?【結論:最強】

 

-AFFINGER5

Copyright © Katakuri Blog , All Rights Reserved.