blog.tawa.me

東京から福岡移住したWeb開発の人が発信していくブログ

はてなブログのAmazon商品リンクのデザインをカスタマイズする|背景の色を変える、ボタンを追加

f:id:tawachan39:20200128181749j:plain

こんにちは、たわです。今回ははてなブログでのAmazon商品リンクについてです。

このブログもはてなブログを使っていて、カスタマイズしたときのことをメモしておきます。

はてなブログのAmazon商品リンク

はてなブログでは、Amazonの商品リンクを簡単に表示させることができます。

f:id:tawachan39:20200128172935j:plain
簡単に挿入できる

でも見た目が少し微妙だなと思っていたので少しカスタマイズしてみました。

カスタマイズした見た目

まずは実際にカスタマイズした見た目です。サンプルとして実物をいくつか置いてみます。

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

  • 作者:山本 陽平
  • 出版社/メーカー: 技術評論社
  • 発売日: 2010/04/08
  • メディア: 単行本(ソフトカバー)

カスタマイズの仕方

上記のようなカスタマイズのやり方を書きます。

「Amazonでチェック」ボタンを追加

まずはボタンを追加する方法です。

「デザイン設定」 > 「フッター」

に以下のJavaScriptのコードを貼り付けると追加されるはずです!

<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;
}

こうすると、上記の例のような見た目にできると思います。

まとめ

自分でカスタマイズしたときのメモを残してみました。誰かの参考になれば嬉しいです。

たくさんリンクがあるおすすめ本の記事

blog.tawa.me