はてなで表示するのに都合の良いタグに変えてみる話

後から見たらいきなり話が飛んでるので、ここまでの流れ

 Amazonのアソシエイトのをはてなの表示に都合よくなるように変えてみる話。iframeだと見た目が崩れるので崩れないタグに変えてみようかなぁとか。iframeの中身のタグを参考に。

 まず、Amazonの奴は多分プライバシー消すと問題がありそうに思うので、これは残すことに。該当部分はこんな感じだった。

  <p id="privacy">
	<a href="http://rcm-jp.amazon.co.jp/e/cm/privacy-policy.html?o=9" target="_blank">
	  プライバシーについて
	</a>
  </p>

 これはAmazonのアソシエイトタグを作るページでもプライバシーについての色が背景色と同化しそうになると、注意が出たりするので多分表示させておいた方が安心だろうと勝手に思ったりしてみた。
 次はやっぱり本とかのイメージは欲しいのでその辺のタグ

<a href="http://www.amazon.co.jp/dp/4873111811?tag=hdn-22&amp;camp=243&amp;creative=1615&amp;linkCode=as1&amp;creativeASIN=4873111811&amp;adid=11M1VVJTTS1KWNQS3BD8&amp;" target="_blank">
	  <img src="http://rcm-images.amazon.com/images/I/41QR8EN2DBL._SL100_.jpg">
</a>

 後は価格とか、原作者とかも出したいといえば出したいけど、正直面倒そうなので、後回し(何で面倒なのかは後で書く予定)。ということで、とりあえず適当に合体させて、こんな感じのタグが作れれば良いだろうと。

<div style="float:left">
<a href="http://www.amazon.co.jp/dp/4873111811?tag=hdn-22&amp;camp=243&amp;creative=1615&amp;linkCode=as1&amp;creativeASIN=4873111811&amp;adid=11M1VVJTTS1KWNQS3BD8&amp;" target="_blank"><img src="http://rcm-images.amazon.com/images/I/41QR8EN2DBL._SL100_.jpg"></a>
<p id="privacy">
  <a href="http://rcm-jp.amazon.co.jp/e/cm/privacy-policy.html?o=9" tanrget="_blank">プライバシーについて</a>
</p>
</div>

回り込みも適当タグでやってしまって。で、これをハテナで使うとこんな感じに


プライバシーについて


なんか、ちょっとバランスが悪いけど、その辺はスタイルシートで適当に修正すれば良いかなぁとか。"プライバシーについて"の所は元々のAmazonがつけたid="privacy"がついてるので、それを適当にハテナの方で修正すればよさそう。

■回り込み具合のテスト(といっても、画像なのでCSSで何とでもなるけど。)

前の文字列:テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト


プライバシーについて

後ろの文字列:テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト




■冷静に考えてみたらタグ作らなくても適当に回り込ませればよかったんじゃ・・・
 ということに気づいたので、iframeのも回り込ませてみた。再度、回り込み具合のテスト

前の文字列 :テスト・・・テスト<div style="float:left"><iframe></div>後ろの文字列 :テスト・・・テスト

こんな風にして張り付けたらこうなった。

前の文字列 :テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

後ろの文字列 :テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト



なんか微妙。っていうか、どうなってんだこれは。('A`)・・・。

後、引用の奴で(”>>”こんなの)で囲むとやっぱり画像がはみ出る

見た目を作るのは難しいのでなんか投げ出しそうな予感。こういうのはAmazonっていうより、HTMLとかCSSの段階で躓いてるだけとも言うけど。