千夜一夜

人生は短い、それはまるでたった1日のように

記事内の商品紹介をAmazonから楽天に移行しました

記事内の商品紹介を、Amazonから楽天に移行しています。過去記事を遡って変更まではしていないものの、2023年末あたりから意識するようになりました。

理由は国内サービスを応援したい思いが芽生えたこと。クレジットカードもJCBをメイン使いにするよう意識し始めました。

Amazon楽天のバナーを比較

はてなの商品紹介機能を利用したバナーを、Amazon楽天それぞれ同じ商品で並べてみました。

Amazon商品紹介機能を追加しました - はてなブログ開発ブログ

編集サイドバーから楽天市場の商品を簡単に紹介できる「楽天商品紹介」機能を追加しました - はてなブログ開発ブログ

Amazonでの商品紹介

楽天での商品紹介

比べた結果4点の違いが出ました。

Amazon商品紹介

  • サムネイル写真の画質が良い(記事のサムネイルに設定するとさすがに粗い)
  • 書籍の商品情報として作者名、出版社名が出る
  • クリック箇所は商品名と「Amazon」ボタン(遷移先は同一)
  • どちらもクリックすると別タブで開かれる

楽天商品紹介

  • サムネイル写真の画質が粗い
  • 商品情報として価格が出る
  • クリック箇所は商品名と「楽天で詳細を見る」リンク(遷移先は同一)
  • 商品名のクリックは同一タブ、「楽天で詳細を見る」リンクは別タブで開く

 

また完成記事からは見えない違いとして、記事編集画面の時点での楽天商品紹介はURLのみ表示されます。

f:id:senyaitiya:20240329192144j:image

ちなみに例に出した商品のちいかわ1巻は、実際に先日の楽天スーパーセールで購入したものです。ハマって描き下ろしを楽しみました。

f:id:senyaitiya:20240329212456j:image

 

楽天アフィリエイトの商品リンク作成ページでバナーを作成すると点線の枠が付く

また、現状はてなブログ楽天の商品紹介を貼る際はPC版の記事編集画面からサイドバーの「楽天商品紹介」を使っています。アプリとスマートフォン版ブラウザのメニューにあるのはAmazon商品紹介のメニューだけなので、若干不便ではある。

楽天アフィリエイトの商品リンク作成ページから作成したバナーコードをHTML編集画面から貼り付けると、余計な点線の枠も表示されてしまうためやめました。


 

サイズ指定のレスポンシブ対応がないため今回はスマホ基準の128×128で表示させましたが、画像とテキストのバナーの場合は他のサイズでも同じ状態となります。

結局はてなのバナーのデザインがしっくりくるという理由もあり使用していませんが、検索したところCSSの設定で枠線を非表示にする対処法も公開されていました。

楽天アフィリエイトのリンクの「外側の薄い枠線」を消す・センター寄せにする方法 – DigiLocus

 

おわりに

この機に複数のECサイトへのリンクを生成できる商品紹介ツールの カエレバさんを調べてみたところ、Amazonの商品情報取得APIの仕様変更によりメインのECサイトAmazonから楽天に変更されていました。

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

今後は「購入したECサイトの、購入した商品のリンクを貼る」を原則に、AmazonやQoo10などで購入した商品の場合は購入したサイトのリンクも利用しつつ主にはてな楽天商品紹介機能を用いる予定です。