https://www.awesome-360.com/tags/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%88/ Recent content in アフィリエイト on Awesome360 Hugo -- gohugo.io ja-jp Fri, 23 Jul 2021 00:00:00 +0000 https://www.awesome-360.com/post/2021/07/how_to_edit_affiliate_link_hugo/ Fri, 23 Jul 2021 00:00:00 +0000 https://www.awesome-360.com/post/2021/07/how_to_edit_affiliate_link_hugo/ 今回は私が使用しているHugoテーマでアフィリエイトリンクを埋め込めるよう編集したので、その方法について紹介していきます。 では早速いってみましょう！ 目次 HTMLを編集 CSSを編集 TOMLファイル編集 CSSファイル編集 最後に 1. HTMLを編集 まずはhtmlファイルを作成します。 今回はaffiliate.htmlというファイルをshortcodes内に作成しました。 配置位置は以下の感じです。 ご自身のブログ-|-aechetypes |-content |-data |-layouts-| |-shortcodes-| |-affiliate.html |-public |-static ファイル内を編集していきましょう。 私は以下のようになりました。 <div class="affiliate-box"> <div class="three columns amazon-image"> <a href="{{ .Get "amazon-url" }}" target="_blank"> <img border="0" src="{{ .Get "imageUrl" }}"> </a> </div> <div class="affiliate-info"> <div class="amazon-info"> <a href="{{ .Get "amazon-url" }}" target="_blank"> <p class="amazon-name">{{ .Get "title" }}</p> </a> <div> <p>{{ .Get "summary" }}</p> </div> </div> <a href="{{ . https://www.awesome-360.com/post/2021/07/hugo_shortcodes_amazonaffiliate/ Fri, 09 Jul 2021 00:00:00 +0000 https://www.awesome-360.com/post/2021/07/hugo_shortcodes_amazonaffiliate/ 今回はHugoのThemeでAmazonアフィリエイトリンクを記事に埋め込めるように実装したので、その方法をシェアします。 目次 HTMLを作成する 記事に商品リンクを埋め込む 参考サイト 1. HTMLを作成する layouts>shortcodesの直下にamazon.htmlを作成します。 配置場所は以下のようなイメージです。 ご自身のブログ-|-aechetypes |-content |-data |-layouts-| |-shortcodes-| |-amazon.html |-public |-static amazon.htmlの中身は以下です。 <div class="amazon-box"> <div class="three columns amazon-image"> <a href="{{ .Get "url" }}" target="_blank"> <img border="0" src="{{ .Get "imageUrl" }}"> </a> </div> <div class="nine columns amazon-info"> <a href="{{ .Get "url" }}" target="_blank"> <p class="amazon-name">{{ .Get "title" }}</p> </a> <div> {{ .Get "summary" }} </div> <form> <input type="button" value="amazon" onClick="window.open('{{ .Get "url" }}','null')"> </form> </div> <br> </div> {{ .