Hugoにはショートコードという機能がある。

Reactのコンポーネントみたいな感じで、予め定義したHTMLに引数経由で情報を注入することができる。

今回は以下のようなアフィリエイト用のショートコードを作成したので、その作り方を紹介する。

#PR
FACTFULNESS 10の思い込みを乗り越え、データを基に世界を正しく見る習慣

FACTFULNESS 10の思い込みを乗り越え、データを基に世界を正しく見る習慣

要件定義

ショートコードの引数として以下を設定した。

  • rakuten_href: 楽天リンクのURL
  • amazon_href: AmazonリンクのURL
  • src: 画像のURL
  • title: 本の名前

ショートコード用のHTMLを作成

/layouts/shortcodes/affiliate.htmlを作成する。

<div id="affiliate_wrapper">
  <div id="affiliate_pr">#PR</div>
  <img src='{{ .Get "src" }}' id="affiliate_image" alt='{{ .Get "title" }}'/>
  <p id="affiliate_title">{{ .Get "title" }}</p>
  <div id="affiliate_link_wrapper">
    <a
      href='{{ .Get "rakuten_href" }}'
      target="_blank"
      id="affiliate_rakuten">
      楽天
    </a>
    <a
      href='{{ .Get "amazon_href" }}'
      target="_blank"
      id="affiliate_amazon">
      Amazon
    </a>
  </div>
</div>

本当はidではなくclassを使ったほうが良いと思うが、テーマのCSSに詳細度で負けることがあるのでidを使っている。

ショートコード用のCSSを作成

カスタムCSSに関してはHugoでサポートされているわけではなく、テーマごとにサポートされているっぽい。

たとえばPaperModだと、/assets/css/extendedにCSSファイルを追加すると自動でCSSが読み込まれる。

もしテーマ側でカスタムCSSがサポートされていない場合は自分でテンプレートを編集してheadタグ内でCSSを読み込んだりする必要がある。

もしhoverのような疑似クラスを利用しないなら、style属性に直接スタイルを書く方が楽かもしれない。

ということでPaperModなら/assets/css/extended/affiliate.cssを作成する。

#affiliate_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;
  padding-top: 10px;
  padding-bottom: 20px;
  width: 252px;
  background-color: white;
  border: 1px solid #95a5a6;
  border-radius: 10px;
  box-shadow: none;
  margin-bottom: 20px;
}

#affiliate_pr {
  width: 220px;
  color: #0b80a5;
  font-size: 14px;
  text-align: right;
}

#affiliate_image {
  max-width: 240px;
  height: 240px;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

#affiliate_title {
  max-width: 200px;
  color: #1f1f1f;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

#affiliate_link_wrapper {
  width: 210px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#affiliate_link_wrapper a {
  width: 100px;
  height: 30px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  box-shadow: none;
}

#affiliate_rakuten {
  background-color: #bf0000;
  color: white;
}

#affiliate_rakuten:hover {
  background-color: #990000;
}

#affiliate_amazon {
  background-color: #ffa41c;
  color: black;
}

#affiliate_amazon:hover {
  background-color: #e68a00;
}

ショートコードを呼び出す

{{< affiliate
    rakuten_href=https://a.r10.to/hNab5q
    amazon_href=https://amzn.to/4hG1NVS
    src=https://hbb.afl.rakuten.co.jp/hgb/46510050.5165b4d2.46510051.bf2ae0c3/?me_id=1278256&item_id=17966596&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Frakutenkobo-ebooks%2Fcabinet%2F7708%2F2000007017708.jpg%3F_ex%3D240x240&s=240x240&t=pict
    title="FACTFULNESS 10の思い込みを乗り越え、データを基に世界を正しく見る習慣" >}}

{と<の間にスペースを入れてしまって20分ほど溶かしたので注意。

画像に関しては楽天のアフィリエイトリンク作成画面で取得できるものを利用している。