ゴーストインザヘッド

元引きこもりのオタクが送るサブカル・エンタメ系ブログ。マンガ、ラノベ、ゲーム、ガジェットなどを中心に書いていきます。読んだ人をモヤモヤさせることが目標です。

自動更新!!

現在Kindleで読める無料マンガ

マル秘

はてなブログAmazonリンク生成モジュール魔改造コード

はてなブログのAmazon商品リンクモジュールで生成したHTMLにAmazon(リンク先同じ)、楽天(バリュコマ/公式)、Yahooショッピング(バリュコマ)へ遷移するボタンを挿入するコード。
 
例)

沈黙のWebライティング ?Webマーケッター ボーンの激闘?〈SEOのためのライティング教本〉

沈黙のWebライティング ?Webマーケッター ボーンの激闘?〈SEOのためのライティング教本〉

 
 

"Amazon + 楽天(バリュコマ) + Yahoo(バリュコマ)" ver

<script>
(function() {
  $(function() {
    if (!$('.hatena-asin-detail').get(0)) {
      return;
    }
    $('<ul class="kaerebalink-link1"><li class="shoplinkamazon"><a href="#amalin" class="amazon__link" target="_blank" rel="nofollow">Amazonで見る</a></li><li class="shoplinkrakuten"><a href="#rakulin" class="rakuten__link" target="_blank" rel="nofollow">楽天で見る</a></li><li class="shoplinkyahoo"><a href="#yaholin" class="yahoo__link" target="_blank" rel="nofollow">Yahooで見る</a></li></ul>').appendTo('.hatena-asin-detail');
    $('.hatena-asin-detail > a').each(function(index) {
      return $('.amazon__link').eq(index).attr('href', $(this).attr('href'));
    });
    return $('.hatena-asin-detail-image').each(function(index) {
      $('.rakuten__link').eq(index).attr('href', "https://ck.jp.ap.valuecommerce.com/servlet/referral?sid=[あなたのsid]&pid=[あなたのpid]&vc_url=https://search.rakuten.co.jp/search/mall/" + $(this).attr('title') + "/");
      return $('.yahoo__link').eq(index).attr('href', 'https://ck.jp.ap.valuecommerce.com/servlet/referral?sid=[あなたのsid]&pid=[あなたのpid]&vc_url=https://search.shopping.yahoo.co.jp/search?p=' + $(this).attr('title'));
    });
  });

}).call(this);
</script>

 
[あなたのxid]という部分は自分のs/pidを入れてください(カッコ[]は消してね)。
 
 

"Amazon + 楽天(公式) + Yahoo(バリュコマ)" ver

<script>
(function() {
  $(function() {
    if (!$('.hatena-asin-detail').get(0)) {
      return;
    }
    $('<ul class="kaerebalink-link1"><li class="shoplinkamazon"><a href="#amalin" class="amazon__link" target="_blank" rel="nofollow">Amazonで見る</a></li><li class="shoplinkrakuten"><a href="#rakulin" class="rakuten__link" target="_blank" rel="nofollow">楽天で見る</a></li><li class="shoplinkyahoo"><a href="#yaholin" class="yahoo__link" target="_blank" rel="nofollow">Yahooで見る</a></li></ul>').appendTo('.hatena-asin-detail');
    $('.hatena-asin-detail > a').each(function(index) {
      return $('.amazon__link').eq(index).attr('href', $(this).attr('href'));
    });
    return $('.hatena-asin-detail-image').each(function(index) {
      $('.rakuten__link').eq(index).attr('href', "https://hb.afl.rakuten.co.jp/hgc/楽天アフィID/?pc=https://search.rakuten.co.jp/search/mall/" + $(this).attr('title') + "/");
      return $('.yahoo__link').eq(index).attr('href', 'https://ck.jp.ap.valuecommerce.com/servlet/referral?sid=[あなたのsid]&pid=[あなたのpid]&vc_url=https://search.shopping.yahoo.co.jp/search?p=' + $(this).attr('title'));
    });
  });

}).call(this);
</script>

 
楽天アフィIDには自身の楽天アフィリエイトIDを入れてください。
 
 

出力されるHTML

「カエレバ」のセレクタを使ってるのでカエレバ利用者はほぼいじらずに実装できるかと思います。

<ul class="kaerebalink-link1">
	<li class="shoplinkamazon">
		<a href="#amalin" class="amazon__link" target="_blank" rel="nofollow">Amazonで見る</a>
	</li>
	<li class="shoplinkrakuten">
		<a href="#rakulin" class="rakuten__link" target="_blank" rel="nofollow">楽天で見る</a>
	</li>
	<li class="shoplinkyahoo">
		<a href="#yaholin" class="yahoo__link" target="_blank" rel="nofollow">Yahooで見る</a>
	</li>
</ul>

 
都合上リストタグにしてますが別にDIVでもなんでも大丈夫です。
「で見る」とかも自由に変更してください。「で探す」とか無しとか。
 
 

その他CSSなど

.hatena-asin-detail>セレクタ ではてな商品紹介ブログパーツ内でのみ適用されるCSSを記述できます。


例)ボタン幅をカエレバの30%→32%に変更したい時

.hatena-asin-detail>.kaerebalink-link1 a  /* CSSを適用したいセレクタを記載 */
{
width:32%; /* ここにはてなパーツ内独自(ボタン幅など)のCSSを記載 */
}

/* メディアクエリがある場合はあわせて直さないと表示崩れの原因になるかも */
@media screen and (max-width: 680px)
{
.hatena-asin-detail>.kaerebalink-link1 a
  {width: calc(100% - 4px);}
}