動画で学べる月5万円ブログ収益化講座はこちら

【初心者必見】AFFINGER5の使い方基礎!画像付きでわかりやすく解説

 
【初心者必見】AFFINGER5の使い方基礎!画像付きでわかりやすく解説
この記事を書いている人 - WRITER -
ブログとライターで生活しています。2017年からブログ開始。28歳まで月収10万円のフリーターでした。趣味は野球観戦。

「AFFINGER5を導入したのはいいけど、使い方が全然わからない・・・」

そんな初心者ブロガーのあなたに向けて、AFFINGER5の使い方をテーマ購入からこだわりデザイン設定まで詳細に解説します。

当記事でAFFINGER5の全設定を網羅しているわけではありません。

ただ、初心者の方が最低限知っておきたい知識を厳選してお伝えします。

  • ブログで稼ぐために最低限必要な設定だけ知りたい
  • 何から順番に設定すればいいのか知りたい

こんな初心者ブロガーさんはブックマークして損がない記事です。

Twitter(@takeuchigoro)で質問していただいても構いませんので、この記事の内容を有効活用してください。

【記事執筆者タケのブログ実績】

プロフィール

トレンド系ブログで27万PV(Googleアドセンス13万円)が最初の大きな収益。

2020年ブログ年収275万円
2020年在宅年収423万円

副収入サイトや投資ブログ、野球ブログ(趣味系ブログ)も運営

公式LINEで質問OK!
ブログ初心者向け個別ブログサポートでサポート中

初心者向けAFFINGER5の使い方〜テーマ導入・初期設定編〜

WordPressサイドバーをカスタマイズして最強サイトを作る方法

まずは初期設定編を解説します。

最初に設定しておきたい重要な部分なので、しっかり設定しておきましょう。

テーマ購入

AFFINGER5の公式サイトから、テーマをダウンロードします。

「ご購入はこちら」ボタンを押すと、購入ページに移動できるので、そこから手順に従って購入してください。

【AFFINGER5の購入手順】

AFFINGER5の使い方
AFFINGER5の使い方

【テーマの購入・詳細はこちら】

テーマインストール

AFFINGER

WordPress管理画面から

  1. 外観
  2. テーマ
  3. 新規追加
  4. テーマをアップロード
  5. 「ファイルを選択」をクリックし、ファイルをアップロード

この手順でインストールできます。

「WING-AFFINGER5」と 「WING-AFFINGER5 Child」がありますが、「WING AFFINGER Child」を有効化してください。

【WING-AFFINGER Childを有効化】

AFFINGER

パーマリンク設定

AFFINGER
  1. 設定
  2. パーマリンク設定
  3. 「投稿名」をクリック
  4. 設定を保存

こちらで設定できます。

重要な設定なので、忘れないようにしましょう。

AFFINGER管理の設定

affinger5
  • AFFINGER管理
  • AFFINGER管理(2箇所あるので、もう1箇所の方をクリック)
  • 「保存」をクリック(上記画像)

保存を1回クリックするだけでOKです。

また、この画面から公式マニュアルを見ることもできます。

プラグイン導入

  • Contact Form 7
  • Classic Editor(有効化だけでOK)
  • Google XML Sitemaps
  • EWWW Image Optimizer
  • Table of Contents Plus
  • SiteGuard WP Plugin

こちらを導入すればOKです。

細かいプラグインの設定方法に関してはWordPressプラグインのインストール方法と初期設定手順にまとめています。

上記記事にはたくさんプラグインを載せていますが、この記事のプラグインだけ設定すればOKです。

【動画でもプラグイン導入を解説しています】

初心者向けAFFINGER5の使い方〜初期デザイン設定編〜

操作とデザインを兼ね備えるWordPressテーマを紹介

初期デザイン設定は

  • AFFINGER5初期デザイン設定
  • 外観→カスタマイズによる設定

この2つを行えば、十分です。

AFFINGER5管理デザイン設定

この設定で、ブログのざっくりしたデザインを決めることができます。

  • カラーパターン
  • デザインパターン

を決めることができますので、まずはこちらでざっくりとしたデザインを決めてください。

初期デザイン設定方法
  1. AFFINGER5管理をクリック
  2. デザインをクリック
  3. カラーパターンとデザインパターンを決める
  4. save(保存)をクリック(忘れずに)
AFFINGER5デザイン設定

外観→カスタマイズによるデザイン設定

外観によるデザイン設定
  1. 外観をクリック
  2. カスタマイズをクリック
  3. 全体カラー設定から色選択

AFFINGER5では様々なデザイン設定ができますが、デザインにこだわりすぎると、肝心の記事が執筆できません。

なので、最初は「全体カラー設定」だけにしておき、記事執筆に進んでください。

どれだけデザインが良くても、記事がないとアクセスは集まってきません。

「AFFINGER5管理」からのデザインと「全体カラー設定」だけ最初は設定しておけば、OKです。

見出しのデザイン設定

見出しのデザイン設定
  1. 「外観」をクリック
  2. 「カスタマイズ」をクリック
  3. 「各テキストとhタグ」をクリック
  4. 「h2タグ」「h3タグ」をお好みのデザインに設定

記事本文書く時の見出しデザインにここで設定したデザインが適用されます。

後からでも修正できますので、気軽に設定していきましょう。

初心者向けAFFINGER5の使い方〜よく使う記事装飾編〜

ブログ長文記事を書くための上達テクニック

記事装飾の使い方をこちらでは紹介します。

いろんな装飾が使えますが、当記事ではよく使う機能だけを厳選して紹介します。

詳細な記事装飾が知りたいという方は「AFFINGER5記事の書き方詳細」を参照ください。

装飾の基本的な使い方

装飾は以下の手順で使用できます。

  1. 文字の範囲を選択
  2. スタイル」「タグ」「ボタン」などから使いたいデザインを選ぶ

画像も用意しましたので、編集画面で試してみてください。

【編集画面の画像】

AFFINGER5の使い方
AFFINGER5の使い方

最初はいろんな装飾をいろいろ試してみてください。

なお、ブロックエディター仕様の場合は「クラシック」を選んでから、使用します。

【クラシックを使う方法】

AFFINGER5の使い方

アイコンの使い方

AFFINGER5の使い方

文字の左側に上記画像のようなアイコンをつけることができます。

アイコンの設定方法
  1. 文字を選択
  2. 「スタイル」を選択
  3. 「アイコン」を選択
  4. 表示したいデザインを選択

【アイコンの種類】

AFFINGER5の使い方

吹き出しの使い方

吹き出しを使うには初期設定が必要です。

吹き出しの初期設定方法
  1. 「AFFINGER管理」をクリック
  2. 「会話・ファビコン等」をクリック
  3. アイコン画像をアップロードする
  4. 「保存」をクリック
    →忘れやすいので、注意しましょう!

【吹き出しアイコンの設定方法】

AFFINGER5
AFFINGER5使い方

アイコンは①〜⑧まで設定することができ、任意の画像を使うことができます。

画像のサイズは100px以上の正方形で、私の場合はCanva Proで作ることが多いです。

初期設定が終わったら、投稿画面で吹き出しを「タグ」から呼び出します。

【吹き出しを使う方法(投稿画面)】

文字選択→「タグ」→「会話ふきだし」を選択

AFFINGER5

【吹き出しを右側にする方法】

半角スペース+「r」で、アイコンを右に配置できます。

AFFINGER5

ボタンの使い方

ボタンについては複数呼び出し方があります。

  1. 「ボタン」をクリックする
  2. 「タグ」→「カスタム」ボタンから、好きなデザインを選択する

このどちらかをクリックすると、下記のようなコードが出てきます。

AFFINGER5

このコードを編集して、ボタンを完成させます。

いろいろなカスタマイズができるんですが、最低限設定すればOKな部分は下記の通りです。

ボタンの設定方法
  1. ulr=#の「#」を消去し、その部分にリンク先のURLを入力する
  2. 「詳しくはこちら」の部分に、ボタンに表示したい文字を入れる

※ 上の画像下線の部分です。

【編集後のコード】

下線部分が変わっていることがわかります。

AFFINGER5ボタンリンク

アフィリエイトリンクをボタンで貼る方法

アフィリエイトリンクをボタンで貼る方法は少し複雑ですが、慣れれば簡単です。

アフィリエイトリンクをボタンリンクにする方法
  1. 編集画面で、「テキスト」をクリック
  2. ボタンを挿入したい位置にカーソルを移動
  3. 「ボタンA」か「ボタンB」をクリック(デザインが違います)
  4. リンクを張り替える(下記画像参照)

【ボタン型アフィリエイトリンクの作り方】

AFFINGER5アフィボタン

<a hrefから始まる下線の部分を消去し、その部分にアフィリエイトリンクを貼り付けます。

AFFINGER5アフィボタン

ランキング機能の使い方

ランキング機能は「ランキング管理」から作成し、投稿画面にコードを貼り付けるだけで完成です。

簡単に作成できるので、ぜひ活用してみてください。

ランキング機能の使い方手順
  1. 「ランキング管理」をクリック
  2. ランキング1位〜3位の入力項目に入力する
  3. 保存をクリック
  4. 記事編集画面の表示したい位置にショートコードを貼り付ける

【ショートコード】

AFFINGER5ランキング

初心者向けAFFINGER5の使い方〜こだわりデザイン編〜

まとめ:アドセンスがクリックされない理由と改善策は記事内広告とデザイン

記事数が10記事以上になったら、デザインを強化してみましょう。

ある程度記事が入ることで、ブログの見栄えが圧倒的に変わります。

記事スライドショー設定

AFFINGER5では記事スライドショー設定がかなり重要です。

記事自体がかなり見やすくなりますし、誘導したい記事に簡単に誘導できるようになります。

具体的なやり方は次の通りです。

記事スライドショー設定を行う方法
  1. AFFINGER5管理をクリック
  2. ヘッダーをクリック
  3. 記事スライドショー設定を行う
  4. ヘッダーの記事をスライドショーで表示するにチェック
AFFINGER5スライドショー

おすすめ記事一覧の作成

読んでもらいたい記事の一覧を作ることもできます。

アピールしたい記事を表示できるので、やっておきたい設定です。

おすすめ記事一覧の設定方法
  1. 「AFFINGER5管理」をクリック
  2. 「おすすめ記事一覧」をクリック
  3. 入力して、設定変更する

【設定画面の画像】

【記事IDの確認方法】

投稿→投稿一覧から確認することができます。

AFFINGER5記事一覧設定デザイン

設定後は「save」を忘れずに。

おすすめヘッダーカード設定

トップページの上部に記事のリンクを配置することができます。

こちらもアピールしたい記事へ誘導しやすくなるので、記事が10記事程度完成したら、設定してみてください。

おすすめヘッダーカードの設定方法
  1. 「AFFINGER5管理」をクリック
  2. 「おすすめ記事一覧」をクリック
  3. おすすめヘッダーカードの入力画面に入力

【おすすめヘッダーカード設定】

下記の項目に全て入力していきます。

できる限り、4つすべて設定するようにしましょう。

「画像」「テキスト」「URL」をそれぞれ入力します。

ファビコンの設定

AFFINGER5デザインファビコン

ファビコンは上記画像の部分です。

パソコンでサイトを見る時に、意外と目立つので設定しておきましょう。

ファビコンの設定方法
  1. AFFINGER5管理をクリック
  2. 会話・ファビコン等をクリック
  3. 画像をアップロードする

【アイコン・ファビコン設定】

AFFINGER5デザインファビコン

apple-touch-iconの設定は必要ありません。

まとめ:【初心者必見】AFFINGER5の使い方基礎!画像付きでわかりやすく解説

まとめ:アドセンスで稼げない理由は2020年の激変が大きな要因

AFFINGER5の使い方はこの記事にたっぷり書いています。

基本的な使い方はこの記事の内容で、十分網羅できますので、ぜひ参考にしてください。

また、この記事にはない機能もたくさんなりますが、機能に時間を奪われて、記事執筆できないのは本末転倒です。

ブログで稼ぐには記事が最も大事なので、記事を優先しつつ、デザインを強化していってくださいね!

この記事を書いている人 - WRITER -
ブログとライターで生活しています。2017年からブログ開始。28歳まで月収10万円のフリーターでした。趣味は野球観戦。

★稼ぐブロガーの作業工程大全★

稼ぐ・稼がないを分けるのはたった1ヶ月の作業。

私は最初の1ヶ月で記事を書きません。

記事量産して失敗してるブロガーに送りたいコンテンツです。

★個別ブログサポート実施中★

あなたのブログを徹底的に改善します。

1人1人に合った戦略をご提案。

全員を親身にサポートするため、限定募集です。

Twitterでブログ情報を発信中

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA