WordPressテーマ「アフィンガー」の設定【＋ミヤビ屋ブログの設定公開】

AFFINGER（アフィンガー）とは

AFFINGER（アフィンガー）とは、株式会社オンスピードが販売する、WordPress用のテーマです。

以下のような特徴があります。

• SEO対策が柔軟に行える
• デザイン性が高い
• カスタマイズ性が高い
• 収益化に特化している
• 高速表示対応
• レスポンシブ（モバイル表示）対応
• 複数のサイトにインストール使用可能

SEO、デザイン、カスタマイズ、スピード、収益化と総合力が高く申し分のないテーマです。

機能も充実しているので、後から別のテーマに移行したいなどとは、なりにくいです。

WordPressテーマ 「ACTION（AFFINGER6）」

「ACTION（AFFINGER6）」の購入はこちらから！！

アフィンガー管理から設定できる項目

アフィンガー管理から設定できる項目は以下になります。

• デザイン（色やコンテンツ配置に関する設定）
• トップページ（レイアウト、表示内容に関する設定）
• 投稿・固定記事（レイアウト、表示内容に関する設定）
• ヘッダー（レイアウト、表示内容に関する設定）
• メニュー（各メニューのレイアウト、表示内容に関する設定）
• おすすめ記事一覧（レイアウト、表示内容に関する設定）
• SNS（SNS連携、Twitterに関する設定）
• SEO（SEO全般に関する設定）
• Google・広告（Google連携に関する設定）
• 会話・ファビコン（各アイコンに関する設定）
• その他（コード入力、無効化ウィジェットに関する設定）

次の項目から、「ミヤビ屋ブログ」の設定とあわせて確認していきます。

項目の内容がよくわからないなという方は、画像通りに設定していただければOKです。

また、「【※設定なしでもOK】」と表記されている項目は飛ばしてもOKです！

当サイトの他のページもご覧いただくと、どのようなテーマなのかがイメージしやすいと思います。

※当記事の画像は、2020年11月8日時点での「ミヤビ屋ブログ」の設定内容です。

デザイン（色やコンテンツ配置に関する設定）

サイト全体の設定

こまかいカラー設定は「外観」の「カスタマイズ」で設定しますが、サイト全体のカラー設定を本項目で行います。

カラーパターンは、サイトを象徴するカラーになるので、扱う内容によってイメージを揃えると良いでしょう。

実際に設定し、反映した結果を見ながら決めましょう。

カテゴリーリンク

「サイドバーのカテゴリーリンクに簡易デザイン適応」にチェックを入れる。

チェックを入れると、サイドバーに、文字だけのカテゴリーリンクが表示されます。

サイト全体のレイアウト

「PC閲覧時のサイト幅」を、1114px以上の数値で設定します。

表示幅を狭くするメリットはないので、広めにしましょう。

1114pxに設定することで、アドセンス広告を横並びに表示することが可能になります。

注意：アドセンスに関しては別途設定が必要です。

サムネイル画像設定

サムネイルデザインは、好みによるかなと思います。

私は単純に四角いものの方が好きなのと、サイトのテーマカラーが落ち着いた色ですので、正方形にしました。

正方形だと、上の図のようなイメージです。

丸では、上の図のようになります。

アイキャッチが無い時のサムネイル画像は、記事投稿時にアイキャッチを設定しないことは、少ないと思いますが念のため設定しておきます。

どんな記事に対しても、関連できるような画像が良いでしょう。

ミヤビ屋ブログでは、サイトアイコンを表示するように設定しています。

抜粋設定

通常は、おすすめ記事にディスプリクションに入力した内容が抜粋表示されます。

ですが、情報量が多いと見栄えが悪く、タイトルで内容もある程度わかるので、抜粋を非表示に設定します。

抜粋表示されていると、上の図のようになります。

抜粋非表示にすると、上の図のようになります。

スッキリした印象になりますね。

Aフォントのサイズ

コンテンツ内のフォントサイズ設定は、スマートフォン・タブレット・PCの3つの媒体に合わせて設定をします。

様々な人が閲覧することを考えて、見やすいように大きめの文字サイズが良いでしょう。

行間も詰まりすぎていると、読みづらいので広めにとります。

ミヤビ屋ブログでは、デフォルト設定より、フォントは大きめ、行間は広めを推奨します。

Aフォントの種類

デフォルトを選択した場合のフォントは、メイリオになります。

メイリオは、若干丸みがあり、画面上でも印刷した場合でも見やすいため、様々な媒体をとおして閲覧されるサイトで使用することに適しています。

代表的なフォントであるため、まず、上手く表示できないということはないでしょう。

記事タイトルや見出しのフォントで指定したNoto sansは、Webフォントの一つで少し丸みを帯びた、癖のないフォントです。

記事タイトルや見出しは、フォントサイズが大きくなるため圧迫感の少ないよう、Noto sansを使用しています。

Googleフォント　【※設定なしでもOK】

Googleフォントを使用したい場合に設定する項目になります。

今回は使用しませんので、設定はしません。

トップページ（レイアウト、表示内容に関する設定）

挿入コンテンツ　【※設定なしでもOK】

トップページに何を表示するのかを設定することができます。

「トップページに固定記事を挿入」に記事IDを入力すると、トップページが指定した投稿記事になります。

特におすすめしたい記事や、コンバージョン率が高い記事などを設定するのも良いでしょう。

「挿入コンテンツ」に内容を入力すると、トップページの冒頭に、内容が挿入されます。

サイト説明や、管理者のプロフィールなどを挿入したい場合は使用しましょう。

トップページを指定しない場合、新着順に記事が並べられたページが自動的にトップページになります。

トップページのレイアウト　【※設定なしでもOK】

特にカスタマイズの必要はないです。

記事一覧

トップページを指定していない場合、新着順に記事が並んでいるので、サイドバーに表示する必要がありません。

ユーザーを混乱させてしまうので、複数個所での重複表示は避けましょう。

NEWS（お知らせ）の表示　【※設定なしでもOK】

トップページの一番上に、いち早く紹介したい商品の宣伝などを表示させることができます。

注意や関心を引くことで、コンバージョン率の向上を狙うのも戦術の一つです。

動画背景　【※設定なしでもOK】

YouTube動画IDを入力することで、トップページの背景に、動画を流すことができます。

YouTubeも利用している方は、インパクトのあるトップページを作れますね。

投稿・固定記事（レイアウト、表示内容に関する設定）

投稿・固定記事設定

カテゴリの表示は、同じカテゴリの記事を閲覧したい方のために表示しておきましょう。

情報の探しやすさは重要です。

投稿日と更新日については、様々な意見がありますが、私は更新日のみの表示で良いと考えます。

サイトに訪問した方は、情報の新しさを重視している方が多く、最終更新日が解れば、その条件は満たせるからです。

カテゴリと更新日は、上の図のように表示されます。

アドセンス広告を横に並べて表示したい場合は、チェックを入れます。

注意：アドセンスに関しては別途設定が必要です。

コメント

作りたてのサイトは、特にコメントがされづらいものです。

スパムコメントを、最初からさせないようにためには、コメント自体をさせないことが有効です。

コメント機能がサイトの構成上で必要な場合などの場合は、任意でチェックを外して運用してください。

アイキャッチ設定

アイキャッチが記事冒頭にあると、内容をイメージしやすく、記事の構成も美しく見えます。

文字だけでは、締まらないのでアイキャッチは利用しましょう。

実際には、記事投稿時にアイキャッチを設定します。

上の図の、赤枠部でアイキャッチを指定します。

指定されたアイキャッチは、上の図のように反映されます。

この記事を書いた人　【※設定なしでもOK】

特にカスタマイズの必要はないです。

関連記事一覧　【※設定なしでもOK】

特にカスタマイズの必要はないです。

管理画面

記事投稿の際の、文字装飾で使用する色を設定します。

ミヤビ屋ブログの場合、おおざっぱですが以下のような文字装飾のルールを設けています。

あまりルールを増やしすぎると、書くのは面倒になり、読むほうも読みにくくなるでしょう。

大きく4つぐらいが、試した結果ちょうど良かったです。

Gutenberg設定（β）　【※設定なしでもOK】

特にカスタマイズの必要はないです。

ヘッダー（レイアウト、表示内容に関する設定）

ヘッダー画像　【※設定なしでもOK】

特にカスタマイズの必要はないです。

ヘッダーコンテンツ設定　【※設定なしでもOK】

特にカスタマイズの必要はないです。

画像スライドショー設定　【※設定なしでもOK】

特にカスタマイズの必要はないです。

記事スライドショー設定　【※設定なしでもOK】

特にカスタマイズの必要はないです。

Hヘッダー設定　【※設定なしでもOK】

特にカスタマイズの必要はないです。

メニュー（各メニューのレイアウト、表示内容に関する設定）

PC用グローバルメニュー

選択することで、メインメニューが上に表示されます。

表示する内容は、「外観」＞「メニュー」にて設定します。

ミヤビ屋ブログでは、「お問い合わせ」と「プライバシーポリシー」を表示しています。

設定されたメインメニューは、上の図のように反映されます。

スマホ用スライドメニュー

スマートフォン用のスライドメニュー設定です。

スライドメニューへは、おすすめ記事のリンクなどが表示できます。

設定されたスライドメニューは、上の図のように反映されます。

追加メニューは、特にカスタマイズの必要はないです。

その他のスマホ用メニュー

設定されたスマホ用ミドルメニューは、上の図のように反映されます。

おすすめ記事一覧（レイアウト、表示内容に関する設定）

おすすめ記事一覧の作成

設定されたおすすめ記事は、上の図のように反映されます。

記事IDは、上の図の赤枠部の投稿IDから知ることができます。

おすすめヘッダーカード　【※設定なしでもOK】

設定することで、ヘッダーカードをカンタンに表示することができます。

設定されたヘッダーカードは、上の図のように反映されます。

最大で4枚まで設定可能です。

SNS（SNS連携、Twitterに関する設定）

SNS設定

SNSボタンをシンプルにしないと、上の図のように大きめのSNSボタンが表示されます。

SNSボタンをシンプルにすると、上の図のように正方形の小さなSNSボタンが表示されます。

ちなみに、SNSボタンを丸くするにチェックを入れると、上の図のようになります。

OGP設定

投稿や固定ページにアイキャッチがあれば、その画像が表示されます。

ですが設定されていない場合、非表示になったり、意図しない画像が表示されたりしてしまう可能性があります。

そこで、投稿・固定ページ以外のアイキャッチ画像を設定することで、アイキャッチ未設定の場合に、指定した画像を表示してくれるというわけです。

どんな記事に対しても、関連できるような画像が良いでしょう。

ミヤビ屋ブログでは、サイトアイコンを表示するように設定しています。

Twitter設定

https://twitter.com/miyabiya_gimlet/status/1317299612881842177?s=20

TwitterでURLを添付してシェア（ツイート）した場合、上の図のように表示されます。

Twitterカードで見栄えも良いので、SNS連携をしたい方にはオススメです。

SEO（SEO全般に関する設定）

SEO関連設定

メタキーワード、メタディスプリクションは直接SEOには関係が無いと言われています。

ですが、ミヤビ屋ブログでは設定をしています。

その理由は以下です。

• メタキーワード：見るたびに、自分がテーマを再認識するため。（マインドセット）
• メタディスプリクション：ユーザーがどんなページか理解しやすくするため。（ユーザーファースト）

パンくずのHOMEが適用されるのは、上の図の赤枠部です。

「HOME」や「ホーム」など、わかりやすいものが良いでしょう。

カテゴリーとタグをindexしないという項目は、Googleがサイトの評価を行う際に、評価に含まずに除外させるために設定します。

ユーザーに有益な情報のみを提供するという意味では、カテゴリーやタグだけのページは低品質であると言えます。

そのため、評価には含んで欲しくないわけです。

続いて、テキスト選択不可ですが、転載（コピー）防止のために設定しておきます。

全てのコピー行為を防止できるわけではありませんが、頑張って書いた記事を少しでも、コピーさせないための設定です。

構造化データ設定-schema.org　【※設定なしでもOK】

特にカスタマイズの必要はないです。

表示速度優先（β）　【※設定なしでもOK】

特にカスタマイズの必要はないです。

Google・広告（Google連携に関する設定）

Google連携に関する設定

Googleの解析ツールとの連携設定です。

通常だと、WordPressのファイルコードを編集しなければなりませんが、AFFINGERではID入力などで、カンタンに設定できるのは嬉しいポイントです。

入力ミスしたとしても入力内容の削除も楽で、バグ発生のリスク対策になります。

インフィード広告の設定

インフィード広告を表示させる箇所を指定できます。

3の場合、記事紹介が2件あった後に広告が挿入されます。

見出し前に広告挿入

通常だと、WordPressのファイルコードを編集しなければなりませんが、AFFINGER（アフィンガー）ではコードを入力する箇所が用意されているのでカンタンに設定ができます。

入力ミスしたとしても入力内容の削除も楽で、バグ発生のリスク対策になります。

広告は入れすぎると、鬱陶しく感じられます。

ユーザーが、気にならない程度に抑えておきましょう。

Google自動広告の設定

通常だと、WordPressのファイルコードを編集しなければなりませんが、AFFINGER（アフィンガー）ではコードを入力する箇所が用意されているのでカンタンに設定ができます。

入力ミスしたとしても入力内容の削除も楽で、バグ発生のリスク対策になります。

AMP対応　【※設定なしでもOK】

特にカスタマイズの必要はないです。

会話・ファビコン（各アイコンに関する設定）

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

ファビコン画像の項目で設定しても、ファビコンが正しく表示されません。

ファビコンは、「外観」＞「カスタマイズ」＞「サイト基本情報」の「サイトアイコンを選択」から指定します。

apple-touch-icon画像は、スマートフォンのホーム画面に追加した場合の表示アイコンです。

ファビコンが正しく設定されていると、上の図のように表示されます。

会話風アイコン

キャラクターが会話しているように、コンテンツを表示したい場合に設定します。

マンガ的表現は、文字だけで説明するよりも、理解しやすい優れた表現です。

利用を考えても良いでしょう。

アイコンは8個まで設定できます。

会話風アイコンを利用すると、上の図のように表示されます。

その他（コード入力、無効化ウィジェットに関する設定）

その他の設定　【※設定なしでもOK】

特にカスタマイズの必要はないです。

ウィジェット

演出　【※設定なしでもOK】

特にカスタマイズの必要はないです。

カスタム投稿一覧の設定　【※設定なしでもOK】

特にカスタマイズの必要はないです。

コードの出力

headに出力するコードでは、WordPressのheadファイルを直接編集するのではなく、追加したいコードを本項目へ直接入力することができます。

通常だと、WordPressのファイルコードを編集しなければなりませんが、AFFINGER（アフィンガー）ではコードを入力する箇所が用意されているのでカンタンに設定ができます。

入力ミスしたとしても入力内容の削除も楽で、バグ発生のリスク対策になります。

管理画面　【※設定なしでもOK】

特にカスタマイズの必要はないです。

テーマのアップデート更新通知（β）　【※設定なしでもOK】

特にカスタマイズの必要はないです。

AFFINGER（アフィンガー）の機能拡張

AFFINGERは単体でも、素晴らしいテーマではあります。

より良いものとなった上位版が存在するので、ご紹介しておきます。

AFFINGER6 EX

「AFFINGER6 EX」は、標準テーマである「AFFINGER6 ACTION」にはない特別な機能が追加されたテーマです。

「AFFINGER6 ACTION」の上位版テーマであり、所有している「AFFINGER6 ACTION」をアップグレードして使用します。

つまり、「AFFINGER6 EX」のみでの単体購入はできません。

AFFINGER6EX版へのアップデート

AFFINGER PACK3

「AFFINGER PACK3」は、「AFFINGER6 EX」と「AFFINGER専用プラグイン」がセットになった商品です。

「AFFINGER PACK3」を購入する場合は、「AFFINGER6 ACTION」の購入は不要です。

同梱されているプラグインは下記です。

1. 「AFFINGERタグ管理マネージャー3」　　⇒　　アフィリエイトリンクの、クリック率・クリックされたページ・日時などの分析が可能。
2. 「ABテストプラグイン」　　　　　　　 ⇒　　広告をAパターンとBパターンの2種類用意し、どちらのパターンの方が効果的であるかを分析するツール。

AFFINGER PACK3（ACTION対応）

「AFFINGER PACK3（ACTION対応）」の購入はこちらから！！

AFFINGER購入比較

「AFFINGER6 EX」の購入は、2種類の方法のうちどちらかになります。

1. 「AFFINGER6 ACTION」購入後、「AFFINGER6 EX」を購入しアップグレードする。
2. 「AFFINGER PACK3」を購入する。

「AFFINGER6 ACTION」	￥14,800円（税込）
「 AFFINGER6 EX」（アップグレード）	￥12,000円（税込）
「 AFFINGERタグ管理マネージャー4」	￥21,800円（税込）
「ABテストプラグイン」	￥4,800円（税込）
「AFFINGER PACK3」（①+②+③+④　※上記４つを全て含んだパック）	￥39,800円（税込）

まずは、「AFFINGER6 ACTION」単品で試してからアップグレードでも良いですし、気合を入れてフルパッケージの「AFFINGER PACK3」を最初から購入でも良いです。

状況に合わせて決定しましょう。

AFFINGER6EX版へのアップデート

AFFINGER PACK3（ACTION対応）

「AFFINGER PACK3（ACTION対応）」の購入はこちらから！！

まとめ

• AFFINGER（アフィンガー）では、様々な項目に対して、細かな設定が可能。
• 初めのうちや必要でない限り、コメントは不要。
• SNSの活用は必須といえる。
• シェアボタンの設置、連携も利用する。
• SEO対策として、カテゴリーとタグのindexはしないようにする。
• WordPressのファイルを直接編集せずに済むよう、コードを入力する項目が用意されている。
• 上位版へのアップグレードや、最初から上位版の利用も可能。

「ACTION（AFFINGER6）」の購入はこちらから！！

「AFFINGER PACK3（ACTION対応）」の購入はこちらから！！