Amazonアソシエイトで商品の横に文字を表示する方法【アフィリエイト】アマゾンの広告の横に文字列を持ってきます。「アマゾンの」というよりかはCSSの回り込みを利用しているだけです。このサンプルでは対象(アマゾン広告)を<div>で囲み、左に回り込みさせています。本来ならCSSで指定した方が良いのですがstyle属性を使っています。CSSって何?と思った方は調べてみると良いかもしれません。このサイトでも説明していますよ。こちらでCSSを解説しています上のサンプルではstyle属性でfloatのみを使っているので少し、見栄えが悪いですね。他には横幅の指定や、余白の指定を設定しておくと良くなります。サンプルでは割と小さな画像を使っているのですぐに回り込みが終わって、画像の下に続きの文字が来ていますが、商品画像が大きかったり、記述する文字が少なかったりすると「回り込みの解除」を行わなくてはいけません。style="clear:both;">このボックスから解除される</div>※右に回り込みする場合はleftをrightにこの例では、floatを使った回り込みだけでなく横幅・高さ・外余白・位置の指定を行なっています。背景色を付けているのは分かりやすくするためです。style属性のプロパティを増やせばより細かく設定できます。style="float:left;width:160px;height:100px;background-color:#000;margin:10px;text-align:center">ここではstyle属性で簡単に説明していますが、もし沢山の商品を同じように設定するのであれば、この記述をいちいち記述することになり、めんどくさいですよね。そんな時はCSSファイルとclass属性を使えば楽ですよ!CSS・CSS外部ファイルについてはこちらclass属性についてはこちらアマゾンなどの商品画像の横に文字を表示する方法としてfloatを使う意外にテーブルを使うという方法もあります。テーブルでレイアウトを組むのはあまりおすすめ出来ません。概要アクセスアップ方法・アクセスアップツールを中心に紹介しています。出来るだけ易しいサイト作りを目指したいと思います。コンテンツが少ないですが確実なアクセスアップ方法を紹介しますのでどうぞ宜しくお願いします。アクセスアップ記事以外にもWeb製作のことやiPhoneのこと。ニュースなども取り上げていきます。reserved.×この広告は180日以上新しい記事の投稿がないブログに表示されております。