リンクシェアの商品リンクを横に並べたい - はじめての質問 -

リンクシェアの商品リンクを横に並べたい - はじめての質問 -

 

ブログを開設して、
はじめて質問をいただきました。

 

あなたも同じような問題にぶつかっているのなら参考になると思いますので
シェアしますね。

 

 

          「どうしても縦に並んでしまいます。」

 

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>

 

 

横に並べるにはどうしたらよいのでしょうか?

 

(1)サイト作成ツール:シリウス
(2)リンクコード:リンクシェア

 

 

 

   「リンクシェアのコードは、楽天とはタイプが違うので
   すんなりとはいかないですね。」

 

 

【マナガツオの回答】

 

Tさん

 

こんにちは、マナガツオです。

 

お問い合わせいただき、ありがとうございます。

 

商品リンクは、リンクシェアなのですね。
私は、リンクシェアの商品リンクは、これまで貼ったことがないので
いろいろ調べてみました。

 

 

以下のコードで横に並びます。
シリウスに貼り付けてプレビューしてみてください。

 

 

 

<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>

 

 

 

いただいた3つのリンクコードは、最初、画像が表示されませんでした。
タグを見ましたところ、</a> の周辺が一部、記号が欠けていましたので、そこは修正しております。

 

 

リンクシェアのリンクコードは、私が記事でご紹介した「楽天」のリンクコードとは構文タイプが
違うので、私が紹介した内容は当てはまりませんね。

 

 

styleの属性を利用した以下のタグを入れてあげることで、横に並べることができるとわかりました。

 

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

 

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

 

 

今回、私自身も勉強になりました。

 

お問い合わせいただき、ありがとうございました。

 

今後ともよろしくお願いいたします。

 

 

マナガツオ

 

 

Tさんは、こちらの記事でご紹介した内容を試されたようです。

 

               ↓ ↓ ↓

 

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

 

 

しかし、商品リンクは横に並びませんでした。

 

その理由は、楽天のリンクとリンクシェアのリンクは、タイプが違うから。

 

リンクシェアは、楽天グループの子会社ですが、
商品リンクのタイプは楽天と同じではないんですね。

 

その商品リンクの書きだし部分が違うため、
私がご紹介した横に並べるHTMLタグをそのまま適用してもダメだったわけです。

 

 

私は、リンクシェアのリンクは、まだ貼ったことがないので
最初わからず、いろいろ調べて今回の回答に行き着きました。

 

いやあ〜、勉強になりましたねぇ。
今回、Tさんに回答した内容は、前日まで知らなかったことですから。

 

 

このあと、Tさんから Thanksメールをいただきましたが、
「お気に入りに入れてブログちょくちょく見ます。」なんていう文面みたら
もうメッチャ嬉しかったですよ。

 

 

そろそろメルマガも始めようかな、と思っていますが、
これから読者の方とたくさんやりとりしたいです。

 

ホント小さなことでも何でもかまいませんので、お問い合わせフォームに書き込んでください。

 

 

通勤時間(往復)5時間の人だから・・・
疲れてるだろうから・・・

 

そんなこと思わなくていいですからね。(笑)

 

 

ではまた。

 



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

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

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

関連ページ

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

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