楽天商品リンクを中央に配置する方法
シリウスに書いた記事の中に載せた
楽天の商品リンク１つを
ドーーーン！と中央に置く方法について、お伝えします。
楽天の商品リンク
ブログに載せるタイプというと、次の４つがあります。
◆ 画像のみ
◆ テキストのみ
◆ QRコード
◆ 画像＋テキスト
ひとつずつ、ご紹介していきますね。
◆ 画像のみ
この場合は、リンクコードを全てマークして、こちらの中央揃えアイコンを押すだけです。
◆ テキストのみ
このケースも画像のみと同じです。
リンクコードを全てマークして、中央揃えアイコンを押します。
◆ QRコード
こちらは、画像として、一旦、PCに保存して、シリウスに持ってきます。
その画像をシリウスに持ってくるときは、以下の２通りの方法があります。
・ ドラッグ＆ドロップで、直接、記事入力エリアにコピーする。
・ 画像をこちら ↓ シリウスの画像格納ディレクトリーにコピーして、
記事入力エリアから呼び出す。
【画像格納ディレクトリー】 【画像呼び出しボタン】
ACES WEB
SIRIUS
data
対象サイトのファイル名
img
「そんなこと、シリウス・ユーザーなら誰でも知っとるわい！」
そうですよね。
でも、この商品リンク ↓ が一番使われているのではないか、と思いますが、
◆ 画像＋テキスト
この場合は、ちょっとした小技が必要になります。
リンクもゴチャゴチャした文字が一番多いですし、
シリウスの中央揃えのアイコンを押しても 言うこと聞かないんですよ。（笑）
こちらの例でお伝えしますね。
＜在庫限り＞楽天ランキング入賞！衛生医療品・マスクジャンルで1位獲得(2014/07/07付)立体三層...
価格：1,400円（税込、送料込）
<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:left を margin:auto に変更してください。
float:left このタグが出しゃばっているので、中央揃えのアイコンを押しても効かないんですよ。
これを中央に要素を配置できるタグ margin:auto に変えることで、
左から動かなかったリンクが、ど真ん中に来てくれます。
記事の文章との位置関係が見栄えいいように
画像の入った商品リンクは、真ん中に置きたい時があるかと思います。
そんなときは、この方法を試してみてくださいね。
楽天リンクを２つ３つ横に並べたいときは、こちらを。
↓ ↓ ↓
