こんにちは、マツコ・ミニマムです。
先日、もしもアフィリエイトからAmazonの審査を通過するための方法について記事を書きました。
Amazonや楽天の広告を同時に表示できる「かんたんリンク」という機能もあるので、一気にブログを収益化に導けるようになったと思います。
しかし、かんたんリンクだと広告のレイアウトが次の画像のようになり…
なんというか、初心者っぽいというか、美しくないというか(笑)
まぁ、個人の感じ方なのですが、実はもっと美しいリンクの作成方法があるので、私的にはそちらを全面的に推していきたいです。
その方法と言うのが「カエレバ」を利用する方法です。
そこで今回は、カエレバの使い方やカスタマイズ方法について徹底解説していきます。
目次
カエレバとは？
「カエレバ」ブログパーツは、ブログ上で、特に量販品を紹介するためのブログパーツです。
アマゾン、楽天市場、Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます
楽天ポイントを貯めている人はAmazonでは買いません。彼らは、あなたが紹介した商品を買おうと思っても、楽天へのリンクがなければ、楽天市場へ移動して探します。
報酬率を意識して楽天を紹介しないことは、読み手のニーズ無視した、無意味な機会損失です！
要するに、簡単にアフィリエイトリンクを作成できるサイトです。…ってかなり端折ったかも(笑)
カエレバ使用方法～もしもアフィリエイトver.～
①サイトにアクセス
まずはこちらのサイトにアクセスしてください。
②ユーザーデータを入力する
サイト内を下にスクロールしていくと次の画像のように、「ユーザーデーター入力」という箇所があります。
そしてAmazonと楽天の赤線で囲った箇所にもしもアフィリエイトで取得したIDを記入します。
ちなみにIDの調べ方を調べるには、もしもアフィリエイトの管理画面から「プロモーションを探す」→「提携中プロモーション」をクリック。
次の画像のような画面に変わるので、赤線で囲った広告リンク作成をクリックします。
すると、次の画像のような画面に移ります。
悪用防止のために赤線と黒線でコードを隠しましたが、赤線部分に5～6桁の数字が入ってます。(全箇所共通)
この数字をカエレバのユーザーデータ入力画面の赤線で囲った箇所に入力します。
これはAmazonの申請画面ですが、楽天もIDの探し方は同じです。
カエレバの使い方
カエレバの使い方はとっても簡単です。
画面上部に移り、次の画像の赤線で囲った「商品キーワード」という箇所に広告リンクを作成したいキーワードを入力してください。
例えば私の大好きなドラクエでいきましょう。
すると、さっきの下の外面にこんな感じで検索結果が表示されます。
検索結果がでたら、「ブログパーツを作る」という箇所をクリックしましょう。
すると次の画像のように、広告リンクが作成されます。
画像付きリンクやテキストリンクのコードが出てくるので、これをブログに埋め込めば記事内に広告が表示されます。
さらにさらに！
この位置や、
この位置を組み替える事で少しだけデザインが変わります。
さらに美しくデザインしたいあなたへ
ここまでの説明でもかなり便利なんですが、さらに美しい広告リンクを作成する方法を紹介していきます。
この方法はCSSを追記していくことになり、少しややこしいので、分からない方にはコピペを推奨します。
①まずは完成品から
まずはどんな風に美しくなるのかご紹介！
どうですか？
Amazonと楽天のリンク箇所がボタンになって美しいでしょ？ついでに買ってもいいんですよ？(笑)
という冗談はさておき、結構デザイン変わったと思いませんか？少しデザインが変わるだけで印象が全然違いますよね。
②コピペでデザイン変更しよう！
上で紹介したデザインはカエレバの「amazlet風(改-1)」「なし」で作成したデザインにCSSを追記していくという方法で作成しています。
主な変更点は
青色の枠線を追加
商品名の色を変更
商品名のマウスオーバー時の色を変更
posted with カエレバの表記を少し下に変更
Amazon、楽天をボタン形式に変更
などなど。結構いじくってます。
ですので、私のデザイン変更をそのまま採用したいという方は、以下の記述をCSSに追記してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
/* カエレバ枠線 */ .kaerebalink-box{border:2px solid #4169e1;} /* 商品名の部分 */ .kaerebalink-name{ font-size:15px; /* 文字の大きさ */ font-weight:bold; /* 文字を太字に */ } /* 商品名の部分（リンク） */ .kaerebalink-name a{ color:#0066cc; /* リンクの色 */ text-decoration:none; /* アンダーライン無し */ } /* 訪問済みのリンクの色 */ .kaerebalink-name a:visited { color: #9f9f9f; } /* カーソルが乗った時 */ .kaerebalink-name a:hover{ color:#7a8285; /* カーソルが乗った時のリンクの色 */ text-decoration:underline; /* リンクにアンダーライン */ } /* Amazonと楽天のボタン */ .shoplinkamazon, .shoplinkrakuten { text-align:center; /* 文字をボタンの中央に */ margin-right: 10px; /* ボタンとボタンの間の余白 */ float: left; /* ボタンを横並びに */ width: 45%; /* ボタンの幅 */ } .kaerebalink-link1 a { display: block; height: 40px; /* ボタンの高さ */ line-height: 40px; /* ここはボタンの高さと同じ数値に */ border-radius:5px; /* ボタンの角をちょっと丸く */ -moz-border-radius:5px; /* ボタンの角をちょっと丸く(Firefox向け) */ -webkit-border-radius:5px; /* ボタンの角をちょっと丸く(Google Chrome、Safari向け) */ } /* ボタン上に余白 */ .kaerebalink-link1 { margin-top: 15px; } /* 左寄せを後から解除するための記述 */ .kaerebalink-link1:after { content:""; display:block; clear:both; } /* Amazonのリンク部分（ボタン内のテキスト） */ .shoplinkamazon a{ background-color:#0000ff; /* ボタンの背景色 */ color:#fff; /* 文字の色 */ text-decoration:none; /* アンダーライン無し */ font-weight:bold; /* 文字を太字に */ display:block; /* ボタン全体をクリックできるようにブロック要素にする */ } /* 楽天のリンク部分（ボタン内のテキスト） */ .shoplinkrakuten a{ background-color:#FF0000; /* ボタンの背景色 */ color:#fff; /* 文字の色 */ text-decoration:none; /* アンダーライン無し */ font-weight:bold; /* 文字を太字に */ display:block; /* ボタン全体をクリックできるようにブロック要素にする */ } @media screen and (max-width: 599px) { /* この間にCSSを書いていく */ } /* カエレバスマートフォン表示 */ @media screen and (max-width: 599px) { .kaerebalink-box { margin-top:10px; /* カエレバ全体の上に余白 */ margin-bottom:10px; /* カエレバ全体の下に余白 */ text-align:center; /* カエレバリンク内テキストは中央寄せ */ padding:10px; /* 全体的な余白 */ } /* カエレバの商品画像部分 */ .kaerebalink-image { float:none; /* 画像の左寄せを解除 */ } /* ショップリンクボタン（Amazonと楽天） */ .shoplinkamazon, .shoplinkrakuten { width:90%; /* ボタンの幅を横幅の90%に */ display : block; /* 横並びだったボタンを縦に並べる */ padding : 0; /* 余計な余白を削除 */ margin-bottom: 10px; /* ボタンとボタンの間の余白 */ } } |
めちゃめちゃ長いですよね。こだわりの数だけ長くなったってことで(笑)
ちなみに、まったく同じにしたくないという方もいると思います。
その場合は、上記の記述が項目ごとになっているので、線の太さや文字の色を変更してみてください。
例えば商品名の文字の大きさを変えたい場合、
|
1 2 3 4 5 |
/* 商品名の部分 */ .kaerebalink-name{ font-size:15px; /* 文字の大きさ */ font-weight:bold; /* 文字を太字に */ } |
この部分の「商品名」とか「文字の大きさ」という部分を頼りにすれば、CSSが分からない方でもなんとかついていけると思います。
文字の大きさなら「15px」の部分を増やせば文字を大きくできます。
また、文字を太字にしたくないのならば、太字を意味する「bold」が含まれた 「font-weight:bold;」という記述をそっくりそのまま消してしまえばOKです。
…って、これについて話しだすとキリがないので割愛します。
結論、分からないなら無理せずにコピペでやめといてください(笑)
まとめ
今回はもしもアフィリエイトの広告リンクのデザインに少しダメ出ししつつ、カエレバの使い方と、美しい広告リンクのデザイン作成方法について紹介してきました。
特に今回のリンクはボタン形式で見やすいので、思わずクリックしてもらえるかもしれません。
Amazonも楽天もクッキーの都合で、紹介した商品を必ずしも買ってもらわなくてもいいので、「まずはクリックしてもらう」ということを考えると、デザインは重要かなと思います。
少し手間ですが、是非参考にしていただけたらと思います。
最後まで読んでいただきありがとうございました。
