【カエレバ代替】コピペでカエレバっぽくリンクを貼る方法【PA-API問題解決】

なにやらProduct Advertising API（以下、PA-API）問題で、カエレバ・ヨメレバは、Amazon押しのサービスではなくってしまいました。

【重要】カエレバ・ヨメレバは、国内ショッピングモールを応援するサービスへ生まれ変わります

カエレバ・ヨメレバをご利用いただき、ありがとうございます。 2019年1月初旬に、カエレバ・ヨメレバは、メインデータをAmazonから楽天に移行することになりました。 これまでは、Amazonの商品画像をメインに、他のショッピングモールを紹

www.wakatta-blog.com

カエレバ・ヨメレバを多様していた僕にとっては、とても残念な結果でした。製作者のかん吉氏には申し訳ないですが、僕としては、Amazonを軸にした商品リンクを貼っていくために他の方法を探りました。

カエレバ・ヨメレバの代替案

カエレバ・ヨメレバの代替案としてよく挙げられているものとして、

• Linker（WordPressプラグイン）
• Amazon Link Builder（WordPressプラグイン）
• カッテネ（WordPressプラグイン）
• Cocoonの商品リンクショートコード（WordPressテーマ）

なんかがあります。

これらのうち、カッテネ以外はPA-APIを利用したサービスになります。

PA-APIが使えない？

Amazonアソシエイト→ツール→Product Advertising APIからアクセスキーとセキュリティキーを取得して、「Amazon Link Builder」を使ってみましたが、正しくリンクを作成することができませんでした。

どうやら30日以内にPA-API経由の売上がないということなのでしょう。

念の為、レポート→ リンクタイプレポートで確認してみたが、「PA-API」の欄すらありませんでした。カエレバ・ヨメレバに頼り切っていたから当たり前のことではありますが。

Cocoonの商品リンクショートコードでは正しくリンクは作成できたけど、おそらく売れても売上にカウントされない状態なのでしょう。

「カッテネ」は使うに値しない

それならば、カッテネ一択だと思って使ってみましたが、とても使いづらい。

• Amazonアソシエイトが生成したHTMLからアソシエイトリンクだけ抜き出してコピーして貼り付けるとか面倒くさい。
• ショートコードを使っているわりに全然ショートになっていない。
• カッテネのショートコードを使うと一生使い続けるか、カッテネを使わなくなった時にすべてのショートコードを差し替えないといけなくなってしまう。
• カッテネのサービスが終わった時悲惨。そのうち類似サービスでもっと良いものが出るだろうし。

「カッテネ」でやってることって純正のアソシエイトリンクを組み合わせて表示させているだけでしょ？

それなら自分でHTMLを組んで、純正のアソシエイトリンクをそのままコピペするだけカエレバっぽくリンクを貼れるようにしちゃえば良くないですか？

やることは「カッテネ」とほぼ一緒だけど、その方が、コピペは楽になるし、後々のことを考えても安心できます。

純正のアソシエイトリンクさえ使っておけばPA-API問題もクリアできるし、カエレバの代替はオリジナルHTMLで解決せさました。

カエレバの代替のカエレバ風リンク

↑こんなのができます。

• レスポンシブなので、画面幅が変わってもうまい具合に表示されます。
• ボタンの色やデザインもカスタマイズ可能です。
• ボタンの種類も変更可能ですし 、ボタンの増減も可能です。
• カエレバっぽいと言っていますが、ヨメレバっぽくもできます。

下記のソースコードはAmazon、楽天市場、（おまけで Kindle）に対応したソースコードです。ボタンの種類と数の増減方法は最後のほうに説明します。

事前準備は

1. カエレバ風リンクのHTMLを再利用ブロックとして保存しておく。
2. カエレバ風リンクのCSSを貼り付けおく。

この2点だけやっておく必要があります。

あとはリンクを作りたいときに

1. 再利用ブロックからカスタムHTMLを呼び出す。
2. Amazonアソシエイトから商品リンク（画像）をコピペする。
3. Amazonアソシエイトから商品リンク（テキスト）をコピペする。
4. Amazon 商品ページから著者、出版社、発売日等をコピペする。
5. Amazonアソシエイト、楽天アフィリエイトで検索結果のテキストリンクをコピペする。

これだけです。

とても長い説明になってしまいましたが、慣れれば1分くらいでリンクが作れるようになると思います。

事前準備

カエレバ風リンクのHTMLを再利用ブロックとして保存しておく。

おそらくこの手のリンクは何回でも使うと思いますので、すぐに使える状態にしておいたほうが良いと思います。

そのために、ソースコードを「再利用ブロック」として保存しておきます。

まず、投稿画面を開き、「+（ブロックの追加）」マークをクリックします。

すると、いろいろなブロックが出てきますので、その中で「カスタムHTML」を選択します。「よく使うもの」のところになければ、フォーマットカテゴリの中にあります。

カスタムHTMLブロックが表示されたら、下記のソースコードをコピペします。

<div class="showcase-box">
<div class="showcase-image">
★Amazonアソシエイト 商品リンク 画像のみ HTML★
</div>
<div class="showcase-info"><div class="showcase-name">
★Amazonアソシエイト 商品リンク テキストのみ HTML★
</div><p></p>
<div class="showcase-detail">
★著者　出版社　発売日等★
</div>
<div class="showcase-link">
<div class="showcase-amazon">
★Amazonアソシエイト テキストリンク 検索結果へのリンク HTML★
</div>
<!--
<div class="showcase-kindle">
★Amazonアソシエイト テキストリンク Kindleストア検索結果へのリンク HTML★
</div>
-->
<div class="showcase-rakuten">
★Rakutenアフィリエイト URLからリンクを作成 テキストのみ★
</div>
</div>
</div>
</div>

貼り付けたら、「︙（詳細設定）」をクリックしメニューを表示し、「再利用ブロックに追加」をクリックします。

名前が「無題の再利用ブロック」になっているので、名前を変更して「保存」をクリックします。今回は「showcase」という名前にしました。

カエレバ風リンクのCSSを貼り付けおく。

ボタン等の装飾のために、CSSも貼り付けておきます。

WordPressテーマのスタイルシートに、このソースコードを貼り付けておかないとこんな感じで表示されちゃいます。

でも、ショートコードがそのまま表示されるよりは全然いいと思います。

まず、外観→テーマエディターをクリックします。

スタイルシート（style.css）の画面になるので、以下のソースコードをコピペして、「ファイルを更新」をクリックします。

/** カエレバっぽいリンク ********************/
.showcase-box {
	padding: 22px 25px;
	width: 96%;
	margin: 1.6em auto;
	border: 3px solid #dfdfdf; /* 外枠の枠線 */
	box-sizing: border-box;
	position: relative;
}
.showcase-image {
	width: 160px;
	min-width: 160px;
	margin: 0 auto 1em !important;
	float: none !important;
	text-align: center;
}
.showcase-image * {
	display: block;
}
.showcase-image > a > img {
	margin: 0 auto;
}
.showcase-info {
	line-height: 125%;
	width: 100%;
}
.showcase-detail {
	color: #333;
	font-size: 12px;
	margin: 0 0 10px;
}
.showcase-link > * {
	 background: none !important;
	 padding: 0 !important;
	 display: block !important;
}
.showcase-link img {
	display: none;
}
.showcase-link a {
	width: 90%;
	display: block;
	margin: 0px auto 8px;
	padding: 10px 0;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	border-radius: 3px; /* ボタンの角の丸み */
	color: #fff; /* ボタンの文字色 */
}
.showcase-link a:hover {
	opacity: 0.6;
}
.showcase-amazon a {
	background: #f79901;; /* Amazonのボタンの色 */
}
.showcase-kindle a {
	background: #0074c1; /* Kindleのボタンの色 */
}
.showcase-rakuten a {
	background: #bf0000; /* 楽天市場のボタンの色 */
}
@media screen and (max-width: 834px) {
	.showcase-box {
		padding: 10px 10px 24px;
		display: block;
	}
	.showcase-image {
		width: 120px;
		min-width: 120px;
		margin-right: 3% !important;
		float: left !important;
		height: 100% !important;
	}
	.showcase-link {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.showcase-link > * {
		width: auto;
		margin: 0 .5% !important;
		flex: 1 1 auto;
	}
	.showcase-link > * > a {
		width: auto;
		font-size: 11px;
		padding: 6px 0;
		border-radius: 3px; /* ボタンの角の丸み */
	}
}
@media screen and (min-width: 769px) {
	.showcase-box {
		text-align: left;
		display: flex;
		font-size: inherit !important;
	}
	.showcase-image {
		vertical-align: top;
		box-sizing: border-box;
		min-width: auto !important;
	}
	.showcase-info {
		line-height: 125%;
		vertical-align: top;
		box-sizing: border-box;
		padding-left: 25px;
		width: 100%;
	}
	.showcase-detail {
		margin: 0 0 14px;
	}
	.showcase-link {
		display: flex;
		flex-wrap: wrap;
	}
	.showcase-link a {
		width: auto;
		text-align: center;
	}
	.showcase-link a img {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.showcase-link > * {
		width: 31.5%;
		margin: 0.5%;
		box-sizing: border-box;
	}
}
@media screen and (max-width: 480px) {
	.showcase-image {
		width: 80px;
		min-width: 80px;
	}
	.showcase-info {
		width: auto !important;
		overflow: visible !important;
		text-align: center !important;
		padding: 0 !important;
	}
	.showcase-link > * {
		width: 49%;
		margin: 0 .5% !important;
	}
}

僕は「Cocoon」を使っていますので、「Cocoon」の小テーマのスタイルシート（style.css）に貼り付けました。

これで準備完了です。

カエレバ風リンクの作り方

ここから実際にリンクの貼り方を説明します。

再利用ブロックからカスタムHTMLを呼び出す。

投稿画面で、カエレバ風リンクをいれたいところ、「+」をクリックして「ブロックの追加」をします。そうすると、一番下の「再利用可能」欄に「showcase」がありますので、クリックします。

「showcase」のブロックが追加されたら、「︙（詳細設定）」をクリックして、「通常のブロックへ変換」をクリックします。

そうすると、通常の「カスタムHTML」ブロックになり、編集できるようになりました。

※「通常のブロックへ変換」せずにそのまま編集してしまうと、元のソースコードが変わってしまったり、再利用できなくってしまうので、必ず 「通常のブロックへ変換」 してください。

Amazonアソシエイトから商品リンク（画像）をコピペする。

ここから、アソシエイトリンクを作っては貼って行く作業です。

「Amazonアソシエイト」のサイトを開きます。ログインもしてください。

そして「商品リンク」をクリックします。

検索キーワードに商品名等を入力して「検索」ボタンを押します。

すると下に検索結果が表示されますので、その中からリンクを貼りたい商品を選び、「リンク作成」をクリックします。

「カスタマイズとHTML取得」が表示されたら、「画像のみ」をクリックします。

そして、「1.リンクをカスタマイズする」欄でサイズを「画像サイズ：中」にします。 リンク先ページは、「商品の詳細ページ」でも「出品商品の一覧ページ」でもどちらでも良いです。表示のされ方に違いはありません。

「3.この商品リンクのHTMLを取得する」欄で「選択する」をクリックすると、ソースコードが選択され、クリップボードにコピーされます。

WordPressの投稿画面に戻って、showcase内の「★Amazonアソシエイト 商品リンク 画像のみ HTML★」を範囲選択します。

そしてそのままペースト！そうすると、先ほどコピーしたソースコードが貼り付けられます。

Amazonアソシエイトから商品リンク（テキスト）をコピペする。

次には商品名の部分にあたるテキストリンクです。

また、Amazonアソシエイトの画面に戻って、「テキストのみ」をクリックします。

リンクテキストやリンク先を変えたい方は「1.リンクをカスタマイズする」で変えて頂いて、「3.この商品リンクのHTMLを取得する」欄で「HTML」にチェックをいれたまま「選択する」をクリックして、ソースをコピーします。

また、WordPressの投稿画面に戻って、showcase内の「★Amazonアソシエイト 商品リンク テキストのみ HTML★」の部分にソースを貼り付けます。

Amazon商品ページから著者、出版社、発売日等をコピペする。

次にAmazonアソシエイトの画面に戻って、「2.プレビュー」にあるリンクをクリックして、Amazonの商品ページに行きます。

カエレバの場合、商品説明にメーカー名が入りますよね？

ヨメレバだと著者名、出版社名、発売日ですかね。そのあたりを商品ページでコピーします。

そしてまたまた、WordPressの投稿画面に戻って、showcase内の「★著者　出版社　発売日等★」の部分に貼り付けます。

Amazonアソシエイト、楽天アフィリエイトで検索結果のテキストリンクをコピペする。

次に、ボタン部分にリンクされる「検索結果へのリンク」を作成して、コピペします。

Amazonアソシエイトの画面に戻って、今度は「テキストリンク」作成ページにいきます。

真ん中の「検索結果へのリンク」をクリックして、 「検索結果へのリンク」作成ページを表示させて、 カテゴリー、キーワード、表示するテキストを選択、入力します。

「表示するテキスト」はボタン内に表示されるテキストなので、「Amazon」にします。

「HTMLを取得」をクリックすると、右側にソースコードが表示されるので、「HTMLを選択」をクリックして、ソースをコピーします。

又又又、WordPressの投稿画面に戻って、showcase内の「★Amazonアソシエイト テキストリンク 検索結果へのリンク HTML★」の部分にソースを貼り付けます。

次に楽天市場にいき、キーワードをいれて検索します。

そして表示されたページのURLをコピーします。「楽天市場」ボタンにはこのリンクが貼られます。検索結果を絞りたい人は、絞った状態のページのURLをコピーして下さい。

次に楽天市場アフィリエイトにいき、右上の窓に先ほどコピーしたURLを貼り付けて、「作成」をクリックします。

リンクのプレビューが表示されます。右側の「テキストを編集する」欄が、ボタン内に表示されるテキストになります。

なので、「楽天市場」と入力すると、プレビューが変わります。商品によっては「楽天ブックス」でもいいかも。

下に行って「コピー」をクリックすると、ソースコードが選択され、「コピーしました！」と出るので、WordPressの投稿画面に戻ります。

そして、showcase内の「★Rakutenアフィリエイト URLからリンクを作成 テキストのみ★」の部分にソースを貼り付けます。

これで作業終了です。プレビューで見てみて、ちゃんと表示されているでしょうか？

カエレバ風リンクのカスタマイズ

ここからはカスタマイズ方法です。

Kindleボタンの使い方

ヨメレバっぽくKindleのボタンも使いたいという方へ。

showcase内のソースをよく見ると29行目あたりに

<!--
<div class="showcase-kindle">
★Amazonアソシエイト テキストリンク Kindleストア検索結果へのリンク HTML★
</div>
-->

の部分がありますよね？

カンの良い方は「この部分にkindleストアの検索結果へのリンクを貼るんだな」とわかったと思いますが、リンクを貼るだけではボタンは表示されません。

ソースの上下にある「<!––」と「––>」に挟まれた部分は表示されません。

<!--　←これとこれ→ -->

なので、Kindleストアの検索結果へのリンクを貼りたい場合は、 「<!––」と「––>」 を削除して下さい。

そしてAmazonアソシエイト→テキストリンク→検索結果へのリンクで、カテゴリーを「Kindleストア」にし、「表示するテキスト」を「Kindle」にして作成したHTMLをここに貼ってください。

Kindleのボタンはたまに使うことがあるので、このようにいつでも使える状態にしてあります。

Kindleのリンクを全く貼る予定が無い方はこの部分を削除していただいて大丈夫です。

ボタンの色やデザインのカスタマイズ

事前準備でスタイルシートに貼ったCSSに、簡単に変えてオリジナリティーが出そうなところに注釈をいれておきました。

「/* 外枠の枠線 */」とか「/* ボタンの角の丸み */」とか「/* Amazonのボタンの色 */」とか。

そこを変えてみて下さい。

ボタンの増減のカスタマイズ

1つのボタンは、以下の3行で成り立っていることを理解して下さい。

<div class="xxxxxxxxxxx">
★リンクを貼り付ける場所★
</div>

なので、ボタンを減らす場合も増やす場合も3行ひとかたまりで消したり挿入してください。

ボタンの減らし方

まず減らし方ですが、例えばAmazonのボタンだけでよければ、楽天市場の検索結果を貼る部分 の3行を削除するか、Kindleボタンのように 「<!––」と「––>」 で3行を囲ってしまえば表示されなくなります。

ボタンの増やし方

次に増やし方ですが、例えば、Yahoo!ショッピングのボタンを作る場合で説明します。

showcase内の最後あたり、楽天市場のボタンの下に

<div class="showcase-rakuten">
★Rakutenアフィリエイト URLからリンクを作成 テキストのみ★
</div>
<div class="showcase-yahoo">
★Yahoo!ショッピングのアフィリエイトリンク（テキストリンク）★
</div>
</div>
</div>
</div>

みたいな感じで3行挿入して下さい。

「showcase-yahoo」というクラス名や「★Yahoo!ショッピングのアフィリエイトリンク（テキストリンク）★」の部分は何でもいいです。

これでボタンはできますので、このボタンの装飾用のCSSをスタイルシートに記述します。

.showcase-yahoo a {
	background: #E60033; /* Yahoo!ショッピングのボタンの色 */
}

「showcase-yahoo」の部分は、showcase内に挿入したクラス名と同じでなければいけません。

このCSSを「.showcase-rakuten a」の下あたりにでもいれておけばいいと思います。

.showcase-rakuten a {
	background: #bf0000; /* 楽天市場のボタンの色 */
}
.showcase-yahoo a {
	background: #E60033; /* Yahoo!ショッピングのボタンの色 */
}

ボタンを増やしていけばこんな感じにもできます。

ボタンのテキストやリンクを変えれば、アフィリエイトのリンクに限らず、いろんな使い方ができるかもしれません。

まとめ

このカエレバ風リンクを作るにあたっては、カエレバのソースコードを参考にしております。また、Cocoonのソースコードも参考にしております。

無料で素晴らしいサービスを提供してくださる方の存在は、ほんとありがたいですね。