語学と美容と育児の狭間で

英検1級&仏検2級を目指す30代ワーママ。外国語が好き!洋書が好き!コスメ好き!な女の日常

はてなブログで使えるアマゾンアフィリエイトを分かりやすく!

フルタイムで働きながら2歳の息子を育てています照れ

おすましペガサス2人目妊娠中(予定日:2021年4月)

キャリアアップを目標に
おすましペガサス英検1級
おすましペガサス仏検2級
おすましペガサス日本語教育能力検定試験
を目指していますリボン

趣味は語学ピンクハート
🇩🇪🇪🇸も落ち着いたら勉強したいラブ

そんな30代ワーママの日記ですガーベラ

f:id:uchijikan:20200814200429j:plain

おはようございます!


最近、息子が夜の間中よく眠ってくれるので朝5時に起きています😊❤️

子どもが起きている間はパソコンが触れないので、ひとり時間の間にブログのカスタマイズをしています。

『はてなブログのアマゾンへのリンクが分かりづらいな』...と思っていたところリンクを分かりやすくする方法を見つけましたのでご紹介します✨

はてなブログのアマゾンリンクはシンプル過ぎる

はてなブログのアフィリエイトリンクを使ってアマゾンにリンクすると、

f:id:uchijikan:20200814071722j:plain

こんな感じで、めっちゃシンプル。

人によってはリンクだと気づかない人もいるくらい。

変更後:

  • アマゾンリンクだと分かりやすく
  • アマゾンのリンクがあるとスマホの下に詳細が表示される



そんな風にカスタマイズしたのがコレ↓↓

f:id:uchijikan:20200816213323j:plain



すんごい簡単なので方法をご紹介します

アマゾンリンクを分かりやすくするカスタマイズ

\こちらを参考にしました/

色や細かい表示のカスタマイズは追々変えていこうと思っていますが、参考ブログ様の書いてある通りにやればめちゃめちゃ簡単にリンクの表示を変えることができました。

フッタに

デザイン設定→フッタ

<script> (function() { // Amazon商品リンクの見た目調整 // Copyright © 2020  tawachan All Rights Reserved. const links = document.getElementsByClassName("hatena-asin-detail-title"); Array.from(links).forEach(l => { const href = l.children[0].href; const a = document.createElement("a"); a.textContent = "Amazonでチェック"; // ←文言は自由に変更可能 a.className = "amazon hatena-asin-detail-label"; a.href = href; l.parentElement.getElementsByTagName("ul")[0].insertAdjacentElement("beforebegin", a); }) // Amazon商品リンクをすべて_blankにする const amazonComponents = document.getElementsByClassName("hatena-asin-detail"); Array.from(amazonComponents).forEach(c => { const anchors = c.getElementsByTagName("a"); Array.from(anchors).forEach(a => { a.target = "_blank"; }); }) })() </script>

これを入れることでAmazonのボタンが出来るそうです。

デザインCSSに

デザイン設定→デザインCSS

/* アマゾン商品リンク改善 */ /* Copyright © 2020 tawachan All Rights Reserved. */ .entry-content .hatena-asin-detail { border-radius: 10px; border: 2px solid #38868C; background: #efffef; } .entry-content .hatena-asin-detail ul { display: flex; flex-direction: row; flex-wrap: wrap; padding: 8px 0px; } .entry-content .hatena-asin-detail li { margin: 0px 8px; text-decoration: underline dotted gray; } .entry-content .hatena-asin-detail-title a { color: #38868C; font-weight: bold; font-size: 1.1rem; text-decoration: underline; } .entry-content .amazon { color: white; background: #F79501; font-weight: bold; font-size: 1.0rem; border-radius: 5px; padding: 4px 30px; width: 100%; } .entry-content .hatena-asin-detail img { border-radius: 10px; }

この2点をコピペするだけでアマゾンリンクがかっこよくなりました🤭💓

また時間がある時に、このブログに合う色を変えようと思っています。

スマホ画面の下にアマゾンリンクの詳細

アマゾンアソシエイトに合格している人なら誰でも簡単に出来ます!

  • テキストリンク
  • 画像つきリンク
  • はてなブログのアフィリエイトリンク

など、アマゾンのアフィリエイトリンクを貼ると自動的にスマホの下に

こんな感じで表示されます
f:id:uchijikan:20200816213441j:plain



  1. アマゾンアソシエイトにログイン
  2. メニューバーの商品リンクをクリックして、Mobile Popoverを選択
  3. 表示されているJavaScriptをコピー
  4. コピーしたJavaScriptをはてなブログのデザイン設定→ヘッダに貼り付け

これだけでスマホ下に表示されるようになります!


簡単!

今日学んだことの覚え書きでした😊

はてなブログから簡単に出来るアマゾンリンクをカスタマイズしたい!と思っている方にとってもオススメの方法です✨

\例で出ている洋書たち/

Verity (English Edition)

Verity (English Edition)

Spinning Silver: A Novel (English Edition)

Spinning Silver: A Novel (English Edition)

  • 作者:Novik, Naomi
  • 発売日: 2018/07/10
  • メディア: Kindle版

Edenbrooke: A Proper Romance (English Edition)

Edenbrooke: A Proper Romance (English Edition)