Amazonアソシエイトで商品の横に文字を表示する方法【アフィリエイト】


アマゾン広告横に文字列を持ってきます。「アマゾンの」というよりかはCSS回り込みを利用しているだけです。このサンプルでは対象(アマゾン広告)を<div>で囲み、左に回り込みさせています。本来ならCSSで指定した方が良いのですがstyle属性を使っています。CSSって何?と思った方は調べてみると良いかもしれません。このサイトでも説明していますよ。こちらでCSSを解説しています


上のサンプルではstyle属性floatのみを使っているので少し、見栄えが悪いですね。他には横幅の指定や、余白の指定を設定しておくと良くなります。


サンプルでは割と小さな画像を使っているのですぐに回り込みが終わって、画像の下に続きの文字が来ていますが、商品画像が大きかったり、記述する文字が少なかったりすると「回り込みの解除」を行わなくてはいけません。

回り込みのみを指定する場合の例

<div style="float:left;">
ここに広告ソース
</div>

回り込みする場合はleftright


回り込みを解除例

<div style="float:left;">
ここに広告ソース
</div>
<div style="clear:both;">
このボックスから解除される
</div>
回り込みする場合はleftright



この例では、floatを使った回り込みだけでなく横幅・高さ・外余白・位置の指定を行なっています。背景色を付けているのは分かりやすくするためです。


style属性のプロパティを増やせばより細かく設定できます。例えば上の例では<div style="float:left;width:160px;height:100px;background-color:#000;margin:10px;text-align:center">

ここではstyle属性で簡単に説明していますが、もし沢山の商品を同じように設定するのであれば、この記述をいちいち記述することになり、めんどくさいですよね。そんな時はCSSファイルとclass属性を使えば楽ですよ!

CSS・CSS外部ファイルについてはこちら
class属性についてはこちら


アマゾンなどの商品画像の横に文字を表示する方法としてfloatを使う意外にテーブルを使うという方法もあります。但しテーブルでレイアウトを組むのはあまりおすすめ出来ません。

テーブルについてはこちら






カテゴリ | Amazon アフィリエイト | このブログの読者になる | 更新情報をチェックする

About Site(サイト案内) 概要

アクセスアップ方法・アクセスアップツールを中心に紹介しています。出来るだけ易しいサイト作りを目指したいと思います。まだまだコンテンツが少ないですが確実なアクセスアップ方法を紹介しますのでどうぞ宜しくお願いします。アクセスアップ記事以外にもWeb製作のことやiPhoneのこと。ニュースなども取り上げていきます。


◆リンク
http://secretaccess.seesaa.net/
タイトルは『Digital Life -デジタルライフ-
(テキストリンクのみです)
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。