2024-10-03 Thursday

Journal

今日のあれこれ

  • 鯛を巡ってひと悶着。

今日のhugoさん

アマゾンのアフィリエイトリンク設定してみた。参考はこちら1とか。

画像が出ないものもあるっぽい。

以下、手順。

amazon.html

layouts/shortcodes/amazon.htmlを作成。ほぼ丸写し…。

{{- $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" alt="{{ $title }}" /> -->
    <!-- <img src="https://images-fe.ssl-images-amazon.com/images/P/{{ $asin }}.09.TZZZZZZZ" alt="{{ $title }}" /> -->
    <img src="https://images-fe.ssl-images-amazon.com/images/P/{{ $asin }}.09.MZZZZZZZ" alt="{{ $title }}" />
  </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>

変更履歴

  • 画像リンクurlを変更 2024-10-17 Thursday

amazon.css

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

hugo.toml

associate IDと、さっき作った css を指定する。

  [Params]
  # amazon associate ID
  amazonJpAffiliate = "your_associate ID"
  # customCSS = ["css/custom.css"] # Include custom CSS files
  customCSS = ["css/amazon.css"]

shortcode

こんな感じ…

{{＜ amazon asin="B00352W4PY" title="日動工業 日動 100V昇圧器ハイパワー  M-20S" ＞}}
日動工業 日動 100V昇圧器ハイパワー M-20S
日動工業 日動 100V昇圧器ハイパワー M-20S amazon.co.jp

今日のごはん

  • 朝: 豚汁 炒飯
  • 昼: 鯵漬け丼 (長岡市場食堂)
  • 晩: 鯛刺身 鶏唐揚げ ご飯

今日もとりあえず飲まない

故あってしばらく飲まない…（つもり）

207日目