ブログパーツ「トマレバ」の利用方法

サイト作成の覚書
記事内に広告が含まれています。

旅館やホテルといったアフィリエイト広告のブログパーツを、簡単に作成できる「トマレバ」の導入方法からカスタマイズ方法まで、一から書いておきます。

トマレバをサイトに表示するまで
  • STEP1
    バリューコマースに登録する
    アフィリエイトASPである「バリューコマース」に登録します。
  • STEP2
    提携申請を行う
    バリューコマースの審査を通過したら「楽天トラベル」等、旅行サイトに提携申請を行います。
  • STEP3
    「sid」と「pid」を確認する
    サイトのsidと、それぞれの提携先のpidを確認します。
  • STEP4
    トマレバに登録する
    「トマレバ」のサイトでユーザーデータを入力して登録します。
  • STEP5
    デザインをカスタマイズする
    ブログパーツのデザインをCSSでカスタマイズします。
  • STEP6
    ブログパーツを作成し貼り付ける
    「トマレバ」のサイトで紹介したい宿を検索し、ブログパーツを作成し、作成されたコードをサイトの任意の場所に貼り付けて表示します。

以上、ちょっと手順が多いですが、STEP1からSTEP5までは、一度設定してしまえばOKです。

あとは、毎回STEP6を繰り返すだけになります。

スポンサーリンク

トマレバとは

トマレバとは自分のサイトでホテルや旅館を紹介するためのブログパーツです。

自分が紹介しようと思った宿の旅行サイトへのリンクを簡単に表示できるものです。

トマレバでは「楽天トラベル」「じゃらん」「JTB」「Knt(近畿日本ツーリスト)」「一休」「るるぶ」「Yahoo!トラベル」といった7つの旅行サイトを利用することができます。

トマレバの他に、商品紹介用の「カエレバ」、書籍紹介用の「ヨメレバ」があります。

基本的な使用方法は一緒です。

最終的には、以下のようなブログパーツを、自分のサイトの好きなところに表示できるようにするところまでを記事にします。

STEP1 バリューコマースにサイトを登録する

バリューコマースは、トマレバで利用できる7つの旅行サイトと提携可能です。

サイトの審査に通れば、7つの旅行サイトは即時提携可能ですので、すぐにアフィリエイト広告を貼り付けることができます。

サイトの登録方法

バリューコマースのサイトにアクセスし、一番下にある「無料会員登録してアフィリエイトを始める」をクリックします。

バリューコマース アフィリエイト公式サイト

「メールアドレス」、「契約者情報」、「サイト情報」、「口座情報」など必要事項を入力し、登録します。

登録後、「アフィリエイト参加申込みのご確認」という件名のメールが届きます。

メールの内容は以下のような感じです。

サイト運営者 様

この度は、バリューコマースアフィリエイトプログラムにお申込みいただきましてありがとうございます。

「サイト名」

お申込み内容に基づいて弊社にて適性審査を行い、後日メールにて審査結果をお知らせいたします。

<審査結果のご連絡>
他アフィリエイトサイトの申込み状況により、お時間を頂戴する可能性がございますが、遅くとも~3営業日以内にはご連絡となります。

無事、審査に通過すると「プログラム開始のお知らせ」という件名のメールが届きます。

サイト運営者 様

バリューコマースアフィリエイトプログラムご参加審査結果のお知らせです。

厳正な審査の結果、お申込みいただきました下記サイトのバリューコマースアフィリエイトプログラム参加が承認されました。

-----------------------
ご登録サイト名:「サイト名」
(URL)
-----------------------

以下の手順に従って管理画面にログインし、広告掲載を開始しましょう。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1.広告主と提携し、広告を貼ってみましょう
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
2.気軽な自己アフィリエイトでさっそく報酬GET!━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

本メールが届き次第、広告主である、旅行会社と提携します。

STEP2 旅行会社との提携

私は以下の5社と提携しました。

  • じゃらん
  • JTB
  • 一休
  • るるぶ
  • Yahoo!トラベル
hamaちゃん
hamaちゃん

「楽天トラベル」はもしもアフィリエイトで提携しています。

バリューコマースの審査通過後、バリューコマースのサイトにて「アフィリエイトサイト会員の方」の欄にメールアドレスとパスワードを入力し、ログインします。

メニューの中から「広告」→「詳細検索」のプログラム検索で、

カテゴリー:「旅行」
サブカテゴリー:「国内ホテル」

と検索すれば、出てきます。

ただ、目的外の広告主もたくさん出てきますので、探すのが大変であれば、「キーワード」欄で、旅行会社名を入力して一つづつ検索する方法でも一案です。

楽天トラベルを含めた、上記6社は即時提携可能です。

「sid」と「pid」を確認していきます。

STEP3 「sid」と「pid」を確認する

「sid」と「pid」は、広告リンクを作成することで確認できます。

「sid」とは、サイトのIDを示していますので、一つのサイトに一つのIDになります。

「pid」とは、広告スペースのIDになりますので、広告主ごとに異なります。

それぞれの旅行会社名の右側にある「広告素材を選ぶ」を選択します。

どの広告でも良いので、「広告を作成」を選択します。

すると、その下に、以下のような広告コードが表示されます。

<script language=”javascript” src=”//ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=1234567&pid=123456789“></script>(以下省略)

「sid」は7ケタ、「pid」は8ケタのコードになっていますので、これをメモしておきます。

hamaちゃん
hamaちゃん

Excelなどで一覧表を作っておくと便利かと思います。

サンプルを貼り付けておきますのでご参考まで。

「sid・pid」一覧表

これと同じように他の旅行会社のコードを確認します。

STEP4 トマレバに登録する

自分のブログのsid、提携する旅行会社すべてのpidを確認したら、トマレバのサイトでユーザーデーターを入力します。

上記URLの下の方に「ユーザーデーター入力」欄があります。

サイト名と各旅行会社の欄にsidとpidを入力します。

「sid」はサイトIDですので、すべて同じものが入ります。

最後は忘れずに保存をクリックします。

これで最低限の設定は完了です。

紹介したい宿をブログパーツにすることができるようになりました。

これでOKであれば、STEP5は不要ですが、枠線を好きな色に変えたり、ボタンの表示を変更したりなど、スタイルシートを使ってカスタマイズします。

STEP5 デザインをカスタマイズする

スタイルシート(CSS)は、もちろん自分で作成することもできますが、先人の方々が様々なスタイルシートを作成してくれてますので、それを利用させてもらいます。

以下、Googleから検索できますので、自分の好みにあったCSSを選択するのが良いと思います。

「トマレバ カスタマイズ」で検索する。

当サイトでは、Yoshiさんが運営する「RoughLog(ラフログ)」で公開しているスタイルシートを利用させてもらいました。

RoughLogさんで公開しているCSSをコピーし、貼り付けます。

Cocoonの場合、管理画面左側メニューの「外観」→「カスタマイズ」→「追加CSS」を選択します。

左側下部にコピーしたCSSを貼り付けて公開をクリックして完了です。

これですべての初期設定が完了しましたので、ブログパーツを作成します。

STEP6 ブログパーツを作成する。

トマレバのサイトにてブログパーツを作成します。

サイトの一番上、「宿・ホテル名キーワード:」欄に入力して検索をクリックします。

サイト下に検索結果が表示されるので、「ブログパーツを作る」をクリックします。

「画像+リンクリスト ブログパーツ生成」欄にて設定を行います。

RoughLogさんのCSS利用を前提とした設定は以下のとおりです。

  • デザイン:amazlet風-2(cssカスタマイズ用)
  • 画像サイズ:150px(カエレバ、ヨメレバでは「小」)
  • 「で購入」「で探す」などの文言:なし

更新をクリックするとブログカードのコードができますのでコピーします。

コピーしたコードを自分のサイトの任意の場所に貼り付けて完成です。

完成後の姿です。

さいごに

以上です。

説明が長くなりましたが、STEP1からSTEP5までを一度設定してしまえば、あとは毎回STEP6だけとなりますので、非常に簡単に宿を紹介できるブログパーツが完成します。

  1. バリューコマースに登録する
  2. 提携申請を行う
  3. 「sid」と「pid」を確認する
  4. トマレバに登録する
  5. デザインをカスタマイズする→ここまでは最初だけ
  6. ブログパーツを作成して貼り付ける

今回解説した「バリューコマース」の他、「もしもアフィリエイト」を利用すると様々な広告をまとめて簡単に紹介することができます。

また、HTMLやCSSの基本的なことを知っておくと、ブログパーツに限らずサイトデザインの幅が広がると思います。

まずは「HTMLクイックリファレンス」が参考になるかと思います。

ブログランキングに参加しています。
↓ご参考になりましたらクリックお願いします↓
ブログランキング・にほんブログ村へ

コメント