カエレバ風なるものがいつの間にか出来ていた

カエレバのデザイン例
面倒くさいことがひとつ解消した!

はじめに

現在ぼくはGSSMBOYの逆襲とこのブログを運営していて、使っている広告類は2つ。
GoogleアドセンスAmazonアソシエイト

Amazonアソシエイトの商品リンクをブログに表示するにあたって便利なツールがある。
アフィリエイトを利用している人の大半が知っているだろう、カエレバである。

カエレバとは

以下はよそのサイトでの使用例(画像なのでリンクにはなっていない)
カエレバの使用例

カエレバの使用例2
このような感じで、Amazon楽天Yahoo!ショッピングなどへのリンクを分かりやすくまとめて表示してくれるツールがカエレバだ。
デザインも自分でいじれる。
GSSMBOYの逆襲とこのブログでは下のような感じ(Amazonアソシエイトしか使っていないので、前の2つと違いボタンがひとつしかない)。両ブログでほとんど同じデザイン。
これは画像ではなく実際リンクになっている。

どういうデザインが有効かについては諸説あるが、ある程度目立つ法がユーザーへの訴求力は高いだろう。
ぼくはブログデザインであまり色を多用しない方針なので、どちらかと言えばサイト全体とのなじみを優先している。

カエレバからカエレバ風へ

2019年の頭に、仕様が変わってAmazonからカエレバの商品リンクを生成できなくなった。
まあ大体のブログ運営者は、Amazonアソシエイトだけではなく複数のショッピングサイトのアフィリエイトを利用しているから、Amazon以外からリンクを生成すれば問題ないらしいのだが、ぼくはAmazonアソシエイトしか利用していないために困った。

自動生成ではなく、新仕様に合わせたリンクコードを自力で打ちこむことで、従来と同様の形式でリンクを表示させてはいたものの、作業効率はかなり悪くなった。

仕様変更以降カエレバのサイトを見る機会がかなり減っていたのだが、久々に見たら……
なんと!
カエレバを以前のように使えるカエレバ風なるものが公開されていた。

気づいていなかった

調べてみたところ去年の7月にはカエレバ風はあったっぽい。
1年近く無駄な自力リンク生成をしていたのか……?
でも結構ぼくと同じ境遇の人いるんじゃないかなと思う。いや、いないかもしれない。もしいたら教えて差し上げたくこのエントリを書くに至った。

以前のカエレバより使いやすいし、元々あったカエレバ用のCSSがそのまま流用できる(もしかすると、楽天Yahoo!ショッピングなどその他のアフィリエイトも兼用している人は修正箇所があるかもしれないが、ぼくの場合は何も問題がなかった)。

ありがたい!

この記事の商品リンクもカエレバ風で作ったものだが、どこが「風」なのか、本家カエレバを使っていた時と全く同じものが作れている。
そもそもカエレバの仕組みもよくわかっていないし、なぜAmazonから商品リンクが生成できなくなったのかもわかっていないので、ただただ便利に生まれ変わっただけに感じる。

使い方等はカエレバ風のサイトを見ればわかると思う。
一応ざっくり書けば、ブックマークレットをブラウザに登録し、リンクを作りたい商品をAmazonで開き、そのブックマークレットをクリックするだけ。

カエレバを使う場合はカエレバのサイト内で商品を検索するのだが、直接Amazonで探す方が楽なので、カエレバ風の方が使いやすく思う。

当ブログのデザイン例

初めてカエレバ、カエレバ風を利用する方のためにデザイン例。

そのままコピペ(はてなブログを利用されている場合、デザイン→CSSに貼り付ける)したらこれと同じようなものができると思う。PCから見てもスマホから見てもレスポンシブな表示になるはず。

ただし、ぼくはAmazonについての記述しかしていない。なので楽天Yahoo!ショッピングも利用していてなおかつこのデザインを使用したい方は、ここから派生させてボタンを増やすか、検索すれば同様にコピペできるコードを公開しているサイトがあるはずなので、それと組み合わせて書き直すか。

この辺が参考になると思う。

まあ、ぼくのはあくまでついでという感じで見ていただければ。

/*--------------------------------------
  カエレバ
--------------------------------------*/
.kaerebalink-box{
	margin: 1em 0 1em;
	padding:0 8%;
	border:double #999;
	overflow: hidden;
	font-size:small;
}
.kaerebalink-image{
	margin:15px 0 15px 0;
}
.kaerebalink-image img{
	display:block;
	margin:0 auto;
	text-align:center;
}
.kaerebalink-info{
	text-align:center;
	line-height:120%;
	overflow: hidden;
}

.kaerebalink-name{
	font-size:13px;
	margin-bottom:5px;
	line-height:1.2em;
}
.kaerebalink-powered-date{
	font-size:8pt;
     margin-top:10px;
	line-height:120%;
}
.kaerebalink-detail{
    	font-size:8pt;
	margin-bottom:3px;
}
.kaerebalink-link1{
	margin-top:3px;
}
.shoplinkamazon{
    width:50%;
	height:20px;
	overflow:hidden;
	background-color:#0C253C;
	transition: all .3s;
	border-radius: 7px;
	display:inline-block;
	margin:10px 5px 10px 5px;
	padding:10px 0px;
	text-align:center;
	border:2px solid #0C253C;
	}	
.shoplinkamazon:hover{
	background-color:#183b5b;
	transition: all .3s;
	border:2px solid #183b5b;
}
.shoplinkamazon:active{
	position:relative;
transition: all .3s;
}
.shoplinkamazon a{
	display:block;
	cursor:pointer;
	text-decoration:none;
	font-weight:700;
	font-size:13px;
	padding-top:2px;
	transition: all .3s;
}	
.shoplinkamazon a{
	color:#FF9901;
	transition: all .3s;
}

おわりに

気づいてよかったー。
カエレバが使えなくなった後、Amazonの商品リンクを作るので5分くらいかかっていたと思うから。
複数の商品リンクがあるような記事の場合、なかなかの手間だった。

アフィリエイトはやっているけれどAmazonアソシエイトのみ、そしてカエレバを利用していたけれどカエレバ風の存在は知らなかった人向けの記事って、めちゃめちゃニッチか?