「ヨメレバ」に「ブックウォーカー」用のボタンを作って表示してみた

パーツを生成

まずはいつも通り、「書籍紹介ブログパーツ ヨメレバ」に行きパーツを生成します。この時、デザインは「cssカスタマイズ用」を選択します。

「ブックウォーカー」のボタン用の要素を挿入する

下記のようにHTMLソースが生成されます。

生成されたHTMLソースの任意の場所に、自前で作成した「ブックウォーカー」用のボタンを記述をします。

<div class="bw">
    <span class="b">B</span><span class="o">O</span><span class="oo">O</span><span class="k">K</span><span class="star">☆</span><span class="w">W</span><span class="a">A</span><span class="l">L</span><span class="kk">K</span><span class="e">E</span><span class="r">R</span>
</div>

バリューコマースでアフィリエイトidが入ったリンクを生成する

次に、ボタンを押下したときに任意のページに遷移させるため、アフィリエイトidが入ったリンクなどを記述します。

ただ、「ブックウォーカー」用のアフィリエイトidを挿入するためには、「バリューコマース」で「ブックウォーカー」と提携する必要があるので、提携をしておきます。

「MyLink」を作る

提携を行った後、「ブックウォーカー」の任意のページへ遷移させるために、「MyLink」を作ります。まずは、バリューコマースの管理画面から「広告プログラム管理」にある「提携済み」を押下します。

提携済みの一覧に「BOOK☆WALKER」が表示されるので、「広告作成」ボタンを押下します。

広告タイプから「MyLink」を押下します。

下記の操作を行って、「MyLink」のコードを取得します。

1. 遷移させたいページのURLを張り付ける。
2. 適当なテキストを記述する。
3. 「MyLinkコードを取得」ボタンを押下する。

コードが生成されるのでコピーを行います。

MyLinkコードは下記のような感じで取得されるはずです。

<a href="//ck.jp.ap.valuecommerce.com/servlet/referral" target="_blank" >
    <img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner" height="1" width="0" border="0">テスト
</a>

遷移させたいページのURLは「ブックウォーカー」内で検索して表示させます。

検索した内容で一覧が表示されるので、該当するものを押下して詳細ページに行きます。

URLバーにURLが表示されるのでコピーします。

「MyLink」で使うURLは上記のように検索して使います。

取得した「MyLink」コードをボタン内に挿入する

取得した「MyLink」コードを、事前に作成しておいたボタンに下記のような感じで挿入します。

<div class="bw">
    <a href="//ck.jp.ap.valuecommerce.com/servlet/referral" target="_blank" >
        <img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner" height="1" width="0" border="0">
        <span class="b">B</span><span class="o">O</span><span class="oo">O</span><span class="k">K</span><span class="star">☆</span><span class="w">W</span><span class="a">A</span><span   class="l">L</span><span class="kk">K</span><span class="e">E</span><span class="r">R</span>
    </a>
</div>

上記で「ブックウォーカー」用ボタンのHTMLは完成です。

css

ボタン内で表示される「BOOK☆WALKER」のCSSは下記のように作りました。

/************************************
** BOOK☆WALKER
************************************/
.bw {
    letter-spacing: 1px;
}

.bw .b {
    color: #00A0E9;
}

.bw .o {
    color: #520000;
}

.bw .oo {
    color: #B5B6B6;
}

.bw .k {
    color: #009944;
}

.bw .star {
    color: #45C5F1;
}

.bw .w {
    color: #E60012;
}

.bw .a {
    color: #F39902;
}

.bw .l {
    color: #B5B6B6;
}

.bw .kk {
    color: #954000;
}

.bw .e {
    color: #83CDD2;
}

.bw .r {
    color: #E4007F;
}

ボタンに記述されている「class=”bw”」は、上記の「.bw」で利用しています。spanで各文字を囲み、カラーを変えています。

文字以外のスタイルなどは、以前ご紹介したものをそのまま利用しています。共通で利用しているスタイルなどは下記のページで確認できます。

噂のブログパーツ、「カエレバ」、「ヨメレバ」が便利なので使ってみた

ブロガーの間でアフィリエイトを簡単にする噂のブログパーツ、「カエレバ」と「ヨメレバ」を使ってみたのでご紹介いたします。「カエレバ」、「ヨメレバ」とは「カエレバ」、「ヨメレバ」は「わかったブログ」というブログを運営されている、かん吉さんという...

www.pc-weblog.com