ASP・アドセンス

カエレバで広告リンクをボタン表示にするには?使い方やカスタマイズ方法を徹底解説【もしもユーザー版】

先日、もしもアフィリエイトからAmazonの審査を通過するための方法について記事を書きました。

[blogcard url=”https://matsuko-minimum.info/moshimoamazonshinsa/”]

Amazonや楽天の広告を同時に表示できる「かんたんリンク」という機能もあるので、一気にブログを収益化に導けるようになったと思います。

しかし、かんたんリンクだと広告のレイアウトが次の画像のようになり…

なんというか、初心者っぽいというか、美しくないというか(笑)

まぁ、個人の感じ方なのですが、実はもっと美しいリンクの作成方法があるので、私的にはそちらを全面的に推していきたいです。

 

その方法と言うのが「カエレバ」を利用する方法です。

そこで今回は、カエレバの使い方やカスタマイズ方法について徹底解説していきます。

カエレバとは?

「カエレバ」ブログパーツは、ブログ上で、特に量販品を紹介するためのブログパーツです。

アマゾン、楽天市場、Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます

楽天ポイントを貯めている人はAmazonでは買いません。彼らは、あなたが紹介した商品を買おうと思っても、楽天へのリンクがなければ、楽天市場へ移動して探します。

報酬率を意識して楽天を紹介しないことは、読み手のニーズ無視した、無意味な機会損失です!

引用元:http://kaereba.com/

要するに、簡単にアフィリエイトリンクを作成できるサイトです。…ってかなり端折ったかも(笑)

カエレバ使用方法~もしもアフィリエイトver.~

①サイトにアクセス

まずはこちらのサイトにアクセスしてください。

URL:http://kaereba.com/

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

サイト内を下にスクロールしていくと次の画像のように、「ユーザーデーター入力」という箇所があります。

そしてAmazonと楽天の赤線で囲った箇所にもしもアフィリエイトで取得したIDを記入します。

 

ちなみにIDの調べ方を調べるには、もしもアフィリエイトの管理画面から「プロモーションを探す」→「提携中プロモーション」をクリック。

次の画像のような画面に変わるので、赤線で囲った広告リンク作成をクリックします。

すると、次の画像のような画面に移ります。

悪用防止のために赤線と黒線でコードを隠しましたが、赤線部分に5~6桁の数字が入ってます。(全箇所共通)

この数字をカエレバのユーザーデータ入力画面の赤線で囲った箇所に入力します。

 

これはAmazonの申請画面ですが、楽天もIDの探し方は同じです。

 

もしもアフィリエイトの登録方法を詳しく紹介

カエレバの使い方

カエレバの使い方はとっても簡単です。

画面上部に移り、次の画像の赤線で囲った「商品キーワード」という箇所に広告リンクを作成したいキーワードを入力してください。

例えば私の大好きなドラクエでいきましょう。

 

すると、さっきの下の外面にこんな感じで検索結果が表示されます。

検索結果がでたら、「ブログパーツを作る」という箇所をクリックしましょう。

 

すると次の画像のように、広告リンクが作成されます。

画像付きリンクやテキストリンクのコードが出てくるので、これをブログに埋め込めば記事内に広告が表示されます。

 

さらにさらに!

この位置や、

この位置を組み替える事で少しだけデザインが変わります。

 

さらに美しくデザインしたいあなたへ

ここまでの説明でもかなり便利なんですが、さらに美しい広告リンクを作成する方法を紹介していきます。

この方法はCSSを追記していくことになり、少しややこしいので、分からない方にはコピペを推奨します。

①まずは完成品から

まずはどんな風に美しくなるのかご紹介!

 

どうですか?
Amazonと楽天のリンク箇所がボタンになって美しいでしょ?ついでに買ってもいいんですよ?(笑)

 

という冗談はさておき、結構デザイン変わったと思いませんか?少しデザインが変わるだけで印象が全然違いますよね。

②コピペでデザイン変更しよう!

上で紹介したデザインはカエレバの「amazlet風(改-1)」「なし」で作成したデザインにCSSを追記していくという方法で作成しています。

主な変更点は

 青色の枠線を追加

 商品名の色を変更

 商品名のマウスオーバー時の色を変更

 posted with カエレバの表記を少し下に変更

 Amazon、楽天をボタン形式に変更

などなど。結構いじくってます。

ですので、私のデザイン変更をそのまま採用したいという方は、以下の記述をCSSに追記してください。

/*--------------------------------------
  ヨメレバ・カエレバ(レスポンシブ)
--------------------------------------*/
.booklink-box, .kaerebalink-box{
    padding:25px;
    margin-bottom: 10px;
    border:double #CCC;
    overflow: hidden;
    font-size:small;
}
.booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
    min-width: 160px;
    text-align: center;
}
.booklink-image img, .kaerebalink-image img{
    margin:0 auto;
    text-align:center;
}
.booklink-info, .kaerebalink-info{
    margin:0;
    line-height:120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
     font-size:8px;
     margin-top:10px;
     font-family:verdana;
     line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:30%;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    display:inline-block;
    margin:5px 2px 0 0;
    padding:10px 1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-weight:800;
    text-shadow:1px 1px 1px #dcdcdc;
    font-size:12px;
    color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
    position:relative;
    top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
    width: 100px !important;
    min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
    font-size: 15px;
    font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:calc(100% - 4px);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    margin: 2px 0px;
    padding:10px 0px;
}
}

めちゃめちゃ長いですよね。こだわりの数だけ長くなったってことで(笑)

まとめ

今回はもしもアフィリエイトの広告リンクのデザインに少しダメ出ししつつ、カエレバの使い方と、美しい広告リンクのデザイン作成方法について紹介してきました。

特に今回のリンクはボタン形式で見やすいので、思わずクリックしてもらえるかもしれません。

Amazonも楽天もクッキーの都合で、紹介した商品を必ずしも買ってもらわなくてもいいので、「まずはクリックしてもらう」ということを考えると、デザインは重要かなと思います。

少し手間ですが、是非参考にしていただけたらと思います。

 

最後まで読んでいただきありがとうございました。

 

おすすめVODランキング

数あるVOD(ビデオオンデマンド)サービスの中から、私が実際に使ってみて良いと思ったものをランキング形式で紹介します。

U-NEXT
U-NEXT

圧倒的作品数を誇るのが「U-NEXT」です。月額がやや高いですが、毎月付与される1,200円分のポイントを月額から相殺したり、動画のレンタルや電子書籍版の雑誌・漫画の購入に使ったりできるのが特徴です。

ディズニーやア〇ルト動画を見れるのも他社とは一線を画します。

評価
月額料金 1,990円(税抜)
※毎月1,200円分のポイント付与
無料期間 31日間
作品数 見放題作品90,000本
レンタル作品50,000本

公式ページ

Hulu
hulu

作品数と月額のバランスが最も良いのが「Hulu」です。国内・海外問わずドラマが豊富で、アニメにも力を入れています。特に海外ドラマは先行配信に期待ができます。

また、日本テレビ系列の会社が運営しているため、「名探偵コナン」など、日テレで放送されている作品が他社より充実しています。

評価
月額料金 1,026円
無料期間 2週間
作品数 60,000本以上

公式ページ

プライムビデオ

動画本数こそ劣るものの、圧倒的コストパフォーマンスを誇るのが「Amazonプライムビデオ」です。というのも、プライム会員のおまけで動画見放題も付いてくるので、おまけ要素なのに豪華すぎるのが実際のところ。プライム会員では、配送料や時間指定などが無料なことに加え、音楽が聴けるサービスなんかもあります。おまけでドラマや映画、アニメがこれだけ見れるのは凄いですよね!

評価
月額料金 408円(税抜)
無料期間 30日間
作品数 2,000本以上

公式ページ