Amazon商品の画像リンクを横に並べる方法

Amazon商品の画像リンクを横に並べる方法

 

私は、週末になると、母を連れてクルマで
ランチをとりながら買い物に出かけるのですが、
小田原の先にある大井町方面によく行ったりします。

 

大きなスーパーマーケットが結構あり、食事処も和洋中いろいろなお店があるからです。

 

親父が、高齢のためクルマの運転をやめてから
ウチは買い物難民っぽくなってしまったので(笑)、週末は私がフル回転しないといけません。

 

その大井町に向かう途中、小田原の酒匂川にかかる飯泉橋という橋を渡るんですが、
その酒匂川沿いに、昨年(2013年)、バカでかい建物ができたんですよ。

 

   こちらです
    ↓↓↓

 

  

 

 

この建物、なんだかわかります?

 

Amazon の物流センターなんです。

 

正式名称は、「アマゾン小田原フルフィルメントセンター」 と言うそうですね。

 

延べ床面積は、約6万坪(約20万平米)で
アマゾンが全国に持つ物流センターの中では最大規模だそうです。

 

Amazon.co.jp に注文が入ると、ここがキーステーションとなって、
全国に向けた迅速な配送サービスが展開されるんですね。

 

従業員はどのくらいいるんでしょうねぇ。

 

 

 

あっ、すいません。
前置きがちょっと長くなってしまいましたが、

 

 

今回、ご紹介するのは、
その Amazon の商品画像リンクを横に並べる方法についてです。

 

楽天の商品では、こちら でお伝えしていましたが、Amazon についてはまだでしたね。

 

 

Amazon から取得した商品画像リンクを2つ3つ
そのまま記事入力エリアに貼り付けると、タテに並んでしまいます。

 

これをヨコに並べるためには、
以下のようなstyleの属性を利用したHTMLタグを付け加えます。

 

楽天リンクでご紹介したタグとは異なります。

 

青い塗りつぶしバー が、Amazon の商品リンクと思ってください。

 

 

 

   <div style="float:left; margin: 10px;">
   
   </div>
   <div style="float:left; margin: 10px;">
   
   </div>
   <div style="float:left; margin: 10px;">
   
   </div>

 

 

 

margin: 10px の数字を変えるとリンク間の間隔が調節できます。

 

 

こちら ↓ の例は、margin: 30px です。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Amazon の画像のリンクというと

 

 ● テキストとイメージ
 ● 画像のみ

 

この2タイプがありますが、
どちらの商品リンクでも、上記のHTMLタグが適用できます。

 

 

 

ぜひ、このような美しいレイアウトで
他のサイトとの差別化を図ってください。

 

 

 

貼り付けたAmazon 画像リンクの横に解説文を入れたいときは
こうすれば出来ますよ。

 

             ↓ ↓ ↓

 

Amazon商品リンクの横にテキストを書く方法

 



*-----------------------------------------------------------------------------------*

   最後までお読みいただき、ありがとうございます。
   記事が少しでも参考になれば幸いです。

                  ブログランキング・にほんブログ村へ    

関連ページ

ページの空白エリアの配置には工夫を!
ブログでもホームページでも訪問者がページを開けたとき、その最初のページの文字と画像の配置が 見やすい状態になっているか。これは、すごく大事なこと。なぜなら、見にくい!と感じたら、閲覧者は、すぐ立ち去ってしまうから。 じゃ、どうすればいい? こうしましょう。
Amazon商品リンクの横にテキストを書く方法
ブログやHPでオススメ商品を紹介するとき、商品画像のリンクを載せると視覚に訴えることができますから非常に効果的です。また、同時に商品に関するコメントを添えると、その商品が引き立ちます。でも商品画像の下ではなく横に載せたいと思ったことありませんか?それはこうすれば出来るんです。詳細はコチラ。

 
トップページ プロフィール 目次 オススメ 商品 メルマガ SNS お問い合わせ