ととまway

人生楽しんだもの勝ち!どうせなら笑って生きるぞ~!!

超初心者がカエレバを設定しようとして苦労した話

こんにちは、ととまです。

 

アフィリエイトをされてる人は「カエレバ」 って知ってますよね。

私は、カエレバのことを最初は知りませんでした。

超初心者なので、広告はアマゾンや楽天などそれぞれで貼るものだと思っていました。

 

www.totoma1125.com

 

 

 

しかし、他の方のブログを見ていると広告が違うのです。

「アマゾンで購入」「楽天で購入」 など、選べますし何やらデザインがきれい!!

これは、すごい技を使っているんだろうなあと思っていました。

すごい技使えてすごいなあ~!と・・・

 

それがカエレバだとわかり、私も設定したいと思いました。

 

カエレバとは

 

「かん吉氏」が提供するブログパーツで、

アフィリエイトリンクを簡単に作成する無料ツールです。

 

複数のショッピングサイトを掲載し、報酬の取りこぼしを防ぐことができます。

 

例えば、アマゾンの広告を貼っていて、

ユーザーがその商品が欲しいと思っても、いつも楽天から買っている人はアマゾンからは買いません。

商品が欲しいと思っても、

楽天の方から買います。

 

自分のいつも使っているショッピングサイトから、買うことができるので、

取りこぼしを防ぐことができます。

 

また、ユーザーはどちらが安いのか比較して買うことができます。

 

 カエレバにユーザーデーターを入力

 

カエレバのページでサイト名、アマゾン、楽天のIDを入力します。

IDの調べ方は、載っていますのでその通りやればOKです。

 

私も「アマゾン」と「楽天」、「もしも」のIDを入力しました。

 そして、「保存」

 

カエレバのコードをコピーして貼ってみた

 

いろんなブロガーさんがカエレバのカスタマイズのコードを載せてくれていています。

そのコードをコピーして、貼ってみました。

 

はてなブログの場合

ダッシュボード

  

デザイン

  

カスタマイズ (スパナのマーク)

  ↓

デザインCSS (一番下)

 ここに貼り付けます

   ↓

上の方にある「変更を保存する」 をクリックします

 

これで設定はOK!

 

 

無効な広告リンクになってしまう

 

カエレバの画面で、ブログに載せたい広告のコードをコピーします。

そして、ブログに貼り付けました。

 

プレビューで見たら、

「アマゾンで購入」「楽天で購入」と綺麗にカスタマイズされています。

 

うんうん、いい感じです。

やったー!

 

さて、本当に広告のページに飛ぶのか試してみました。

 

楽天は飛びましたが、アマゾンはクリックするとかわいい女の子が出てきて、

「無効な広告リンク」 のメッセージが・・・

 

何度やっても、女の子が出てきます。

なんでだろう~♪ ???

 

アマゾンに問い合わせてみました。

カエレバは当プログラムでないのでとの返答で、改善策はわからず・・・。

 

カエレバに問い合わせてみようとみましたが、うまくいきませんでした。

 

 

助けを求めてブログを徘徊

 

どうしてアマゾンに飛ばないのかわからない・・・

アマゾンのIDが違うのかも?穴があくほどIDを確認したけどあっている。

 

答えを求めていろんなブログを徘徊した。

う~ん?

なかなか理由はわかりません。

 

そんな時chanさんのブログ「50のてならい」 にたどり着きました。

chan50.hatenadiary.jp

「50」 という言葉に、勝手に親近感も・・・

だって、私50 ですから!!

 

chanさんのブログの中に、

もしもアフィリエイトでアマゾン、楽天の連携方法について書いている記事がありました。

それを見て、初めてわかったんです。

連携しないといけないことを。

アマゾンと連携しなくてはいけなかったのです。

 

もしも経由で広告を貼る時は、アマゾンと連携しないといけないのです。

アマゾンアソシエイトでIDがあるから、いいのかと思っていました。

 

早速、アマゾンに連携申請をしました。

そして、連携OKとなりました。

「広告リンク」を取得します。

取得の仕方はカエレバの画面に説明があります。

「広告リンク」をコピーして、カエレバの画面で入力。

 

そして、自分のブログの広告から「アマゾンで購入」をクリックしたら、

ちゃんとアマゾンの広告に飛んだのです。

 

よかった~!

 

 

スマフォ版では、きれいにカスタマイズされていない

 

パソコンの画面では、カエレバがきれいにカスタマイズされています。

しかし、スマフォではきれいにカスタマイズされていません。

 

殺風景なかんじです。

 

またも、問題です・・・

一難去ってまた一難とはこのことです。

 

きっとスマフォはまた別の設定をしないといけないんだな・・・

 

また、ブログを徘徊して歩き、スマフォ用のコードを見つけました。

早速コピーして、貼り付けました。

 

ダッシュボードボード

  

デザイン

  

スマフォ (スパナのとなり)

  

詳細設定

  ↓

記事下

ここに貼りつけました。

 

そして、スマフォの画面を確認。

 

スマフォにも綺麗にカスタマイズされていました。

ですが、「アマゾン」と「楽天」のクリックする部分の四角いサイズが違うのです。

 

それに、パソコンとスマフォのデザインが違います。

パソコンは「アマゾン」のクリックする部分が白地。

スマフォは全体に色がついています。

パソコンとスマフォの統一感がありません。

 

そんな時、私の救世主chanさんからご指導していただきました。

chanさんは、どこの馬の骨かもわからない私に丁寧に教えてくれました。

ありがとうございます。

 

それまで使っていたブログのテーマは、

レスポンシブルデザイン対応ではなかったので、

それまで使っていたものと似ているデザインで、

レスポンシブルデザイン対応のものに変更しました。

 

すると、スマフォの方もパソコンと同じデザインになっていました。

今度こそ、うまくいきました。

 

ありがとう!chanさん。

 

 

レスポンシブルデザインとは

 

レスポンシブデザインとは、Webデザインの手法の一つで、

様々な種類の機器や画面サイズに単一のファイルで対応すること。

            IT用語辞典 e wordsより

 

 

 

レスポンシブルデザインにすると、全ての機器に同じ内容で表示できます。

つまり、スマフォも パソコンと同じコードが有効になります。

 

レスポンシブルデザインはメリットもデメリットもありますが、

これが一番簡単なやり方のようです。

 

まとめ

 

今まで、いじったことのないCSSを触ってみました。

触るというよりも、貼りつけただけですが。

それでも、恐る恐るです・・・

デザインを変えるのにはCSSなんですね~。

アルファベットが並んでいてさっぱりわかりませんが、

あのコードを入れるとデザインが変わることってすごい!と思いました。

あのコードってどうやって作るのでしょう~?

 

いろんなブログを見ていると決められたテーマでなく、

自分でデザインしている方もいます。

そんなことができるのってすごいなあ~!っていうのが今の私の感想です。

 

いつか私もそんなブログをつくれたらな~。

 

わからないことは多いのですが、助けてくれる方もいてありがたく思っています。

無知な私ですが、いろんな方から教えてもらったりして少しづつですが、

進歩しております。

 

ありがとうございます!!

 

www.totoma1125.com

 

 

 

では、また