楽天商品リンクを中央に配置する方法

 

シリウスに書いた記事の中に載せた

 

楽天の商品リンクつを

 

ドーーーン中央に置く方法について、お伝えします。

 

 

 

楽天の商品リンク

 

ブログに載せるタイプというと、次の4つがあります。

 

 

◆ 画像のみ

 

◆ テキストのみ

 

◆ QRコード

 

◆ 画像+テキスト

 

 

 

ひとつずつ、ご紹介していきますね。

 

 

◆ 画像のみ

 

  この場合は、リンクコードを全てマークして、こちらの中央揃えアイコンを押すだけです。

 

  

 

 

◆ テキストのみ

 

  このケースも画像のみと同じです。

 

  リンクコードを全てマークして、中央揃えアイコンを押します。

 

 

◆ QRコード

 

  こちらは、画像として、一旦、PCに保存して、シリウスに持ってきます。

 

  その画像をシリウスに持ってくるときは、以下の2通りの方法があります

 

 

  ・ ドラッグ&ドロップで、直接、記事入力エリアにコピーする。

 

  ・ 画像をこちら ↓ シリウスの画像格納ディレクトリーにコピーして、
    記事入力エリアから呼び出す。

 

 

   【画像格納ディレクトリー】           【画像呼び出しボタン】      

 

     ACES WEB
       SIRIUS
         data
          対象サイトのファイル名
            img

 

 

 

「そんなこと、シリウス・ユーザーなら誰でも知っとるわい

 

 

そうですよね。

 

 

でも、この商品リンク が一番使われているのではないか、と思いますが、

 

 

◆ 画像+テキスト

 

 

  この場合は、ちょっとした小技が必要になります。

 

  リンクもゴチャゴチャした文字が一番多いですし、

 

  シリウスの中央揃えのアイコンを押しても 言うこと聞かないんですよ。(笑)

 

  こちらの例でお伝えしますね。

 

 

 

<table border="0" cellpadding="0" cellspacing="0"><tr><td valign="top"><div style="border:1px solid;margin:0px;padding:6px 0px;width:160px;text-align:center;float:left"><a href="http://hb.afl.rakuten.co.jp/hgc/1374d4fe.8bfd779f.1374d4ff.a77d0f12/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fzakkanetonline-trans%2ftr-003-%2f%3fscid%3daf_link_tbl&m=http%3a%2f%2fm.rakuten.co.jp%2fzakkanetonline-trans%2fi%2f10012295%2f" target="_blank"><img src="http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fzakkanetonline-trans%2fcabinet%2fzkn%2ftr-003-5_11.jpg%3f_ex%3d128x128&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%
2fzakkanetonline-trans%2fcabinet%2fzkn%2ftr-003-5_11.jpg%3f_ex%3d80x80" alt="<在庫限り>楽天ランキング入賞!衛生医療品・マスクジャンルで1位獲得(2014/07/07付)立体三層..." border="0" style="margin:0px;padding:0px"></a><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px"><a href="http://hb.afl.rakuten.co.jp/hgc/1374d4fe.8bfd779f.1374d4ff.a77d0f12/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fzakkanetonline-trans%2ftr-003-%2f%3fscid%3daf_link_tbl&m=http%3a%2f%2fm.rakuten.co.jp%2fzakkanetonline-trans%2fi%2f10012295%2f" target="_blank"><在庫限り>楽天ランキング入賞!衛生医療品・マスクジャンルで1位獲得(2014/07/07付)立体三層...</a><br><span style="">価格:1,400円(税込、送料込)</span><br></p></div></td></tr></table>

 

 

青い塗りつぶし箇所は、なくてもかまいません。

 

なければ、画像テキスト・リンクの外側に出る横幅目一杯の枠が消えます。
(上記のリンクは、その外枠を消しています。)

 

そして、

 

これを言わなきゃいけませんね。

 

この画像テキスト・リンクを中央に持ってくるには、

 

赤い塗りつぶしfloat:leftmargin:auto に変更してください。

 

 

float:left  このタグが出しゃばっているので、中央揃えのアイコンを押しても効かないんですよ。

 

これを中央に要素を配置できるタグ margin:auto に変えることで、
左から動かなかったリンクが、ど真ん中に来てくれます。  

 

 

記事の文章との位置関係が見栄えいいように
画像の入った商品リンクは、真ん中に置きたい時があるかと思います。

 

そんなときは、この方法を試してみてくださいね。

 

 

 

楽天リンクを2つ3つ横に並べたいときは、こちらを。 

 

           ↓ ↓ ↓

 

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

 



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

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

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