HugoにAmazonアソシエイトリンクを貼る

· ·

アソシエイトを貼れるようにする 🔗

ゆーすけべーブログを参考にブログ内にAmazonアソシエイトリンクを貼れるように設定を変更しました。基本的には参考ブログと全く同じ内容にしていますが、毎回CSSを読み込むのも嫌だし少し設定を変更したので、そのメモ。

ショートコード追加 🔗

layouts/shortcodes/amazon.html ファイルを追加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

{{- $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="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN={{ $asin }}&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL350_&tag={{ $tag }}" />
  </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>
CSSファイル作成 🔗

static/css/custom-amazon.css ファイルを追加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

.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;
}
config設定追加 🔗

config.toml ファイル修正

1
2

[params]
amazonJpAffiliate = ""
ページにcssを読み込み 🔗

layouts/partials/head.html ファイルを修正。 <head> の読み込みの制御が別のファイルで行われている場合は、そのファイルを編集。cssファイルをフラグON/OFFで読み込みを制御する。

1
2
3

    {{ if .Params.amazon }}
        <link rel="stylesheet" href="{{ "css/custom-amazon.css" | relURL }}">
    {{ end }}
archtypes修正 🔗

default.md など、読み込みテンプレートを修正する

1

amazon: false

defaultはoffにしておいて、amazonのリンクを生成するときにtrueにするとcssが読み込まれるように設定する。

amazonリンクを貼る時 🔗

{{< amazon asin=“ASIN” title=“商品名” >}}

ショートコードで amazon.html テンプレートを読み込む

所感 🔗

最近いくつかのjsファイル読み込みもフラグ管理に切り替えた。まだテーマのデフォルトで読み込んでいるファイルなんかは特に気にせず読み込ませているけど、そのうち切り替えようかなと思っています。

まだそこまで使いこなせていないけど無料のBlogger大量生産でも構わないけどサイトが散らばったりしている事もあるので、多少は一つにまとめて更新をかけていこうかなと考えているところ。本当はディレクトリごとにテーマ分けたりテンプレート分けたり、色々管理の仕方はありますが個人のブログで今後も引き続き更新するかどうかも分からない状態だし、カテゴリ機能やタグ機能もあるわけだから一先ず記事単体は一つのディレクトリで全部管理するつもり。

運用するうえで支障が出てきたら考えるスタンスで。深くは考えない。

hugo
comments powered by Disqus