リンクシェアの商品リンクを横に並べたい - はじめての質問 -
ブログを開設して、
はじめて質問をいただきました。
あなたも同じような問題にぶつかっているのなら参考になると思いますので
シェアしますね。
「どうしても縦に並んでしまいます。」
Tさんからのご質問
■メルマガやブログ、HPへの引用可否（フリー02）： 引用可（名前→イニシャル）
■お問い合わせ内容（フリー03）
以下のタグなのですけど、どうしても縦に並んでしまいます。
"float;left">を"float;center"と"float;right"に
するのか・・・と思いやってみたのですが、だめです。
<ul style="list-style;none;padding;0;">
<li style="float;left">
<a href= で始まるリンクコード
</li>
<li style="float;left">
<a href= で始まるリンクコード
</li>
<li style="float;left">
<a href= で始まるリンクコード
</li>
</ul>
横に並べるにはどうしたらよいのでしょうか？
（１）サイト作成ツール：シリウス
（２）リンクコード：リンクシェア
「リンクシェアのコードは、楽天とはタイプが違うので
すんなりとはいかないですね。」
【マナガツオの回答】
Ｔさん
こんにちは、マナガツオです。
お問い合わせいただき、ありがとうございます。
商品リンクは、リンクシェアなのですね。
私は、リンクシェアの商品リンクは、これまで貼ったことがないので
いろいろ調べてみました。
以下のコードで横に並びます。
シリウスに貼り付けてプレビューしてみてください。
<div style="float:left; margin: 30px;">
<a href= で始まるリンクコード
</div>
<div style="float:left; margin: 30px;">
<a href= で始まるリンクコード
</div>
<div style="float:left; margin: 30px;">
<a href= で始まるリンクコード
</div>
いただいた３つのリンクコードは、最初、画像が表示されませんでした。
タグを見ましたところ、</a> の周辺が一部、記号が欠けていましたので、そこは修正しております。
リンクシェアのリンクコードは、私が記事でご紹介した「楽天」のリンクコードとは構文タイプが
違うので、私が紹介した内容は当てはまりませんね。
styleの属性を利用した以下のタグを入れてあげることで、横に並べることができるとわかりました。
<div style="float:left; margin: 30px;"> 〜 </div>
margin: 30px の数字を変えるとリンク間の間隔が調節できます。
今回、私自身も勉強になりました。
お問い合わせいただき、ありがとうございました。
今後ともよろしくお願いいたします。
マナガツオ
Tさんは、こちらの記事でご紹介した内容を試されたようです。
↓ ↓ ↓
しかし、商品リンクは横に並びませんでした。
その理由は、楽天のリンクとリンクシェアのリンクは、タイプが違うから。
リンクシェアは、楽天グループの子会社ですが、
商品リンクのタイプは楽天と同じではないんですね。
その商品リンクの書きだし部分が違うため、
私がご紹介した横に並べるHTMLタグをそのまま適用してもダメだったわけです。
私は、リンクシェアのリンクは、まだ貼ったことがないので
最初わからず、いろいろ調べて今回の回答に行き着きました。
いやあ〜、勉強になりましたねぇ。
今回、Tさんに回答した内容は、前日まで知らなかったことですから。
このあと、Tさんから Thanksメールをいただきましたが、
「お気に入りに入れてブログちょくちょく見ます。」なんていう文面みたら
もうメッチャ嬉しかったですよ。
そろそろメルマガも始めようかな、と思っていますが、
これから読者の方とたくさんやりとりしたいです。
ホント小さなことでも何でもかまいませんので、お問い合わせフォームに書き込んでください。
通勤時間（往復）５時間の人だから・・・
疲れてるだろうから・・・
そんなこと思わなくていいですからね。（笑）
ではまた。
