カテゴリー別アーカイブ: AFFINGER5

AFFINGERタグで画像バナーに好きな画像とURLとテキストを付ける方法

AFFINGERタグで画像バナーにASPのバナーではなく自分の好きな画像を表示させたいテクニックをご紹介します。

 

URLしかないアフィリエイト

AFFINGER5のタグ管理マネージャー3を使うとアフィリエイトで使う見た目の良いタグを作る事ができますが、画像バナーにURLだけを入れるとエラーします。

好きな画像とコメントのアフィリエイトタグが作りたいと思いませんか？

例えばアマゾンアソシエイトの場合、以下のようにテキスト（URL）しかコピーできない場合があります。

そんな場合でも次の方法で好きな画像を添付する事ができます。

設定方法

①　ワードプレスの「メディア」→「ライブラリ」から画像URLを取得します。

好きな画像を選んで画面右下に表示される「URLをクリップボードにコピー」ボタンを押します。

②　次に「AFFINGERタグ」→「新規作成」→「画像バナー」で下のように入力します。

<a target=”_blank” href=”ここにアフィリエイトURLを貼る“><img border=”0″ src=”ここに画像のリンクを貼る” ></a>

③　次に「説明①」にコメントを入力します。

④　「更新」してタグを張り付けたサイトで確認してみてください。

こうなってたら成功です。

これが本当に正しい方法なのかは分かりません。

しかし問題なく使えているので自己責任で試してみてくださいｗ

AFFIGER5でABテストを実行する

AFFINGER5のプラグインでABテスト(有料)がある。サイトの一部を変更すると集客がどうなるかテストできる代物だ。

なんでわかるの？

タグマネージャーで用意した複数のタグが、そのサイトで一番集客があるのはどれか実際に設定される。

割合を決めるが、すべて同じ割合にすれば一番集客があったタグが良いと判断できる。

必要な物

AFFINGER5本体

AFFINGERタグ管理マネージャー3

ABテストプラグイン

準備する事

AFFINGERタグ管理マネージャーで複数のタグを作っておく

新規ABテストを追加

ワードプレスから「ABテスト」→「新規追加」

①　ABテスト用の名前を決める

②　AFFINGERタグのID番号を入れる（タグマネージャーの）

③　「セットするショートコードを追加」で次のタグ番号を入れる　

④　割合を決める。「配信率を均等に設置」で等分されます

⑤　「更新」ボタンを押す

 

次にブログへ設置します。

※　①の「デモサイトはこちら」な仕様変更されています。

 

AFFINGER5でブログにtwitter記事を張り付けるには

AFFINGER5でブログにtwitter記事を張り付ける方法を簡単にお届けします。

 

①　twitterでURLを取得します

②　ブログ記事作成画面をテキストに切り替えます

ココ
右上のテキストをクリック

③　twitter記事を表示したい所にtwitterのURLを張り付けます

④　ビジュアルに戻ってしばらくすると表示されます。

以上ですｗ

 

AFFINGER5タグ管理マネージャー3でタグを作る

AFFINGER5タグ管理マネージャー3でタグを作るには「新規作成」で登録しなくてはいけません。登録する方法としていくつかありますので順を追って説明します。

まずは「新規追加」で下の画面を出してください。

パターン1　単発フォーム

①　タイトルを入力してください。

何のアフィリエイトコードか後でわかるような名前にしてください。

例：アマゾン本かのかり1巻

②　スラッグ

ショートコードのタグとして利用できますのでわかりやすい英数字をお勧めします。

例：amazon-book-kanokari-1

③　タグ管理

ここに表示されたショートコードをサイトの編集で張り付ける。

④　公開

タグが使用できるようになります。

⑤　カテゴリー/タグ

無くてもかまいませんが、あとで探すときに便利です。

例　カテゴリー…アマゾン

例：タグ…かのかり

⑥　単発コード

入力したそのままのデザインを表示します。

すでに作成済みのASPリンクをタグに変換する

  1. 作成済みのASPリンクを単発コードに張り付ける
  2. タイトルに名前を付ける
  3. 更新
  4. ショートコードをコピーする
  5. 作成済みのASPリンクを削除する
  6. ショートコードを張り付ける

パターン2　デザイン済みテンプレート作成

単発フォームに記載がある場合はそちらが優先されます。

①　見出し

商品及びサービス名を記入

②　スター

星マークを表示します

③　アフィリエイトバナー

基本的にはASPの用意するバナー（300px×250px推奨）のコードをそのまま貼り付けます。

④　アフィリエイト文字リンク

基本的にはASPの用意するテキストのコードをそのまま貼り付けます。

⑤　説明➀

商品やサービスの説明をバナー横に表示します

⑥　説明➁

商品やサービスの説明をバナー下に表示します。

⑦　詳細ページへのリンクURL

紹介ページなど任意のページへのリンクURLを記入します

⑧　詳細ページリンクボタンの表示テキスト

「詳細ページへのリンクURL」のボタンに表示するテキストを記入します

⑨　詳細ページへのリンクにnofollowを設定する

「詳細ページへのリンクURL」のリンクにrel=”nofollow”を追加します

 

各項目の名称と働き

①　タイトル

何のアフィリエイトコードかわかるようにするためです。

あとで修正する場合や、もう一度使うときなどにわかるようにするためタイトルを付けます。

例：DMMアニメかのかり1話

②　見出し

サイトでバナーの一番上に表示させる文字を入力します。

商品名やサービス名を入れます。

例：彼女お借りします1巻

例：アマゾンプライムビデオ

③　スター

順位をつけるときに分かりやすくおすすめ度を表示させます。

④　アフィリエイトバナー

アフィリエイトのバナーコードを記入します。

⑤　アフィリエイト文字リンク

アフィリエイトテキストタグを記入します。

⑥　説明

バナー横に説明文を表示します

⑦　説明

バナー下に説明文を表示します

⑧　詳細ページへのリンクURL

商品の詳細ページへ移動するためのURLを入れます

⑨　⑧の詳細ページボタンに表示される文字を入力します。

⑩　詳細ページへのリンクにnofollowを設定する

「詳細ページへのリンクURL」のリンクにrel=”nofollow”を追加します

⑪　単発コード

ここに記入がある場合は、その他を無視して優先されます。

⑫　ショートコード

登録したコードを表示するショートコードを生成します。

⑬ メモ

ご自由にお使いください（表示されません）

⑭　カテゴリー

タグの分類に使用します

⑮　タグ

タグの分類に使用します

⑯　公開

登録したタグを使用できるようになります。

 

 

AFFINGER5でロゴのアニメーションをする方法

AFFINGER5でロゴなどをアニメーションさせる方法をお伝えします。サイトを読み込んだ時にふわっと動かす設定方法です。

設定する場所は？

「AFFINGER5管理」→「その他」→「演出」で

【@keyframesによるアニメーション】の下にある

上から下：、下から上：などの枠にロゴのclassおよびIDを入れる

複数の設定をする場合は半角カンマ「,」で区切る

ロゴのclassってどこでわかるの？

公式サイトで一覧があります。

こういった表があります。

たとえばサイト名ロゴとスマホミドルメニューの場合は

“#head-l,.st-middle-menu”を枠の中に入れます

 

AFFINGER5のランキング機能解説

AFFINGER5に標準で付いてくるランキング機能。ランキング？アフィリエイトで商品のランキングを表示しているサイトはたくさんあるけどあれ？どうやってやるのか順を追って説明します。

事前準備

①　まずはASP（アフィリエイトサービスプロバイダー）からバナーか画像を取得します。

画像が無い商品は自分で作る必要があります。

②　商品リンクのコードも取得します。

「ランキング管理」を開く

ワードプレスから「ランキング管理」を開きます。

AFFINGER5のランキング作成手順

次に「ランキング1位」をクリック

a　商品の見出し（【1位】商品の名前）

b　画像

c　説明文

d　詳細リンク

e　公式サイトリンク

を順に埋めていきます。

AFFINGER5のランキング作成手順

バナーや画像は300×250がオススメです。

バナーがない場合の画像作成について

1　まずは画像をWordPressにアップロードしてください。

AFFINGER5のランキング作成手順

2　上図の赤枠内が②画像のURLになるので、コピーしてください。

3　コードを作成する

<a href=”①商品のリンク“><img src=”②画像のURL“></a>

4　①の商品のリンクは商品リンクアドレス”https://~nofollow”までをASPから取得してきます。

説明文の設定

紹介文を入力します。

特徴、機能などを説明します。「宣伝感」を出さないように。

詳細ページ、公式サイトのリンク

「詳細ページへ」

記事のURLを入力すればそれでOKです！

「公式ページへ」

＜a href=以下＞を全てコピーし、ペーストしてください。

完了

最後に「保存」をクリックしてください。

記事で使う

「ショートコード」に”[rank1]”のように入力するだけです。

AFFINGER5でランキングを記事で使う方法（Gutenberg対応）

10位まで作るには？

「タグ管理マネージャー」(有料)が必要です。

 

AFFINGERタグ管理マネージャー3の使い方【クリック計測】

プラグインをインストールしてからの設定項目や操作方法を見ていきます。

 

必須動作環境

テーマ、ワードプレス、PHP、ABテストは最新になっている事。

エックスサーバーのXアクセラレータ Ver.2には非対応です（Ver.1でご利用下さい）

 

最初の設定

プラグインをインストールしたときは、必ずパーマリンクを更新する。

 

各メニュー

AFFINGERタグ一覧

作成したタグの一覧と計測データを表示します

新規追加

新しいデータを作成します

カテゴリー

データのカテゴリーを作成します

タグ

データのタグを作成します

 

クリック計測

クリック計測

クリック全体の月間データを表示します

ログ

クリックにされたログを表示します

クリック数ランキング

クリックされたタグの「当日」「昨日」「週間」「月間」データを表示します

設定

AFFINGERタグ管理マネージャーに関する設定を行います

 

Duplicate Postの設定

https://wordpress.org/plugins/duplicate-post/

設定にある「権限」で「AFFINGERタグ」も有効化して下さい。

設定

 

「クリック計測」→「設定」

「アフィリエイトタグ内の全てのリンクを計測リンクへ変換する」→チェック

「ログインユーザーを計測から除外」は最初に自身でリンクの動作や計測が正常かチェックする場合のみチェック。

「未知の OS (Other) を計測から除外」はbot（人間ではない）可能性があるためチェックしておく

「IP/ホストを計測から除外」で以下の添付のようにbotを除外する

*.yse.yahoo.net
*.search.msn.com
*.google.com
*.googlebot.com
*.googleusercontent.com
*.baidu.com
*.ahrefs.com
*.twttr.com
*.hatena.ne.jp
*.dedicatedpanel.com
*.grapeshot.co.uk
*.your-server.de
*.amazonaws.com
ns*.ip-*-*-*.eu
*.spider.yandex.com
*.bb.sky.com
*.cloudatcost.com
crawl*.tkl.iis.u-tokyo.ac.jp
*.phy.lolipop.jp


「ユーザーエージェントを計測から除外」もbotの可能性があるところを除外

* DotBot/*
* MJ12bot/*
*.crawler/*
*(ias_crawler;*
* GrapeshotCrawler/*
* SemrushBot/*
* SEOkicks-Robot;*
* Steeler/*
*Pz-LinkCard-Crawler/*
*Crawler*
*crawler*
*bot*
*Bot*
* bot *
* Bot *
* bot/*
* bot;*
*_bot/*
*_bot;*
*Robot*

 

 

AFFINGER5をワードプレスへインストールできない方へ

AFFINGER５をインストールできない方へ。簡単にご説明します。

手順のみ記載してありますので、疑問などあるかと思いますが別途調べるようにしてください。

 

AFFINGER5　親テーマのインストール

まず親テーマをインストールします。

ワードプレスから順にクリックします「外観」→「テーマ」→「新規追加」

 

「テーマのアップロード」→「ファイルを選択」→affinger5.zipファイルを選び→「開く」→「今すぐインストール」→「テーマのページに戻る」

 

AFFINGER5　子テーマのインストール

「テーマのアップロード」→「ファイルを選択」→affinger5-child.zipファイルを選び→「開く」→「今すぐインストール」→「有効化」

 

以上でインストール完了です。

 

これでインストールできない方も出来るはず・・・