読者です 読者をやめる 読者になる 読者になる

中卒フリーライターほぼ無職。

在宅Webフリーライターaoikaraの日常ブログです。

【Amazonアソシエイト】はてなブログの商品紹介をカスタマイズしてみた【ヨメレバ・カエレバ】

スポンサーリンク

f:id:aoikara:20170108181844j:plain

※2017/1/14追記 スマホの仕様も直しました。

 

ブログでも稼げる方法を模索中のaoikaraです。ちなみに去年のアソシエイト金額は700円w月何万とか稼いでいる人って本当にすごいですよ。

 

というわけで今回のテーマはそんなアフィリエイトにも役立つ…

 

はてなブログの商品紹介をカスタマイズしてみた

 

についてです。

 

 商品紹介デザインをもっとおしゃれにしたい!

このブログでも商品紹介としてよくリンクを貼っているのですが、デザインが正直イマイチ…

 

 

Amazonアソシエイトという、Amazonの商品を紹介して購入してもらうと紹介料の一部が入るっていうものなんですけど…。うーん細長いなぁ。もっと広がりが欲しい!だから、こんな風にしてみました。

 

 ※パソコンのみの設定なので、スマホだとわかりません。すみません。

スマホでも見られるように設定しました!Pro化してスマホの設定をいじられるの忘れてた!

 

あ、ちなみに普通のAmazonアソシエイトの貼り方も乗せておきますね。

 

はてなブログにAmazonアソシエイトを貼る方法

1.Amazonアソシエイトにログインする

 

affiliate.amazon.co.jp

まずはAmazonアソシエイトにログインします。もともとAmazonのアカウントを持っている方ならスムーズです。持っていない方はまず新規登録からしましょう。

 

f:id:aoikara:20170108164010p:plain

 

メールアドレスとパスワードを入力しましょう。するとこんな画面が開きます。

 

f:id:aoikara:20170108164050p:plain

※プライベート保護のため画像を加工しています。

 

2.掲載したい商品を検索する

キーワードを入れて検索しましょう。今回は「相棒 劇場版」っと。

 

f:id:aoikara:20170108164615p:plain

 

そして右の「Go」をクリックして…

 

f:id:aoikara:20170108164725p:plain

 

商品がずらりと表示されています。お目当ての品は…

 

f:id:aoikara:20170108164839p:plain

 

そうそう、これこれ。相棒劇場版とSeason14と15のオフィシャルガイドブックが欲しいのですよね~。脱線はさておき。

 

3.リンクを作成する

右側の「リンクを作成」をクリックして、はてなブログに貼るHTMLを作成します。

 

f:id:aoikara:20170108165223p:plain

 

クリックするとこんな画面が出ます。

 

f:id:aoikara:20170108165451p:plain

※プライベートを守るため画像を加工しています。

 

ここでお好みのデザインにしましょう。

 

4.HTMLを選択してコピーする

先ほど表示されたHTMLの羅列をコピーします。

 

f:id:aoikara:20170108165622p:plain

 

5.はてなブログに貼り付ける

いよいよブログに貼り付けます。まずは記事を書く、で編集画面に行きましょう。そこで「HTML編集」を開きます。

 

f:id:aoikara:20170108170748p:plain

 

クリックするとこんな画面になります。

 

f:id:aoikara:20170108170808p:plain

 

で、ここにさっきコピーしたHTMLを貼り付けましょう。

 

f:id:aoikara:20170108165622p:plain

 

これですね。すると、こんな感じで商品紹介が表示されます。

 

f:id:aoikara:20170108170847p:plain

 

こんな感じです。ここまでが前振り(長い!)。悪くはないのですが、もっとわかりやすいデザインにしたいと思い、変えてみることにしました。

 

カエレバ・ヨメレバを使ってデザインをカスタマイズしよう!

おしゃれにカスタマイズするべく、商品や書籍紹介するためのブログパーツを探すことにしました。すると「わかったブログ」というブログを執筆している、かん吉さんが作成したカエレバ・ヨメレバというブログパーツを発見。

 

 

20170108173339

 

商品紹介ブログパーツ カエレバ

書籍紹介ブログパーツ ヨメレバ

 

こちらを利用している方が多いようです。私が今回紹介したい商品は書籍なので、ヨメレバを使ってみました。

 

1.ブログに掲載したい商品を検索する

まずは検索してみましょう。「相棒 劇場版Ⅳ」っと。

 

f:id:aoikara:20170108173543p:plain

 

ぽちっと。検索結果からブログパーツを作成しましょう。

 

f:id:aoikara:20170108173645p:plain

 

2.ユーザーデータを入力する

表示された画面をスクロールすると「ユーザーデータを入力する」という欄が表示されます。ここで、情報を入力しましょう。

 

f:id:aoikara:20170108173839p:plain

 

サイト情報はマストで。私はAmazonアソシエイト楽天アフィリエイトを入力しました。調べ方は該当サイトで詳しく解説されています。下にスクロールすると「保存」があるのでクリックしましょう。

 

f:id:aoikara:20170108174119p:plain

 

すると、こんな画面が表示されます。

 

f:id:aoikara:20170108174301p:plain

 

※プライベート保護のため画像を加工しています。

 

 

3.ブログパーツをコピーする

作成されたブログパーツをコピーしましょう。このときカスタマイズするために「amazlet風-2(cssカスタマイズ用)」を選択しておきましょう。

 

f:id:aoikara:20170108174452p:plain

 

4.ブログパーツをブログに貼り付ける

コピーしたブログパーツのHTMLを先ほどと同じように「HTML編集」の画面に貼り付けましょう。しかし、まだこんな感じで表示されるはずです。

 

f:id:aoikara:20170108174627p:plain

 

さらに、おしゃれにカスタマイズしてみました。

 

さらにおしゃれにカスタマイズ!

ブログ:いつから俺ができないと錯覚していた?を執筆しているshunさんが書いた記事を参考にして、デザインをカスタマイズしてみました。詳しくはこちらのブログをご覧くださいませ。

 

www.ituore.com

コピペコードをデザインCSSに記入することで(わけがわからないよー

という方は上記リンク先をご覧いただくとめっちゃわかりやすいです!)めでたくこのように表示されます。

 

 

 ぴゃあああーめっちゃおしゃれだあああ。

 

というわけで私のブログのおしゃれ度も少しレベルアップしたのでした。参考にさせていただいたサイトの方々、ありがとうございました。

 

っていうわけで、過去記事の商品紹介も全て変更しなきゃ!作業に追われるaoikaraなのでした。

 

2017/1/14 追記:スマホでも見られるように設定しました!

Pro化したのでスマホの設定をいじれるようになっていたのを忘れていました!スマホの方もちゃんと見られているはずですヤッター!

 

aoikara

 

▼お仕事のご依頼はこちらまで

 

保存

保存

保存

保存

スポンサーリンク