先日、Amazonアフィリエイト用のリンクが上手く横並びにならない(横並びになったものの、改行を複数個入れないと変なことになる)というエントリを書いたのだが、、、別のやり方で上手く出来た。
2018/09/13更新
↑この部分、元々は個別のリンクとして機能していたのですが、amp対応の際にiframe属性の対応で引っかかって、対応するのが面倒だったのでただの画像ファイルに置き換えてしまいました。
現在、Amazon他商品関連リンクは基本的にカエレバを利用してリンクを作成しています。
個別にタグを書いて力技で編集するのは、よっぽど内容を理解していないと、amp対応を始めとしたSEO対策には不向きなのでしょうねぇ。(ルールベースで対応出来なくなるため)
導入方法
用意するのは「テキストと画像」のアフィリエイト用ソースコード。
- 「ビジュアル」モードで、リンクを入れたいところに適当な文字列(例えば、「あああああ」など)を作っておく(わかりやすく作っておくだけなので必須ではない)
- その状態で、「テキスト」モードに変更し、「あああああ」と入っているところをアフィリエイト用のソースコードに置き換える。
このとき、<div style="text-align: center;">〜ここにリンクを挟む〜</div>
というようにdivタグでアフィリエイトのリンクを改行無しで囲むこと。
実際に表示されているのがこちら。
———-↓ここから入れる———-
<div style="text-align: center;"> <iframe width="300" height="150" style="width: 120px; height: 240px;" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=kiyosanlife-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4863541945&linkId=81323cfe51a32677237b99af9153ea6c" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <iframe width="300" height="150" style="width: 120px; height: 240px;" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=kiyosanlife-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4844336355&linkId=965aa909afde8747a3f0a3eaf3f7308c" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <iframe width="300" height="150" style="width: 120px; height: 240px;" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=kiyosanlife-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4797393157&linkId=8f5522284fd9b00b80a43076b0fcb05b" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div>
———-↑ここまで入れる———-
うーん、いい感じ。
CSSを本気で使えるようになると、レイアウト周り色々出来るんだろうなぁ。ざっくり基本的な話はわかるつもりだけど、頭の中のイメージをその通りにアウトプットするスキルはまだない。。むむむ。
最近のアフィリンク作成サービス使ってみた
CSSのカスタムなんかも色々と公開されていて、簡単に見た目がいいリンクを作ることが出来るカエレバとかのサービス使うほうが格段にいい感じに出来る。。
カエレバってどういうマネタイズしてるんだろうなぁ。サイト利用者が増えてPV増えるから広告リンク踏んでくれる確立上がる…?ゆーて商品リンク作るツールなページで、別のリンク踏むかなぁ。。謎。
わかばちゃんと学ぶ Webサイト制作の基本〈HTML5・CSS3〉
とはいえ、そんなPV多いサイトってわけでもなし、どっちが良いかとか考えるのはまだまだ先かな。(遠い目)
[…] ※もっといい感じに並べられる様になったので、新しいエントリ書きました! […]
[…] ※もっといい感じに並べられる様になったので、新しいエントリ書きました! […]