「ホテル紹介コード生成システム」共通の操作方法と注意点

これは、「ホテル紹介コード生成システム」全般の操作方法をご説明するためのマニュアルです。

★「ホテル紹介コード生成システム」とは

楽天トラベルで各地のホテルをご紹介する際に利用できるアフィリエイトコードを生成するためのシステムです。

リリィは今までにも様々なパターンの楽天トラベル用アフィリツールを作成して、無料でみなさんにお役立ていただいております。

一般に楽天アフィリを実践している方は、ご自分のブログに、商品に関連した情報や旅行の体験記などを書いて、そのご紹介リンクを貼り付けます。

ただ、楽天市場の商品と違って、楽天トラベルでのホテル紹介は、そのアフィリエイトリンクの作成が非常に面倒で時間がかかるというのがネックです。

そこで、この面倒臭さを排除し、一瞬でコードを生成できるようにしたのが、このシステムです。

みのごりさんが主催する「システムアフィリエイト」「オートパイロット」の企画で、無償配布しているものの共通操作編ですので、本篇マニュアルをお持ちの方がご参照ください。

【第１弾】＝楽天トラベルの基礎編（基本構成と稼ぐコツ）
【第２弾】＝楽天トラベルの実践編（テンプレートと裏技）
【第３弾】＝楽天トラベルのツール（おすすめホテル３選）編
【第４弾】＝楽天トラベルのツール（楽パック）編
【第５弾】＝楽天トラベルのツール（ホテル詳細のまとめ表）編
【第６弾】＝楽天トラベルのツール（レーダーチャート＆口コミリンク）編
＆
【メルマガ登録時】＝ JSコード生成システム（楽天の関連商品30個掲載システム）

この【第３弾】～【第６弾】、および【メルマガ登録時】にお渡ししている「JSコード生成システム」がその対象となります。

１．ホテル番号の調べ方

楽天トラベルに加盟しているホテルは、必ず楽天の「ホテル番号」を持っています。
リリィの提供する「楽天トラベル」系のツール【第３弾】～【第６弾】では、この番号を入力してコードを取得しますので、この「ホテル番号」が必要です。

その調べ方はとても簡単なので、以下ご紹介しますね。

（１）「楽天トラベル」のトップページに行きます。

（２）下方向に少しスクロールすると、下図のような「検索欄」が表示されます。

ここで、「ハウステンボス」などとキーワードを入力して、「検索」ボタンをクリックします。
ホテルの正式名称「ホテルオークラJRハウステンボス」がわかっていれば、それを直接入力してもいいですし、「ハウステンボス」のように地域やスポット名から検索してもよいでしょう。

（３）メインエリアに１軒または複数軒のホテルが表示されますので、目的のホテルを見つけて、その名称をクリックします。

（４）すると、そのホテルのトップページが表示されます。

（５）このページのURL欄 に注目します。

どのホテルも、そのトップページは

の形式のURLになっています。

この赤文字部分（２～７桁の数字）がそのホテルの「ホテル番号」です。

トップページでは、２つ同じ数字が並んでいるので、１つ分だけをコピーしてください。
その他のページでは、（２～７桁の数字）が１つの場合もありますが、その場合には、その番号をコピーしてください。

この番号をツールの「ホテル番号」欄に貼り付け送信ボタンをクリックします。

すると、それぞれのツールの結果が表示されます。

２．コードのコピーと貼り付け方

◆ コードのコピー

リンクコードが生成されたら、それをあなたのブログにコピペします。

（１）画像の下にある「コードをコピー」ボタンをクリックします。

すると、下図のように「コピーしました。」という文字が出て、ソースコードがコピーされます。

◆ ワードプレスへの貼り付け

次に、ブログ記事の中に、この画像を貼り付けていきましょう。

（２）ブログ記事の中で、この画像を貼り付けたい位置をクリックします。

（３）コードを貼り付けします。

このときの操作方法は以下の通りです。
、

テキストモードを利用している場合には、そのまま「貼り付け」
ビジュアルモードを利用している人は、下記の </> ボタン（「HTML挿入」ボタン）をクリックして、表示される枠内に「貼り付け」をします。

ボタンが１行分しか出ていないときには、「ツールバー切り替えボタン」をクリックして、３行表示させてから、</> ボタンをクリックしてください。

ブロックエディタを利用している場合には、まず「黒い＋印」をクリックし、そこに表示されるパーツから「クラシック」を選びます。（クラシックがない場合は「すべて表示」をクリックすると出てきます。）

すると、前ページのビジュアルモードのボタン類と同じものが表示され、ビジュアルのまま表示されますので、操作がしやすいですよ。

前ページの図の </> ボタン で、コードを貼り付けてください。

ここで、「カスタムHTML」など他のボタンを利用するとソースコードのままだったり、表示が崩れますので、ご自身のエディタ環境に合わせてご利用ください。

個別の「ブロック化」も不要です。

上記はCocoonの例ですが、他のテーマをご利用の方も同等の操作で行ってください。

このとき、

右クリックで「貼り付け」をクリックする
「Ctrl」キーを押しながら「V」キーを押す

どちらの操作も、同じ「ペースト（貼り付け）」の操作です。

慣れているものでやってください。

すると、ビジュアルモードではその場で、このバナーの表示が確認できます。

テキストモード等では、プレビューをしてください。

◆ Javascriptツール特有の注意点

第３～６弾のツール、および、メルマガ登録時にお渡ししている「JSコード生成システム」については、上記の方法で簡単にワードプレスに反映できます。

ただ、

【第１弾】＝楽天トラベルの基礎編（基本構成と稼ぐコツ）
【第２弾】＝楽天トラベルの実践編（テンプレートと裏技）
【第３弾】＝楽天トラベルのツール（おすすめホテル３選）編
【第４弾】＝楽天トラベルのツール（楽パック）編
【第５弾】＝楽天トラベルのツール（ホテル詳細のまとめ表）編
【第６弾】＝楽天トラベルのツール（レーダーチャート＆口コミリンク）編
＆
【メルマガ登録時】＝ JSコード生成システム（楽天の関連商品30個掲載システム）

これらのツールのうち、

【第６弾】＝楽天トラベルのツール（レーダーチャート＆口コミリンク）編
【メルマガ登録時】＝ JSコード生成システム（楽天の関連商品30個掲載システム）

については、「JavaScript」というプログラミング言語で書かれているため、他のツールとは違って２つの注意点があります。

それは

「編集」画面では表示されない
１記事に利用できるのは１か所のみ

というJavaScriptによる制約ですが、実質何も困ることはありません。

JavaScriptは実際の表示画面でのみ起動できるプログラムですので、ワードプレスでの「編集画面」のままでは表示することはできません。

代わりに

のような四角いマークだけが表示されますが、ご安心ください。

ワードプレスに貼り付けた際には一度「下書き保存」をして「プレビュー」してみましょう。

プレビュや読者が実際に見る実画面では、JavaScriptが起動され、正しくレーダーチャートや関連商品一覧が表示されます。

また、１記事で利用できるレーダーチャートや関連商品一覧は、それぞれ１か所のみとなります。

【第６弾】＝楽天トラベルのツール（レーダーチャート＆口コミリンク）編
【メルマガ登録時】＝ JSコード生成システム（楽天の関連商品30個掲載システム）

での注意点はそこだけで、特に使用に関しての問題等はありません。

ですので、今までのツール同様、安心してご利用くださいね。

【ご注意】

このコードは、非常に精密に作られています。
基本、貼りつけたらそのままで利用し、修正をしないでご利用ください。
Javascripを利用したツールでは、ワードプレスの編集画面で前述のマークだけが表示されます。
それでもプレビュー画面や実際の投稿画面ではバランスよく収まったレイアウトで表示されますのでご安心ください。
Javascripを利用したツールでは、１記事に利用できるのはそれぞれ１か所です。
その他のツールは、１記事に複数個所利用できます。
目に見えない制御コードもありますので、削除する場合には「テキストモード」で確実にコード全体を削除してください。
万一、レイアウトが大きく崩れてしまったような場合は、サポートします。