t-hom’s diary

主にVBAネタを扱っているブログ…とも言えなくなってきたこの頃。

サイトからの商品リンクをamazonのアフィリエイトリンクに改定

今回改定したのは以下のページ
Wordの真価 - You.Activate

もともと単にオススメ商品としてamazonへの商品リンクを張っていたけど、折角紹介しているので売れたらバックマージンが入る形にしようとアフィリエイトリンクに変更した。
これは本当にオススメの商品である。

根本から理解する Wordの「スタイル」活用読本 [Word2010/2007/2003/2002対応] (Wordで作ったWordの本)

根本から理解する Wordの「スタイル」活用読本 [Word2010/2007/2003/2002対応] (Wordで作ったWordの本)

Word2003の頃ならこちらがイチオシだった。

エンジニアのためのWord再入門講座 美しくメンテナンス性の高い開発ドキュメントの作り方

エンジニアのためのWord再入門講座 美しくメンテナンス性の高い開発ドキュメントの作り方

多くの職場で、Wordは未だに本領を発揮していない。
文書の作り方を「文字と書式」の考え方から、「段落とスタイル」にシフトすることで、非常にメンテナンス性の高いドキュメントを作ることができる。
最初にこのことを教えてくれたのがこの本だった。


さて、Webの方はカーソルを合わせると以下のように商品画像がポップアップして良い感じに。
f:id:t-hom:20150729065059p:plain

ところがamazonからはき出されるリンクをそのまま張ると、表示上は問題なくてもHTML Validatorで色々とエラーが出る。

<a href="http://www.amazon.co.jp/gp/product/4774146609/ref=as_li_tf_tl?
ie=UTF8&camp=247&creative=1211&creativeASIN=4774146609&linkCode=as2&tag=thomjp0d-22">
根本から理解する Wordの「スタイル」活用読本 [Word2010/2007/2003/2002対応] (Wordで作ったWordの本)</a>
<img src="http://ir-jp.amazon-adsystem.com/e/ir?
t=thomjp0d-22&l=as2&o=9&a=4774146609"
 width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

※Validatorについてはこちらの過去記事で紹介
thom.hateblo.jp

どうも、アンパサンド記号(&)が良くないらしい。
Validatorの指示に従って&を&amp;に書き換える。
さらにborder="0"はhtml5でサポートされていないとのことで削除。
※そもそもこのimgタグは消しても動作するので何のためなのか不明であるが、お小遣いのもらい忘れが怖いので一応つけたままにしておく。

よし、できた!

<a href="http://www.amazon.co.jp/gp/product/4774146609/ref=as_li_tf_tl?
ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4774146609&amp;linkCode=as2&amp;tag=thomjp0d-22">
根本から理解する Wordの「スタイル」活用読本 [Word2010/2007/2003/2002対応] (Wordで作ったWordの本)</a>
<img src="http://ir-jp.amazon-adsystem.com/e/ir?
t=thomjp0d-22&amp;l=as2&amp;o=9&amp;a=4774146609"
 width="1" height="1" alt="" style="border:none !important; margin:0px !important;" />

と思ったらまだエラーがあった。
今度は編集した箇所と違って、もともとあったimgタグで、width="90%"としていたのが原因。

<img src="img/wd_design.gif" alt="デザイン変更のデモ動画" width="90%" />

HTML5から%表示は使えなくなったらしい。

【参考】
http://blog.guroppa.com/html/html_percent_width_height.html
見落としていた。

そこで、個別のスタイルタグで対応することにした。

<img src="img/wd_design.gif" alt="デザイン変更のデモ動画" style="width:90%;" />

これでようやく完成となった。

当ブログは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、 Amazonアソシエイト・プログラムの参加者です。