楽天商品リンクの横に文章を入れる方法
楽天商品のアフィリエイト・リンクをブログやサイトに貼ったとき
リンクの横にコメントを入力したいと思ったことないでしょうか？
商品リンクをそのままコピーして貼り付けると
そのリンクが、貼った場所の横幅を１００％独占してしまうので
コメントを入れるには、その下に書くことになります。
それは、誰でもやっていること。
他の誰もがやっていないことをやってみたいと思いませんか？
そうです。
商品リンクの右横に文章を載せるんです。
商品の説明書きやコメントなど、
きっとそのほうが訪問者の目には見やすいと映るはずです。
人間の目は、基本、文章を見たとき、左から右に流れますから。
ご紹介しますね。
楽天商品リンクを１つブログやサイトに貼った場合は、こちら ↓ のような表示になるので、
まず、外側の枠は取りたいですよね。
 おみやげのコアラとは一味違うコアラのぬいぐるみ お得なコアラセット(Aタイプ) (S8305set) ... |
その外枠を取る方法は、こちら でご紹介しているので見てみてください。
はい、外枠が取れました。
その後は、そのHTMLタグの下に文章を書いていくだけです。
おみやげのコアラとは一味違うコアラのぬいぐるみ お得なコアラセット(Aタイプ) (S8305set) ...
価格：5,940円（税込、送料別）
祝 コアラ来日、３０周年！
１９８４年１０月２５日、
オーストラリアのタロンガ動物園から
コアラが日本にやってきて今年で３０年です。
名古屋市の東山動物園では、
記念式典が行なわれました。
いつ見てもあどけない表情でかわいいですね。
商品リンクとコメントとの間にスペースが空いてますが、
これは、文章を書くときに頭にスペースを入れればいいだけです。
ただし、
スペースは全角にしてくださいね。
HTMLの世界では、半角スペースは効きませんので。
あっ、それともうひとつ。
ブログやホームページで商品を紹介するとき、
使用するリンクは、やっぱり、画像リンクを使うと視覚に訴えることができますからいいですよね。
その画像リンクですが、
上記のような画像＋テキストタイプのリンクと
もうひとつ、画像のみのタイプがあります。
画像の下に書かれているテキストは、
見てのとおり、ほとんどの商品、表示が中途半端で終わっているので、直したい！
と思いますよね。
でも、それって出来ないんですよ。
楽天の規約に引っかかってしまうので、やってはいけないことなんですね。
なので、
そんな中途半端なテキスト載せたくない！という場合は、
リンクは画像のみにして、その横に自分で好きなようにテキストを打ち込んだらどうでしょう。
その場合は、こうするとできます。
画像のみのHTMLタグは、画像＋テキストのタグとは、少し中身が違うので
ちょっとだけ手を加えます。
こちら ↓ が、画像のみのリンクタグですが、
最後の場所に青く塗りつぶしたタグを挿入してください。
<a href="http://hb.afl.rakuten.co.jp/hgc/13483715.69a2a27e.13483716.c347d395/?
pc=http%3a%2f%2fitem.rakuten.co.jp%2fnuigurumi-
途中省略
pm%2fcabinet%2f02282251%2f03200359%2fimg66036019.jpg%3f_ex%3d80x80" border="0"
align="left"></a>
これで、画像右横のエリアに文章を入力することが可能となります。
あとは、スペースを入れて見栄えを考えながら文章を打ち込んでいってください。
祝 コアラ来日、３０周年！
１９８４年１０月２５日、
オーストラリアのタロンガ動物園から
コアラが日本にやってきて今年で３０年です。
こちらは、おみやげのコアラとは一味違うコアラのぬいぐるみ
お得なコアラ親子セットです。
どうでしょう。
見た目がいいですよね。
ここでは、画像リンクの右横にテキストを入れる方法をご紹介しましたが、
もちろん、その逆、
画像リンクを右に寄せて、左側のエリアにテキストを入れることもできます。
その場合、
画像＋テキストのリンクでは、HTMLタグ一行目にある float:left を float:right に
画像のみのリンクでは、挿入する align="left" を align="right" にすればOKです。
でも、
訪問者にクリックしていただく画像リンクは、左寄り に貼ったほうが効果的です。
ぜひ、お試しください。
楽天画像リンクの外枠をとる方法は、こちら
↓ ↓ ↓
