『Amazon インスタントストア』をブログの記事の中に表示させる方法について

【カテゴリ：パソコン　Tips等】

ブログの記事の中に『Amazon インスタントストア』の全体を以下のようにスクロールバー付きで表示させる方法です。



昨日（5月28日）の事ですが、以下の記事（※）にコメントが書かれており、内容としては
『アマゾンのインスタントストアを作ってブログに貼り付けたが、画像が切れているのでどうしたら良いか？』
というようなものでした。

※ 2012年04月16日　『Amazon』の『インスタントストア』を利用して作った『ネットショップ』

スポンサーリンク

通常、『Amazon インスタントストア』への『iframe(インラインフレーム)形式』のリンクを、そのままブログの記事に貼り付けた場合、以下のように右側が切れてしまって全体が表示されません。



これは、ブログの記事のエリアがインスタントストア全体の横幅よりも狭いためです。

そこでこの件について少し調べてみたのですが、その過程で、全体を表示させる一つの手段として、前記のようにスクロールバー付きで記事の中に表示させることができるのが分かりました。

実際にこのような表示方法を利用する機会があるか否かや、役に立つかは分かりませんが、せっかくなので、今回このやり方について書いておくことにしました。

具体的な方法ですが、冒頭の例では『iframe形式でインスタントストアをWebサイトに組み込む場合』として作成した『ストアへのリンク』を以下のように変更して表示しています。

オリジナルのリンク・コード
<iframe src="http://astore.amazon.co.jp/kingpcfx-05-22"
width="90%" height="4000" frameborder="0"
scrolling="no"></iframe>
↓
変更後のリンク・コード
<iframe src="http://astore.amazon.co.jp/kingpcfx-05-22"
width="100%" height="550" frameborder="0"
scrolling="auto"></iframe>


以下のように3箇所を変更しただけです。

width="100%"
height="550"
scrolling="auto"

以上です。

2012-06-01 追記：（メモ）前記 iframe タグ内で記述している属性の内容について

属性	値	説明
src	URL	表示するURL
width	数値／%	フレームの幅 (ピクセル数またはパーセント)
height	数値／%	フレームの高さ (ピクセル数またはパーセント)
frameborder	1 0	境界線を表示(初期値) 境界線を非表示
scrolling	yes no auto	スクロールバーを表示 表示しない 自動切換え(初期値)

スポンサーリンク