Logreamo

脱力系フリーターの雑記ブログ

超簡単!ヨメレバ・カエレバで商品紹介リンクをおしゃれにカスタマイズ!【はてなブログ】

f:id:chika_0831:20170607150501p:plain

どうも、chika(@chika0831)です!

 

よく商品紹介のリンクがこんな感じでおしゃれなカスタマイズになってるのをよく見かけます。↓

 

 

あれどうやんだろう、、、。

 

 

 

前から気になってたんですけど放置していたので、やってみました!

意外と簡単!

 

目次

 

1.リンクを作成して貼り付ける

 

①ヨメレバ、カエレバにアクセスする

ヨメレバ、カエレバはわかったブログを運営されているかん吉さんのブログパーツサイトです。

 

自分が紹介したい商品のリンクをおしゃれにカスタマイズしてくれるコードを自動で作成してくれます!

 

書籍を紹介する場合は『ヨメレバ』、商品を紹介する場合は『カエレバ』にアクセスしましょう。

 

②ユーザーデータを入力する

 

表示画面をスクロールすると『ユーザーデーター入力』という部分があるので、運営しているサイトと登録しているアフィリエイトID入力します。

f:id:chika_0831:20170605222318p:plain

 

入力したら保存。

f:id:chika_0831:20170605223414p:plain

 

 

③紹介したい商品のリンクを作る

f:id:chika_0831:20170605225551p:plain

 

 

ブログパーツを作るをクリックします。

f:id:chika_0831:20170605225755p:plain

 

④HTMLコードをコピーして貼り付ける

amazlet風-2を選択し、下にあるHTMLのコードをコピーします。

※amazlet風-2を選択しないとデザインが崩れるらしいので注意しましょう!

 

f:id:chika_0831:20170607145340p:plain

 

 

次にはてなブログの編集画面で『HTML編集』を選択して、コピーしたHTMLコードを貼り付け。

f:id:chika_0831:20170607145319p:plain

 

 

するとこんな感じになります。

f:id:chika_0831:20170607121405p:plain

 

「全然違うじゃん!」って?

 

まぁまぁ、落ち着けよ。

f:id:chika_0831:20170607121624j:plain

 

お次はCSSコードでカスタマイズします。

 

 

 

2.デザインCSSにコピペする

こちらの記事を参考にさせてもらいました!

PC版・スマホ版それぞれコードが記載されているので、コピーします。

 

コピーしたらダッシュボードからデザインを選択し、PC版・スマホ版にそれぞれ貼り付けます。

 

PC版

①カスタマイズを選択し、②デザインCSSに貼り付けます。

f:id:chika_0831:20170607134808p:plain

 

そうするとこんな感じで完成っ!

 

f:id:chika_0831:20170607142846p:plain

 

 

スマホ版 

 スマホ版の場合は、①スマートフォン②記事③記事下に移動し貼り付けます。

  

f:id:chika_0831:20170607144241p:plain

f:id:chika_0831:20170607144920p:plain

 

 

 

 

 

 

 

 

 

 

 

 

 

するとこんな感じでスマホ版も完成!

 

f:id:chika_0831:20170607135317p:plain

 

 

 まとめ

 今回はヨメレバ・カエレバを利用した商品紹介リンクのカスタマイズを紹介しました!

 コピペでできるんでお試しあれ〜