IMG_64551




ブログの記事中にAmazon・楽天のアフィリンクが

「ボタンみたいなアイコン」で貼ってあること


あるじゃないですか。



はてなブログなんかでよくみる、こういうやつ。↓



IMG_6456



「なんとかlivedoorブログでもできないかな?」

と思い、調べていろいろ試したところ、

現在このブログでは ↑ の画像(黒いクリップへのリンク)のように実現できました。



が!



CSSいじったり、他のサイト経由で設定をカスタマイズしたり、

ちょっと面倒だったので、

htmlタグだけで、近いことができるやり方を編み出しました。

(CSSがどーののやり方は次の記事で。)

このやり方だと、下の画像のようになります。↓


IMG_64551



ブログを始めたばかりの頃は、このやり方でやってました。



以下、コピペで使えるテンプレと、使い方です!

真似していいよ!




htmlタグテンプレです。


「Amazonへのリンクをボタンみたいに表示する」テンプレは、以下です。
(枠の幅は文字数に合わせて自動調整される)


<div  style="display:inline-block;background:#fc9a18;padding:10px;border-radius:10px;">
<b>
<span  style="color: rgb(255, 255,255);">
Amazon
</span>
</b>
</div>


このタグを「Amazonへのテキストリンク」の直前に貼ることで、

これ ↓





が、こう。 ↓ 



Amazon




↑クリックすると、ちゃんとAmazonに飛ぶよ!



楽天は、以下です。

<div  style="display:inline-block;background:#bf0000;padding:10px;border-radius:10px;">
<b>
<span  style="color: rgb(255, 255, 255);">
楽天
</span>
</b>
</div>


楽天


↑こうなる。



ええ、いかにも。

文字に直接色と枠をつけただけです!!!




貼る場所。

livedoorブログでは、記事編集画面に

「HTMLタグ編集」ってアイコンがあるので、

そこをクリックすると、HTMLタグを編集することができます。

54
こういう画面。



Amazonアソシエイトのテキストリンクは

以下のhtmlタグ(青文字)で記述されていますが、

今回のテンプレhtmlタグをペーストする場所は、

以下の「ココに貼り付け」と書かれた場所です。



<div  class="amazon Default">
<div  class="pictBox" align="left">
<a href="https://www.amazon.co.jp/%E3%81%84%E3%81%8D%E3%81%AA%E3%82%8A%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99-%E6%9C%80%E6%96%B0%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E4%BD%9C%E3%82%8A-HTML%E8%B6%85%E5%85%A5%E9%96%80-%E7%AC%AC3%E7%89%88-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%87%E3%82%B8%E3%82%AB%E3%83%AB/dp/4797382236?SubscriptionId=AKIAIM37F4M6SCT5W23Q&amp;amp;tag=AmazonアソシエイトのID&amp;amp;linkCode=xm2&amp;amp;camp=2025&amp;amp;creative=165953&amp;amp;creativeASIN=4797382236" target="_blank">

ココに貼り付け

いきなりできます! 最新ホームページ作り&amp;HTML超入門 第3版 [単行本]

</a>
</div>
<div  class="itemSubTxt">
<br />
</div>
</div>



テンプレを貼り付けたら、商品の名前を削除しましょう。



<div  class="amazon Default">
<div  class="pictBox" align="left">
<a href="https://www.amazon.co.jp/%E3%81%84%E3%81%8D%E3%81%AA%E3%82%8A%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99-%E6%9C%80%E6%96%B0%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E4%BD%9C%E3%82%8A-HTML%E8%B6%85%E5%85%A5%E9%96%80-%E7%AC%AC3%E7%89%88-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%87%E3%82%B8%E3%82%AB%E3%83%AB/dp/4797382236?SubscriptionId=AKIAIM37F4M6SCT5W23Q&amp;amp;tag=AmazonアソシエイトのID&amp;amp;linkCode=xm2&amp;amp;camp=2025&amp;amp;creative=165953&amp;amp;creativeASIN=4797382236" target="_blank">

<div  style="display:inline-block;background:#fc9a18;padding:10px;border-radius:10px;">
<b>
<span  style="color: rgb(255, 255,255);">
Amazon
</span>
</b>
</div>


いきなりできます! 最新ホームページ作り&amp;HTML超入門 第3版 [単行本]


灰色の部分を削除


</a>

</div>
<div  class="itemSubTxt">
<br />
</div>
</div>


やってることはシンプルで、

Amazonへの商品リンクになっている「商品名」の色と枠を

Amazonっぽい色と枠にして、

文字を「Amazon」に変えただけ。





応用編。

画像ありだと、こうなりますよね。↓








以下で紹介するやり方なら、仕上がりは ↓ のようになります!






多少見栄えがいいと思うので、

この表示の仕方の例を貼っておきます。

よかったら使ってください。


やり方は、


①ただの黒枠をつくるhtmlタグを貼る

②黒枠の中に「画像入りAmazonアソシエイトのリンク」を貼る

③Amazon、楽天でその商品のテキストリンクを貼り、ボタン風にするhtmlを貼る

④商品名を消す
 

という順番です。

以下、例です。

htmlタグを貼る順番だけ参考にして、

中身のリンクは自分で変えてね!


<div  style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">

<div  class="amazon Default">
<div  align="left" class="pictBox">
<a  target="_blank" href="https://www.amazon.co.jp/%E3%81%84%E3%81%8D%E3%81%AA%E3%82%8A%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99-%E6%9C%80%E6%96%B0%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E4%BD%9C%E3%82%8A-HTML%E8%B6%85%E5%85%A5%E9%96%80-%E7%AC%AC3%E7%89%88-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%87%E3%82%B8%E3%82%AB%E3%83%AB/dp/4797382236?SubscriptionId=AKIAIM37F4M6SCT5W23Q&amp;tag=AmazonアソシエイトのID&amp;linkCode=xm2&amp;camp=2025&amp;creative=165953&amp;creativeASIN=4797382236">
<img  class="pict" style="margin-right:10px" align="left" hspace="5" border="0" alt="いきなりできます! 最新ホームページ作り&amp;amp;HTML超入門 第3版" src="https://images-fe.ssl-images-amazon.com/images/I/61omOuyi58L._SL160_.jpg">
</a>
</div>
<div  class="itemTitle">
<a  target="_blank" href="https://www.amazon.co.jp/%E3%81%84%E3%81%8D%E3%81%AA%E3%82%8A%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99-%E6%9C%80%E6%96%B0%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E4%BD%9C%E3%82%8A-HTML%E8%B6%85%E5%85%A5%E9%96%80-%E7%AC%AC3%E7%89%88-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%87%E3%82%B8%E3%82%AB%E3%83%AB/dp/4797382236?SubscriptionId=AKIAIM37F4M6SCT5W23Q&amp;amp;tag=アソシエイトのID&amp;amp;linkCode=xm2&amp;amp;camp=2025&amp;amp;creative=165953&amp;amp;creativeASIN=4797382236">
いきなりできます! 最新ホームページ作り&amp;HTML超入門
</a>
</div>
<div  class="itemSubTxt">
<br />
</div>
</div>
<a  target="_blank" href="https://www.amazon.co.jp/%E3%81%84%E3%81%8D%E3%81%AA%E3%82%8A%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99-%E6%9C%80%E6%96%B0%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E4%BD%9C%E3%82%8A-HTML%E8%B6%85%E5%85%A5%E9%96%80-%E7%AC%AC3%E7%89%88-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%87%E3%82%B8%E3%82%AB%E3%83%AB/dp/4797382236?SubscriptionId=AKIAIM37F4M6SCT5W23Q&amp;amp;tag=アソシエイトのID&amp;amp;linkCode=xm2&amp;amp;camp=2025&amp;amp;creative=165953&amp;amp;creativeASIN=4797382236">

<div  style="display:inline-block;background:#fc9a18;padding:10px;border-radius:10px;">
<b>
<span  style="color: rgb(255, 255, 255);">
Amazon
<br />
</span>
</b>
</div>

</a>

<b>
<br />
<a  target="_blank" href="http://hb.afl.rakuten.co.jp/hgc/g00q0725.ulbrk74e.g00q0725.ulbrldcb/_RTldbg10000002?pc=http%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F13100972%2F&amp;m=http%3A%2F%2Fm.rakuten.co.jp%2Fbook%2Fi%2F17293345%2F">

<div  style="display:inline-block;background:#bf0000;padding:10px;border-radius:10px;">
<b>
<span  style="color: rgb(255, 255, 255);">
楽天
<br />
</span>
</b>
</div>
</a>


</div>

※黒文字・・・黒枠
青文字・・・Amazon画像入りリンク
オレンジ・・・商品名をAmazon色のボタン風にする
・・・商品名を楽天色のボタン風にする 



以上!

質問とかあったらコメントください( 」´0`)」 




ピアノ独学8年がいろいろ書いてます。( 」´0`)」
 

【無料・有料】ピアノを“買わなくても”ピアノが弾ける場所まとめ
 

電子ピアノの選び方:買うときに大事にしたい3つのこと。


「ピアノ報告部」をつくります。一緒にピアノ弾きましょ!




よく読まれてます。( 」´0`)」


楽器を上達するために、いちばん大切なこと。


短く切る”ことで、どんな音を表現してるの?スタッカートの本当の意味。


人生でやりたいことをすべてやるために考えたこと。~2.“元気な時間”を長くする~




ピアノ全然関係ないんですけどよく読まれてます。( 」´0`)」


コントラバスの松脂4種、弾き比べ!

独学にオススメの音楽の本、4選。


絵を描く用の左手デバイスに、テンキーを買いました。


スマホ代が月300円くらいになった。