初心者でも簡単にヨメレバのボタンをおしゃれ＆他の会社も入れる方法

漫画や物のアフィリエイトしたいとき、どこの会社のボタンを設置すればいいか悩みますよね。
Ａｍａｚｏｎキンドルを設置しても、楽天booksで本を買う人はクリックしてくれません。

それを防いで取りこぼしをにようにしてくれるのが「ヨメレバ」です。
しかし、「ヨメレバ」をこのまま張り付けてもちょっとダサいし、ボタンが小さいのでクリックしてもらえる気がしません。

他の会社も足したいです。

そこで今日は、「ヨメレバの設置方法」「ヨメレバをおしゃれに設置する方法」「ヨメレバにほかの本屋さんも登録する方法」をご紹介していきたいと思います！

スポンサードリンク

WordPress

まずはワードプレスにコードを書き込みます。
テーマは賢威を使用。

SEOに強い戦略的テンプレート「賢威7」。

WordPress管理画面⇒外観⇒テーマの編集を開き、左に項目から下の方にある「base.css」を選択して下さい。

窓香

わたしは「_base.css」と間違えてしまいました。
注意してくださいね。
「base.css」です。

本文の一番下に以下のコードを書き込みます。

/*--------------------------------------
ヨメレバ・カエレバ（レスポンシブ）
--------------------------------------*/
.booklink-box, .kaerebalink-box {
padding:25px;
margin-bottom: 10px;
border:solid 1px #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%;
display:inline-block;
margin:5px 2px 0 0;
padding:10px 1px;
text-align:center;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
float:left;
text-decoration:none;
font-weight:800;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
font-size:12px;
color: #fff !important;
-webkit-transition: all .3s; /* カーソルを合わせた時のフェード(0.3秒)★ */
transition: all .3s; /* カーソルを合わせた時のフェード(0.3秒)★ */
}
.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 {
background-color: #ff9901 !important; /* 背景色★ */
}
.shoplinkrakuten a {
background-color: #c20004 !important; /* 背景色★ */
}
.shoplinkkindle a {
background-color: #007dcd !important; /* 背景色★ */
}
.shoplinkkakakucom a {
background-color: #314995 !important; /* 背景色★ */
}
.shoplinkyahoo a {
background-color: #7b0099 !important; /* 背景色★ */
}
.shoplinkseven a {
background-color: #1abc9c !important; /* 背景色★ */
}
.shoplinkrakukobo a {
background-color: #039bad !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:4px;
-webkit-border-radius:4px;
border-radius:4px;
margin: 2px 0px;
padding:10px 0px;
}
}

そして、その下にある「ファイルを更新」ボタンを押して保存してください。

窓香

ここのページをいじるときは、間違ったことをしてしまうとサイトが使えなくなることもあるので慎重に！
触る前には必ずバックアップをとっておこう。

１．ヨメレバのページをひらく

まずはヨメレバの初期設定をします。（無料）
http://yomereba.com/のページに移動してください。

今日は「ゴールデンカムイ」という漫画を張り付けてみます。

２．ユーザーデータを入力する

ヨメレバに入ったら、ユーザーデータを入力します。
それぞれのやり方はヨメレバのユーザーデータ入力画面の下に書いてあります。

Amazonアソシエイトと楽天アフィリエイトがまだな方はこの機会に登録しましょう。

Amazonアソシエイト⇒https://affiliate.amazon.co.jp/

楽天アフィリエイト⇒https://affiliate.rakuten.co.jp/

３．「保存」をクリック

設定が完了したら、ユーザーデータ入力一番下の「保存」をクリックして初期設定は終了です。
※一度保存すれば次から入力の必要はありません

４．対象の漫画を探す

まず、書籍キーワードに探したい漫画を入れます。
上の画像では「ゴールデンカムイ」と入れて検索しました。

次に、「ブログパーツを作る」をクリックして下さい。

※商品がたくさん出てくると思いますが、紹介したい好きな巻の「ブログパーツを作る」をクリックしてください。
※たまに、クリック後に反映されないときがあります。
その場合はもう１度書籍キーワードを入れなおすと反映されます。

５．チェック＆コピー

上の画像のように、反映させたい会社を選んでチェックを入れます。
私は、Amazon・Amazonkindle・楽天市場・楽天koboの４つを作りたいのでこの４つにチェックを入れました。

その後、漫画のすぐ下に出てくるタグを全指定してコピーしてください。

６．新しいタブでサイトを開く

次に、新しいタブでこちらのサイトを開いてください。
http://u670.com/pikamap/htmlseikei.php（ＨＴＭＬ整形ツール）

７．ＨＴＭＬ整形ツール

先ほど「ヨメレバ」でコピーしたタグを「HTMLを張り付けてください」と書いてある場所に張り付けます。
そしてすぐに「整形」をクリック。

８．コピーする

そうすると下のようなタグがでてきます。
１番左を見ると上から順番に数字が書いてあり、その横に▼があると思います。

スポンサードリンク

下から２番目の▼の列の<div class=”shoplinkrakuten”～そのつぎつぎの列の </div>までをコピーしてください。
上の画像のちょうど範囲指定されているところです。

９．張り付ける

コピーした次の段にもspan class=”lang:default decode:true crayon-inline ” ><div class=”shoplinkrakuten”～2行下の </div>があると思います。
その </div>の下に８．でコピーしたものを張り付けてください。

本来はこのタグをWordPressの投稿画面で「テキスト」へ張り付ければ、ヨメレバのデザインが変更しています。

一度WordPressのプレビュー画面で確認してみて下さい。

でも実は、BookLiveなども人気なんです。
なので、ここで終わらずにBookLiveのこの中に入れたいと思います！

１０．新しいタブでバリューコーマスへ行く

BookLive は今のところバリューコーマスでしか取り扱いがないので、バリューコーマスに登録しましょう。
⇒参加申し込み

登録審査OKまで1～3週間ほど待ち、承諾されたらBookLiveと提携します。

１２．Bookliveへ行く

提携が完了したら、TOPページの「広告プログラム管理」→「提携済み」→ と進みます。

その後、「国内最大級の総合電子書籍ストアBookLive!」を押さずに、左にある「広告作成」をクリック。

画面が変わったら左の広告タイプから「my Link(2)」を選ぶ

“step.1広告主のページを開いて、広告のリンク先としたいページのURLをコピーする”のすぐ下「国内最大級の総合電子書籍ストア　BookLive!」をクリック

別枠でBookLiveが開かれるので、「検索」に自分が検索したい漫画名を入れて、漫画を選び、そのページのリンクURLを全範囲コピーする

バリューコーマスに戻り、コピーしたURLを“ステップ2コピーしたURLを貼り付ける”に貼り付ける。
そして“広告となるテキストを入力する”に漫画の名前を入れる（このテキストは後で消すので、「あ」とかでもOK）

タグが生成されるので、コピーしてメモ帳やwordに張り付ける。

そして、タグ最初の<a href=”を消す。
次にDaff”の「”」から下をすべて消す。※「”」も消す

※消したものはあとで再度使用するので、「消す」のではなくまた別のところにコピーを取っておくとスムーズです。

タグの始まりは「//ck.」終わりが「Daff」になっているのを確認して全範囲指定でコピーする。

１３．ＨＴＭＬ整形ツールに戻る

７．のＨＴＭＬ整形ツールに戻り、コピーした部分（左の数字を見て、▼が横に表示されている一番下の列）の「https://」～「” target=”」の前までをすべて消して、bookliveでコピーしたタグを張り付ける。

新しいタグが、「<a href=”ブックアライブのタグ” target=”～～～～～」（※～～～はタグを省略）となっていればOK。

１３．WordPress

WordPressの「テキスト」から任意の場所に張り付ける。
「変更をプレビュー」で問題なければ完了。

最後にすること

最後に、さきほど消去したバリューコーマスのタグをCSSに書き込みます。
書き込んでおかないと運営から忠告がきたり、クリック回数を把握できないという不具合が起こる可能性があるからです。

１２．で消した中に含まれている「<img src=”」～「border=”0″>」までを１番初めに入力したWordPress管理画面⇒外観⇒テーマの編集⇒「base.css」の一番下に挿入して「ファイルを更新」を選んで下さい。
※これはヨメレバに使用する漫画が変わるごとに書き込んでくださいね。

最後に

工程が多いので面倒に感じるかもしれませんが、慣れれば3分くらいでできてしまいます。
CSS初心者の私でも出来たので、ぜひ挑戦してみてくださいね。
良く分からない方は問い合わせフォームからお気軽にお問い合わせください！