続・WordPressでAmazonアフィリエイトリンクをキレイに並べる方法

kiyosan

7 years ago

先日、Amazonアフィリエイト用のリンクが上手く横並びにならない（横並びになったものの、改行を複数個入れないと変なことになる）というエントリを書いたのだが、、、別のやり方で上手く出来た。

1. 2018/09/13更新
2. 導入方法
3. 実際に表示されているのがこちら。
4. 最近のアフィリンク作成サービス使ってみた

2018/09/13更新

↑この部分、元々は個別のリンクとして機能していたのですが、amp対応の際にiframe属性の対応で引っかかって、~~対応するのが面倒だったので~~ただの画像ファイルに置き換えてしまいました。

現在、Amazon他商品関連リンクは基本的にカエレバを利用してリンクを作成しています。

個別にタグを書いて力技で編集するのは、よっぽど内容を理解していないと、amp対応を始めとしたSEO対策には不向きなのでしょうねぇ。（ルールベースで対応出来なくなるため）

導入方法

用意するのは「テキストと画像」のアフィリエイト用ソースコード。

「ビジュアル」モードで、リンクを入れたいところに適当な文字列（例えば、「あああああ」など）を作っておく（わかりやすく作っておくだけなので必須ではない）
その状態で、「テキスト」モードに変更し、「あああああ」と入っているところをアフィリエイト用のソースコードに置き換える。

このとき、<div>〜ここにリンクを挟む〜</div>というようにdivタグでアフィリエイトのリンクを改行無しで囲むこと。

実際に表示されているのがこちら。

———-↓ここから入れる———-

<div>
<iframe width="300" height="150" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=kiyosanlife-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=as_ss_li_til&amp;asins=4863541945&amp;linkId=81323cfe51a32677237b99af9153ea6c" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<iframe width="300" height="150" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=kiyosanlife-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=as_ss_li_til&amp;asins=4844336355&amp;linkId=965aa909afde8747a3f0a3eaf3f7308c" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<iframe width="300" height="150" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=kiyosanlife-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=as_ss_li_til&amp;asins=4797393157&amp;linkId=8f5522284fd9b00b80a43076b0fcb05b" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>

———-↑ここまで入れる———-

うーん、いい感じ。

CSSを本気で使えるようになると、レイアウト周り色々出来るんだろうなぁ。ざっくり基本的な話はわかるつもりだけど、頭の中のイメージをその通りにアウトプットするスキルはまだない。。むむむ。