※2017/1/14追記 スマホの仕様も直しました。
ブログでも稼げる方法を模索中のaoikaraです。ちなみに去年のアソシエイト金額は700円ｗ月何万とか稼いでいる人って本当にすごいですよ。
というわけで今回のテーマはそんなアフィリエイトにも役立つ…
はてなブログの商品紹介をカスタマイズしてみた
についてです。
- 商品紹介デザインをもっとおしゃれにしたい！
- はてなブログにAmazonアソシエイトを貼る方法
- カエレバ・ヨメレバを使ってデザインをカスタマイズしよう！
- さらにおしゃれにカスタマイズ！
- 2017/1/14 追記：スマホでも見られるように設定しました！
商品紹介デザインをもっとおしゃれにしたい！
このブログでも商品紹介としてよくリンクを貼っているのですが、デザインが正直イマイチ…
Amazonアソシエイトという、Amazonの商品を紹介して購入してもらうと紹介料の一部が入るっていうものなんですけど…。うーん細長いなぁ。もっと広がりが欲しい！だから、こんな風にしてみました。
※パソコンのみの設定なので、スマホだとわかりません。すみません。
スマホでも見られるように設定しました！Pro化してスマホの設定をいじられるの忘れてた！
あ、ちなみに普通のAmazonアソシエイトの貼り方も乗せておきますね。
はてなブログにAmazonアソシエイトを貼る方法
1．Amazonアソシエイトにログインする
まずはAmazonアソシエイトにログインします。もともとAmazonのアカウントを持っている方ならスムーズです。持っていない方はまず新規登録からしましょう。
メールアドレスとパスワードを入力しましょう。するとこんな画面が開きます。
※プライベート保護のため画像を加工しています。
2．掲載したい商品を検索する
キーワードを入れて検索しましょう。今回は「相棒 劇場版」っと。
そして右の「Go」をクリックして…
商品がずらりと表示されています。お目当ての品は…
そうそう、これこれ。相棒劇場版とSeason14と15のオフィシャルガイドブックが欲しいのですよね～。脱線はさておき。
3．リンクを作成する
右側の「リンクを作成」をクリックして、はてなブログに貼るHTMLを作成します。
クリックするとこんな画面が出ます。
※プライベートを守るため画像を加工しています。
ここでお好みのデザインにしましょう。
4．HTMLを選択してコピーする
先ほど表示されたHTMLの羅列をコピーします。
5．はてなブログに貼り付ける
いよいよブログに貼り付けます。まずは記事を書く、で編集画面に行きましょう。そこで「HTML編集」を開きます。
クリックするとこんな画面になります。
で、ここにさっきコピーしたHTMLを貼り付けましょう。
これですね。すると、こんな感じで商品紹介が表示されます。
こんな感じです。ここまでが前振り（長い！）。悪くはないのですが、もっとわかりやすいデザインにしたいと思い、変えてみることにしました。
カエレバ・ヨメレバを使ってデザインをカスタマイズしよう！
おしゃれにカスタマイズするべく、商品や書籍紹介するためのブログパーツを探すことにしました。すると「わかったブログ」というブログを執筆している、かん吉さんが作成したカエレバ・ヨメレバというブログパーツを発見。
こちらを利用している方が多いようです。私が今回紹介したい商品は書籍なので、ヨメレバを使ってみました。
1．ブログに掲載したい商品を検索する
まずは検索してみましょう。「相棒 劇場版Ⅳ」っと。
ぽちっと。検索結果からブログパーツを作成しましょう。
2．ユーザーデータを入力する
表示された画面をスクロールすると「ユーザーデータを入力する」という欄が表示されます。ここで、情報を入力しましょう。
サイト情報はマストで。私はAmazonアソシエイトと楽天アフィリエイトを入力しました。調べ方は該当サイトで詳しく解説されています。下にスクロールすると「保存」があるのでクリックしましょう。
すると、こんな画面が表示されます。
※プライベート保護のため画像を加工しています。
3．ブログパーツをコピーする
作成されたブログパーツをコピーしましょう。このときカスタマイズするために「amazlet風-2(cssカスタマイズ用)」を選択しておきましょう。
4．ブログパーツをブログに貼り付ける
コピーしたブログパーツのHTMLを先ほどと同じように「HTML編集」の画面に貼り付けましょう。しかし、まだこんな感じで表示されるはずです。
さらに、おしゃれにカスタマイズしてみました。
さらにおしゃれにカスタマイズ！
ブログ：いつから俺ができないと錯覚していた？を執筆しているshunさんが書いた記事を参考にして、デザインをカスタマイズしてみました。詳しくはこちらのブログをご覧くださいませ。
コピペコードをデザインCSSに記入することで（わけがわからないよー
という方は上記リンク先をご覧いただくとめっちゃわかりやすいです！）めでたくこのように表示されます。
ぴゃあああーめっちゃおしゃれだあああ。
というわけで私のブログのおしゃれ度も少しレベルアップしたのでした。参考にさせていただいたサイトの方々、ありがとうございました。
っていうわけで、過去記事の商品紹介も全て変更しなきゃ！作業に追われるaoikaraなのでした。
2017/1/14 追記：スマホでも見られるように設定しました！
Pro化したのでスマホの設定をいじれるようになっていたのを忘れていました！スマホの方もちゃんと見られているはずですﾔｯﾀｰ！
aoikara
▼お仕事のご依頼はこちらまで
