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

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

 

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

 

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

 

 

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

 

 

まず、

 

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

 

なぜなら、記事を書くエリアが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コード

 

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

 

 

気をつけてくださいね。

 

 



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

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

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

関連ページ

リンクシェアの商品リンクを横に並べたい - はじめての質問 -
読者の方から質問を受けました。リンクシェアの商品リンクを3つ横に並べたいが、どうしても縦に並んでしまう。どうすればいいか?と。 楽天グループでも楽天のリンクコードとはタイプが違うので答え見つけるまでいろいろ調べました。そして、見つけたぁー!
楽天商品リンクを中央に配置する方法
シリウスに書いた記事の中に載せた楽天の商品リンク1つをドーーーン!と中央に置く方法について、お伝えします。楽天の商品リンクの中で「画像+テキスト」タイプは、シリウスの中央揃えボタンは効きません。 しかし、こうすることで左端から動かない画像テキスト・リンクがど真ん中に来てくれます。
楽天商品リンクの横に文章を入れる方法
楽天の商品リンクをブログやサイトに貼ったとき、リンクの横にコメントを入力したいと思ったことないですか?商品リンクをそのまま貼ると横幅が100%独占されてしまうので、何も入力できませんが、この方法を使うと横に入れることができちゃいます。人がやっていないことをやってみよいうではありませんか。
楽天商品リンクの外側の枠とりたい
楽天の商品リンクを1つブログに貼ったけど、なんで、横幅いっぱいに外側の枠が表示されちゃうんだろう・・・・この外枠、取りたいなあ。 そう思ったことはないでしょうか?これだと、見た目がよくないですし、外枠を表示させている意味もわからないですよね。取る方法お伝えします。
楽天市場チャット 利用すべし
先日、ある商品を楽天から検索していました。プレミアム・カルピス って知ってます?カルピス・ウォーターでもなく、ソーダでもなく、オアシスでもなく フルーツ・カルピスでもない・・・・。カルピス・ウォーターをめ〜っちゃ濃い味に仕上げたカルピスなんです。 今すぐ詳細をご覧ください。

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