飽き性の頭の中
はてなブログのAmazon商品リンクのデザインをカスタマイズする|背景の色を変える、ボタンを追加のサムネイル
ブログ運営

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

2020-01-28
# はてなブログ

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

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

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

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

20200128172935.jpg

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

カスタマイズした見た目

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

【Amazon.co.jp 先行発売】サントリー ZONe β Ver.0.8.5 ゾーン エナジードリンク 500ml ×6 缶

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

カスタマイズの仕方

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

「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: 1rem;
  border-radius: 5px;
  padding: 4px 30px;
  width: 100%;
}

.entry-content .hatena-asin-detail img {
  border-radius: 10px;
}

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

まとめ

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

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

【初心者向け】Web エンジニアになるために最低限読んでおきたい本 10 選

タグ一覧

# 福岡:39# 東京:19# 移住:10# エナジードリンク:9# 大学院:9# Google:8# ブロックチェーン:8# Webエンジニア:7# Mac:6# Sony:6# Apple:5# Googleフォト:5# インドネシア:5# サントリー:5# 埼玉:5# 英語:5# AWS:4# Canon:4# EOS 8000D:4# Kindle:4# ZONe:4# 京都:4# 仮想通貨:4# 鴨川シーワールド:4# Docker:3# EOS8000D:3# Lightroom:3# Markdown:3# Pixel:3# React Native:3# iPad:3# iPad mini:3# アマルティア・セン:3# アメリカ:3# セブンイレブン:3# ラーメン:3# レッドブル:3# 卒業旅行:3# 紅葉:3# 長崎:3# API:2# ECR:2# ERC20:2# Expo.io:2# Firebase:2# Kindle Oasis:2# Kindle Paperwhite:2# LINE:2# MacBook Pro:2# NestJS:2# Next.js:2# Notion:2# Oculus:2# Oculus Quest:2# Pixel Buds:2# React:2# a7iii:2# iPhone:2# pandoc:2# re:Invent:2# zsh:2# かき小屋:2# カフェ:2# ギグワーカー:2# サーチコンソール:2# ジャカルタ:2# スターバックス:2# ステーキ:2# スマートウォッチ:2# ソラマチ:2# チョコレート:2# ニューヨーク:2# バリ島:2# パンとエスプレッソと:2# ヒュッゲ:2# ビーチ:2# ブックスタンド:2# マクドナルド:2# ミズマチ:2# モンスターエナジー:2# ワイヤレスイヤホン:2# 三千院:2# 両国:2# 修士論文:2# 兵庫:2# 千葉:2# 博多:2# 堀江貴文:2# 宮崎:2# 寿司:2# 嵐山:2# 川越:2# 広島:2# 新宿御苑:2# 日米学生会議:2# 有馬温泉:2# 東寺:2# 歴史:2# 江ノ島:2# 清澄白河:2# 独自ドメイン:2# 社会人:2# 神奈川:2# 神戸:2# 転職:2

©2022 tawachan All Rights Reserved.