楽天商品の画像リンクを好きなように間隔空けて並べる方法

 

私が、はじめて持ったホームページは、
東京スカイツリー専門グッズのネットショップですが

 

ある有名なアフィリエイターさんからダメ出しを食らった後は、
シリウスを使って作りなおしました。 ⇒ コチラ

 

 

もし、まだホームページを持っていない方で
ネットショップを作ってみたいという方は、
ただ、サイト棚に商品を並べるだけではなく、キレイに魅せる裏ワザなど
これからお伝えしていきますので参考にしていただけたらと思います。
( シリウスのマニュアルにはもちろん載ってませんからね。 ^^ )

 

 

まず、

 

サイトのテンプレートは、 カラムをオススメします。

 

なぜなら、記事を書くエリアが3カラムに比べると広いので、
ちょっと横幅のある画像を掲載したいときもハミ出ず載せることができるからです。

 

また、右にも左にもいろいろな情報がある、というスタイルではないので、
記事を読んでいただくことに集中していただけるということもメリットとして挙げられます。

 

 

ここでご扱う商品は、楽天に出品されているものです。
楽天の商品の数は膨大です。
あなたが探している商品はきっとあると思います。

 

 

では、棚に並べてみましょうか。

 

 

楽天サイトで商品リンクを生成したら、
コピーして、ただ、シリウスの記事入力エリアにペーストすると

 

複数 載せた場合は、その商品画像がタテに並んでしまいます。

 

商品画像は、左に寄せられて表示されるので、
これじゃ、右横の空いたスペースがもったいない! 見栄えも悪いし。

 

 

そのようなときは、横に並べる コチラのHTMLタグを使っちゃいましょう。

 

 

 

<ul style="list-style:none;padding:0;">
<li style="float:left">

</li>
<li style="float:left">

</li>
<li style="float:left">

</li>
</ul>

 

 

 

青い帯の箇所 に商品リンクを挿入してくださいね。  これは3つ商品を並べる例です。

 

最上部のタグ <ul style="list-style:none;padding:0;"> と
最下部のタグ </ul> は、固定です。
横に並べる1つの枠の囲いだと思ってください。

 

 

 

そうすると、このように表示されます。

 

でも、ちょっと左に寄ってしまっているので、間隔空けて、中央に持ってきたいと思いませんか?

 

 

 

 

そのためには,,

 

商品リンクのタグをちょっといじります。 赤枠の箇所です。

 

margin:0px

 

0px ⇒ 10px, 20px ・・・ と数字を変更することで隣の画像との間隔を空けることができます。

 

                      数字が大きくなると、間隔は広がります。

 

 

 

 

こちらの間隔は、20px のサンプルです。

 

 

 

 

この枠の中に、さらに商品を入れたい場合は、

 

<li style="float:left">

</li>

 

を追加します。

 

 

でも、4つ並べるには、画像のサイズを小さくする必要があります。
これは、楽天アフィリエイトのリンク生成ページにて変更可能です。

 

 

そして、横並び枠の2段目を作りたい場合は、
同じ構成のタグひとかたまりをその下に追加入力すればOKです。

 

 

 

このように、好きなように画像リンク間の間隔を調節することができちゃいます。

 

 

ぜひ、試してみてください。

 

 

 

あ、そうそう・・・

 

ひとつ注意点があります。

 

 

画像と一緒に記載されているテキストは変更してはいけません。

 

サイトに画像と一緒にテキストが表示されたとき、
中途半端な切れ方をしてしまっているのを見ると
ついつい枠内に収まるようにリンク・タグから直したくなってしまいます。

 

しかし、修正すると、楽天アフィリエイトの規約に引っかかるので
売れても実績にならない可能性があります。

 

 

サイトに掲載する楽天の商品リンクのタイプは、あります。

 

・ 画像とテキスト
・ 画像のみ
・ テキストのみ
・ メール
・ QRコード

 

この中で、テキストを変更できるのは、テキストのみのリンクです。

 

 

気をつけてくださいね。

 

 



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

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

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