楽天トラベルのPC版のカスタマイズページ用テンプレートをローカルビジネスのお宿さん向けに作ってみました。
既に業者に頼んでるお宿さんが多いと思いますが、新規に楽天トラベルに参画される施設や、業者に頼んでるけど自分で更新したい個人事業主の方の参考になるようにベースとなるHTMLとCSSを無料テンプレートとして公開します。
サンプル
まずはサンプルのデモページをご覧下さい。
====
1カラムシングルページ（コンテンツ幅950px）です。楽天トラベルのカスタマイズページは基本的にTOPページしか見られていないと思います。詳細が知りたいならぐぐって公式サイト見ますしね。
ですので、1ページで概要が分かるような構成が良いと思います。
テンプレートファイル
テンプレートファイルはzipで用意しました。こちらからダウンロードして下さい。
テンプレートには画像、背景素材は含まれておりません。CSSや画像のリンク先をご自分の画像やファイルを置いたサーバのものに書き換えて下さい。
使い方
rakuten.zipの中にはrakuten.html、style.css、 imgフォルダ（空）が入っています。imgフォルダに使いたい画像ファイルを入れてレンタルサーバーなどにrakutenフォルダごとアップロードします。このとき、sample.htmlファイルは抜いてアップロードした方が良いかもしれません。（そのサーバでは使わないので）
rakkuten.htmlにはheadの記述がありますが削除して下さい。これはテスト様にサーバで確認するためです。楽天トラベルの実際のカスタマイズページにはCSS読込以下を貼り付けて下さい。
sample.htmlの編集をします。CSS読込先パス、リンク先URLや画像URL、文章を入れ替えて下さい。
背景の設定
style.cssには以下のように#wrapに背景を指定しています。
/* CSS rakuten customize */ #wrap { font-size: 16px; color: #454545; line-height: 1.6; font-family: "Roboto Slab", Garamond, "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; width: 950px; background-image: url(img/bg.png); background-position: left top; background-repeat: repeat; }
背景に画像を使う場合はimgフォルダにbg.pngという名前で背景画像を置きアップロードして下さい。
背景に色を指定する場合はbackground-imageプロパティを以下のように変更してください。
#wrap { background: #カラーコード; }
CSSと画像のアップロードが完了したら、楽天トラベル管理画面＞施設情報の管理＞カスタマイズページの追加からページを作成し、GOLDテンプレートを選びます。
HTML編集画面に編集したsample.htmlをコピペしてページを公開して完成です。
カスタマイズ例
注意事項
2015年8月以降JavaScriptが使えなくなりました。現在使えている施設さんも編集更新すると使えなくなる恐れがあるため、編集前に現在のカスタマイズページはバックアップを取っておいた方が良いです。
個別のカスタマイズについて
テンプレートファイルを見てもよくわからない、HTML・CSSがわからない、HPのサーバへFTPソフトでアップロードするやり方がわからない方はこちらの記事をご参照下さい。
blog.minimal-green.com
blog.minimal-green.com
HPのデザインに合わせたいなど個別のカスタマイズはご相談の上、有償にてお受けします。サイドバーの「お問い合わせ」からメールにてご相談下さい。
（料金目安：トップページ：16000円,その他のページ1ページ：7000円～)
※上記のテンプレートのレイアウトを大幅に変える完全フルカスタマイズは1ページあたり2000円～となります。またバナー画像の制作料は別途お見積させていただきます。
スライダーの追加設置は+5000円となります。
