日々のいろいろ

日々を綴ったほとんど日記

はてなブログでAmazonアソシエイトのリンクを横に並べて配置する方法

まえがき

はてなブログで記事下にこんな風にAmazonアソシエイトのリンクを貼る方法を紹介します。

リンクの作成

まずAmazonアソシエイトの商品リンクから、リンクを作成したい商品を探してリンクを作成します。

f:id:legendimposter:20200911105216p:plain
f:id:legendimposter:20200911105240p:plain

”リンクをカスタマイズする”から文字色を変えたりできます。

f:id:legendimposter:20200911110212p:plain

このリンクはAmazonの商品ページからアソシエイトツールバーを使っても生成できます。

f:id:legendimposter:20200911105653p:plain

リンクを選択してコピーしたら、貼り付けていきます。

見たまま編集

見たまま編集で記事を作成している人はHTML編集を開いてリンクをペーストします。

2つ以上並べて表示させる際も特に設定は必要ありません。

そのまま2つ目も続けてペーストすることで並んで表示されます。

f:id:legendimposter:20200911110819p:plain

はてな記法Markdown

普段使うことがないので正しい記述方法ではないかもしれないですが、編集画面にリンクをそのままペーストすることで作成できます。

注意点としては、はてな記法ではリンク毎に改行を入れてしまうと、横に表示されないので気を付けてください。
改行せず続けて記述してください。

定型文を作成

使用頻度の高いリンクは記事毎に追加していく作業が必要になるので、はてなブログで定型文として作成しておくことをおススメします。

定型文はブログの記事作成画面のサイドバーから作成可能です。

f:id:legendimposter:20200911111816p:plain

記事下に関連したリンクを生成するとページの完成度とクリック率が上がるので、ぜひ使ってみてください。