もしもアフィリエイト

ヨメレバカエレバをカスタマイズ!CSSを編集して、ボタンを作る方法

こんにちわ! テンパです。

 

ヨメレバカエレバって、とても便利ですよね。

ヨメレバ・カエレバを使うだけで、1つの広告にAmazonと楽天のアフィリエイト広告を同時に載せることができます。

こんな広告が簡単に作れてしまいます。

【ヨメレバ・カエレバ】1つの広告内にAmazonと楽天の広告を同時に表示する方法商品の紹介グログでAmazonと楽天の広告の両方を載せておくと、閲覧しているユーザーはショップの比較ができて、とても便利ですよね。しかし、同じ商品の広告をAmazonと楽天に分けて、2つ並べると少し見栄えが気になります。そこで、今回はヨメレバ・カエレバを使って、1つの広告内にAmazonと楽天のアフィリエイト広告を同時に表示する方法をご紹介します。...

 

しかし・・・

普通にヨメレバ・カエレバを使うだけだと、広告内にAmazonと楽天のリンクはできるものの、このようにリンクがボタンとして表示されません。

 

下の広告のように、Amazonや楽天のリンクをボタン化するためには、CSSで広告をカスタマイズする必要があります

そこで今回は、CSS(スタイルシート)を編集して、ヨメレバ・カエレバの広告にボタンを作成する方法をご紹介します。

ヨメレバ・カエレバの広告にボタンを作成する方法

CSSの編集する方法

チー

CSSって、なんか難しそうなの! 

いきなり、CSSといっても、どこをどのように編集していいかわからないと思います。手順は、後ほどご紹介します。

上の広告のように、2つのショップをボタン化するコードを載せておきますので、コピー&ペーストして使って下さい。

/*--------------------------------------
ヨメレバ・カエレバ
--------------------------------------*/

.booklink-box, .kaerebalink-box{
width:85%;
margin: 1em 0 1em;
padding: 5%;
border:double #d2d7e6;
overflow: hidden;
font-size:small;
border-radius:2px;
}
.booklink-image, .kaerebalink-image{
margin:0 0 15px 0;
}
.booklink-image img, .kaerebalink-image img{
display:block;
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info{
text-align:center;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name{
font-size:16px;
margin-bottom:14px;
line-height:1.2em;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:8pt;
margin-top:10px;
line-height:120%;
}
.booklink-powered-date, .kaerebalink-detail{
margin-bottom:15px;
}
.booklink-link2, .kaerebalink-link1{
margin-top:20px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom, .shoplinkrakukobo{
width:90%;
height:15px;
overflow:hidden;
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color:#ffffff;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
margin:0  auto 5px auto;
padding:10px 0px;
text-align:center;
}
.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover, .shoplinkrakukobo:hover{
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
}
.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active, .shoplinkrakukobo:active{
position:relative;
top:1px;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkrakukobo a{
display:block;
cursor:pointer;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
}
.shoplinkamazon a{
color:#FF9901;
}
.shoplinkrakuten a{
color:#c20004;
}
.shoplinkkindle a{
color:#007dcd;	
}
.shoplinkyahoo a{
color:#7b0099;
} 
.booklink-footer{
clear:left;
}
.shoplinkrakukobo a{
color:#c20004;
}

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 600px) {

/*--------------------------------------
600px以上 ヨメレバ・カエレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box{
width: 90%;
margin:20px auto;
padding:20px;
}
.booklink-image, .kaerebalink-image{
margin:0 15px 0 0;
float:left;
}
.booklink-info, .kaerebalink-info{
margin:0;
text-align:left;
}
.booklink-name, .kaerebalink-name{
margin-bottom:24px;
line-height:1.5;
}
.booklink-link2, .kaerebalink-link1{
margin-top:10px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom, .shoplinkrakukobo {
float:left;
width:45%;
margin:15px 1% 0 auto;
padding:10px 0px;
}
.shoplinkyahoo a{
font-size:10px;
} 
}

参考リンクには、他にもいろいろなカスタマイズコードが公開されているので、参考にしてみるとオシャレな広告を作ることができます。


それでは、先ほどコピーしたコードをCSSにペーストします

WordPressを使って、ブログを作成している方は、「外観」→「テーマの編集」から使用しているテーマの「スタイルシート(style.css)」に先ほどのコードをペーストします。

スタイルシート(style.css)を誤って、変更してしまうとブログ全体が壊れてしまう恐れがあるため、追加する前にバックアップをとることをオススメします

WordPress初心者におすすめ!プラグインで簡単バックアップ方法ブログやサイトのバックアップを取ることはとても大切です。プラグイン UpdraftPlus を使えばWordPress初心者でも、、ほぼ1クリックでバックアップとその復元が可能です。今回は UpdraftPlus のおすすめポイント、導入、使い方について、詳しくご紹介します。...
 

自信のない方は、WordPressのテーマなら付随のCSSエディターが付いているので、そこにコードをペーストしましょう。

先ほど同様「テーマの編集」から使用してるテーマの「スタイルシート(style.css)」を開き、上に表示されている「付随のCSSエディター」をクリックします。

 

すると、画面左に「追加CSS」画面が表示されるので、そこにコピーしたコードをペーストし、「公開」をクリックします。

 

これで、CSSの編集は完了です。

ヨメレバ・カエレバの設定方法

次にヨメレバカエレバを開き、赤枠部分を下の画像と同じに設定し(必ずデザインはamazlet風-2を選択して下さい)、「更新」をクリックし、コードをコピーしましょう。

ここのプレビューでは、Amazonと楽天のリンクがボタン化されません。

 

最後にコードをブログに貼り付け、プレビューを見るとAmazonと楽天のリンクがボタン化されて、表示されます。

※注意※

今回、CSSに追加したコードはボタンを二つ表示するものなので、ショップを3つ以上チェックをいれるとうまく表示されません。

3つ以上のボタンを作りたい場合は先ほどの参考リンクを確認して下さい!

まとめ

いかがだったでしょうか?

CSSにコードを追加する作業は、意外に簡単だったかと思います。これで、ヨメレバ・カエレバの広告が上手く、ボタン化されたのではないかと思います。

いろいろなカスタマイズコードが公開されているので、それを参考にして自分独自のオシャレな広告を作ってみて下さい。

参考になると、幸いです。