スポンサーサイト

--/--/-- --:-- | カテゴリ:スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

アフィリエイト商品配置⑤ divタグとスタイルシート

2006/03/31 21:16 | カテゴリ:未分類 | コメント (0) | トラックバック (0)

アフィリエイトの商品配置、文字の回り込みはこれが最後。
最後はdivタグを活用して、文字を回り込ませる方法です。 スタイルシートのfloatはdivタグにも利用できます。
この方法なら、imgタグの改変や、一部利用が容易になります。

広告コードをdivタグで囲んでfloat属性を与えてやればいい。これだけです。


 <div style="float:left;">
  広告コード
 </div>
  紹介文
 <br clear="all">

こう記述することで、広告コードの改変をせず、指定のものだけ回り込みを利用することができます。

紹介文の表示幅などは全体にdivタグを加えてstyleにwidthを加えてやるといいでしょう。
画像と紹介文の間に間隔を空けたい場合は、marginやpaddingを指定すればOK!

クラス名を付けて、スタイルシートで指定しておけば、さらに便利になりますね。

float:rightと指定すれば、左:紹介文、右:画像 ということもできます。


 <div style="width:200px;">
 <div style="float:right; margin-left:10px;">

  広告コード
 </div>
  紹介文
 </div>
 <br clear="all">


幅や高さの指定は、tableタグに分があると思いますが、tableタグよりSEOやユーザービリティ的によい回り込みは、ぜひ利用したいところです。
スポンサーサイト

<< CROSS-A | ホーム | アフィリエイト商品配置④ スタイルシート活用 >>


コメント

コメントの投稿


管理者にだけ表示を許可する

 BLOG TOP 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。