どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
アフィリエイトに便利なカエレバを前に導入したので、今回はブックショップに強いヨメレバも導入してみました。
私の場合はすでにカエレバの商品リンクをCSSでカスタマイズしていたので、「ヨメレバもそのままCSSが使えるだろう。」と思っていたので、使ってみるとビックリ！
「ショップリンクのボタンデザインが崩れまくっとるがな！！！」
考えてみればカエレバと違って「Kindle」などのショップリンクがあるので、CSSが適用しないのも無理ないですね。
そこでヨメレバ専用のCSSを追加して、オリジナルリンクを作ってみましたのでここでご紹介します。
カエレバのCSSをそのまま使うと
カエレバで使っている商品リンクは人それぞれ違うと思いますが、私が現在使用しているデザインはこちらになります。
カエレバをまだ使っていない方や「こんなデザインにしてみたいなぁ。」と思っている方はこちらの記事を参考にしてみて下さい。
| 参考：アフィリエイトに便利な「カエレバ」の登録方法と使い方の基本を図解 |
このCSSデザインをヨメレバにも使ってみると、
ショップリンク以外はカエレバのCSSがしっかり反映されているので、このまま使っても問題はなさそうですが、これではリンク先に上手く誘導できませんよね。
私がユーザーの立場だったら、「おいおい、このリンク大丈夫なんか？」って思っちゃいます。
ヨメレバ用にカスタムすると
そこで基本はカエレバでカスタマイズしたCSSを使いつつ、ショップリンクのボタンはヨメレバ用に変更します。
ベースとなるコードはすでにある状態なので、あとは多少のコードを追加するだけでこのような商品リンクが出来上がります。
これなら「Amazon」「Kindle」「楽天ブックス」がちゃんと案内できます。
ヨメレバでは他にも「楽天kobo」「honto」「紀伊國屋書店」など、書籍に特化したショップリンクが使えるので、カエレバと併用するのがオススメです。
オリジナルリンクのCSSコード
ヨメレバのリンクを作成していきますが確認として、私がカエレバでデザインしたCSSコードがベースなので、まずは以下の記事を参考にコードを追加して下さい。
| 参考：カエレバの商品リンクを自分好みのデザインにカスタマイズする方法 |
また、コードを追加するときにはカエレバとヨメレバにCSSが反映するよう、以下のように追加していきましょう。
.booklink-box, .kaerebalink-box{
}
「booklink」の方がヨメレバのリンクのこと意味しています。
ここまで準備ができたら、オリジナルのヨメレバ用ショップリンクを作成していきます。
style.cssに追加する
ワードプレスの子テーマにある「style.css」に以下のコードを追加しますが、自分のわかりやすい場所にコピー&ペーストして下さい。
.booklink-link2>div {/*ヨメレバのボタンリンク*/
float: left;/*ボタンを横並び*/
width: 20%;/*ボタンの横幅*/
min-width: 125px;/*ボタン内の横幅*/
margin-left: 60px !important;/*ボタンの間隔*/
}
.booklink-link2 a {/*ボタン内のテキストなど(ヨメレバ)*/
display: inline-block;/*ブロック要素で指定*/
color: #fff;/*文字色*/
font-weight: bold;/*文字を太字に*/
font-size: 15px;/*文字サイズ*/
text-decoration: none;/*下線なし*/
height: 30px;/*ボタンの高さ*/
width: 100%;/*ボタンの横幅*/
line-height: 30px;/*リンク文字の位置*/
transition: 0.3s;/*色が変化する秒数*/
box-shadow: 0px 5px 4px -2px #a0a0a0;/*影をつける*/
}
.shoplinkkindle a{/*kindleボタンのみ*/
border: 2px solid #007dcd;/*枠線の太さ・色*/
background-color: #007dcd;/*背景色*/
border-radius: 5px;/*ボタンの角の丸み*/
}
.shoplinkkindle a:hover{/*kindleボタンのみ*/
color: #007dcd;/*文字色*/
background-color: #fff;/*背景色*/
}
リンクボタンの幅や間隔、配色やマウスホバー時の変化などは、お好みのデザインに変更されて使ってみて下さい。
ここでは「kindle」に対応したコードだけになるので、もし他のショップリンクも追加したい場合は、以下のショップリンク用のコードから好きなものを追加していきましょう。
.shoplinkrakukobo /*楽天kobo*/ .shoplinkbk1 /*honto*/ .shoplinkehon /*ehon*/ .shoplinkkino /*紀伊國屋書店*/ .shoplinktoshokan /*図書館*/
また、「Amazon」と「楽天」に関してはカエレバとヨメレバ共通になっているので、特に変更する必要はありません。
ただ、コードの中にはすべてのショップに共通して使っているものがあるので、今回で言えば「kindle」を追加したので、共通コードはこのように変更する必要があります。
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle {
}
「.shoplinkkindle」がkindle用のものなので、これを追加することを忘れないようにしておきましょう。
スマホ用のコード
スマホ用としてカエレバで使っているコードの中に、ヨメレバにも対応するよう以下のコードを追記して下さい。
.booklink-link2>div {/*ヨメレバのボタンリンク*/
width: 90%;/*ボタンの横幅*/
margin: auto !important;/*ボタンを中央に*/
}
「kindle」のショップリンクの追加も忘れずに！
これでスマホでヨメレバの商品リンクを表示させると、このようになるはずです。
以上でヨメレバ用のオリジナルリンクは完成となります。
ヨメレバのカスタムまとめ
Amazonや楽天のアフィリエイトをしていたら、本の紹介をする機会も多くなると思いますし、そんな時にはヨメレバが便利ですよね。
特に本が好きなユーザーにとっては、色々なブックリンクがある方が使いやすいでしょう。
カエレバと合わせて活用していけば、上手く商品を紹介していくことができるようになるので、リンクデザインもカスタマイズして成果に繋げていきましょう。
| 合わせて読んでほしい |
