今回改定したのは以下のページ
Wordの真価 - You.Activate
もともと単にオススメ商品としてamazonへの商品リンクを張っていたけど、折角紹介しているので売れたらバックマージンが入る形にしようとアフィリエイトリンクに変更した。
これは本当にオススメの商品である。
根本から理解する Wordの「スタイル」活用読本 [Word2010/2007/2003/2002対応] (Wordで作ったWordの本)
- 作者: 西上原裕明
- 出版社/メーカー: 技術評論社
- 発売日: 2011/05/10
- メディア: 単行本(ソフトカバー)
- 購入: 1人 クリック: 3回
- この商品を含むブログを見る
Word2003の頃ならこちらがイチオシだった。
エンジニアのためのWord再入門講座 美しくメンテナンス性の高い開発ドキュメントの作り方
- 作者: 佐藤竜一
- 出版社/メーカー: 翔泳社
- 発売日: 2008/05/22
- メディア: 単行本
- 購入: 53人 クリック: 1,752回
- この商品を含むブログ (97件) を見る
多くの職場で、Wordは未だに本領を発揮していない。
文書の作り方を「文字と書式」の考え方から、「段落とスタイル」にシフトすることで、非常にメンテナンス性の高いドキュメントを作ることができる。
最初にこのことを教えてくれたのがこの本だった。
さて、Webの方はカーソルを合わせると以下のように商品画像がポップアップして良い感じに。
ところが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&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" 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%;" />
これでようやく完成となった。