HugoでAmazonのアフェリエイトリンクをいい感じに表示する

2024-08-22

Web開発

はじめに

負けヒロインが多すぎる！　というアニメを見始めました。舞台が以前住んでいた愛知県豊田の近く豊橋市ということもありチラホラ見覚えがある風景がある気がします。とりあえずヒロインが可愛いので好きです。

ということで、上記のようなアフェリエイトリンクをHugoとShortcodeから呼び出す方法について記載していきます。

ShortCodeの実装

Markdownファイルから呼び出すためのShortcodeを書いていきましょう。こちらのサイト様の内容を下に書いたのがこちらです。

Hugoでわりと楽してわりとかっこよくAmazon商品紹介をする

ほとんど丸パクリで申し訳ない。画像リンクは古そうだったので修正してあります。

CSSファイルを読み込むようにしておきました。ショートリンク呼び出すたびにCSSファイルを呼ぶことになりクソほど無駄ではありますがまぁ動くのでよいでしょう。ローカルにあるテキストファイルだしさほど影響ないでしょう。

<link rel="stylesheet" href="/css/amazon.css">
{{- $tag := .Site.Params.amazonJpAffiliate }}
{{- $asin := .Get "asin" -}}
{{- $title := .Get "title" -}}
<div class="amazon-widget">
  <a href="https://www.amazon.co.jp/gp/product/{{ $asin }}/?tag={{ $tag }}"></a>
  <div class="amazon-widget-img">
    <img src="http://images.amazon.com/images/P/{{ $asin }}.09_SL110_.jpg" />
  </div>
  
  <div class="amazon-widget-info">
    <span class="amazon-widget-title">
      {{ $title }}
    </span>
    <span class="amazon-widget-via">
      <img src="https://www.amazon.co.jp/favicon.ico" />
      amazon.co.jp
    </span>
  </div>
</div>

config.toml

Paramsも下記のように追加します。 AmazonのアフェリエイトIDを設定しておくことでShortcodeから呼び出すようにしています。

[Params]
  amazonJpAffiliate = "XXXXXX"

css

css/amazon.cssというファイルを作り以下を記載します。

.amazon-widget {
    margin: 2rem 0;
    max-width: 480px;
    position: relative;
}
.amazon-widget a {
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
}
.amazon-widget-img {
    border: 1px solid #E1E8ED;
    border-radius: 15px 15px 0 0;
    text-align: center;
 }
.amazon-widget-img img {
    border: none;
    margin: 0 auto;
    max-height: 200px;
    padding: 16px;
}
.amazon-widget-info {
    border-right: 1px solid #E1E8ED;
    border-bottom: 1px solid #E1E8ED;
    border-left: 1px solid #E1E8ED;
    padding:5px 10px 10px 10px;
    border-radius:0 0 15px 15px;
}
.amazon-widget:hover .amazon-widget-info {
    background-color: #E1E8ED;
}
.amazon-widget-title {
    font-weight: bold;
    display:block;
}
.amazon-widget-via {
    color: #aaa;
}
.amazon-widget-via img {
    border: none;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    display: inline;
    vertical-align: text-bottom;
}