HTML/CSS

楽天トラベルのカスタマイズページをできるだけ簡単に手早くつくる方法をまとめてみた

楽天トラベルをつくりたい人
楽天トラベルのカスタマイズページを作ってみたいと思ってはいるんだけど、どうやってつくったらいいかよくわからないんだよなぁ・・

今回の記事ではこんな悩みにお答えします。

Sponsored link

楽天トラベルのカスタマイズページってどんなもの?

ビジネスマンの出張には必ずと言っていいほど使用されている楽天トラベル。

楽天トラベル内の各ホテルのページには、アカウント情報を持っていれば自由につくり込む事ができる、『楽天トラベルカスタマイズページ』という機能があります。

例えばこんなページ

どちらもデザインが全然違いますよね。

それもそのはず。

『楽天トラベルカスタマイズページ』は、HTMLとCSSを使う事で自由にデザインする事ができるのです。

↓↓ HTMLとCSSについてはこちらの記事も参照ください。 ↓↓

『楽天トラベルカスタマイズページ』のルール

自由にデザインできる『楽天トラベルカスタマイズページ』ですが、ページをつくるにあたり下記のようなルールがあります。

  1. 横幅は最大950px
  2. JavaScript (jQuery) は使用不可
  3. 外部リンクは埋め込み不可
  4. 画像やCSS読み込みはhttps であること

まず横幅950pxは、先ほどのホテルの例でいうとこの画面。

左側が検索フォームになっていて、右側のホテルの詳細の幅が950pxで固定になっています。

最近は横幅をいっぱいに使ってレイアウトするホテルが多いようです。

2番のJavaScriptに関しては、使えるようにする抜け道もあるようなのですが、今回は省きます。

3番の外部リンクはそのままの意味で、Facebookページやホテルのホームページにはジャンプできないようになっています。(ファイルを保存するときにチェックがかかります。)

4番のhttpsは2017年頃にできたルールで、画像やCSSを外部に置いておく場合は https化された場所に保存する必要があります。(こちらもファイルを保存するときにチェックがかかります。)

画像を楽天トラベルにアップすると、サイズによっては自動で圧縮がかかり、画像がボケてしまうので、外部サーバーに保存したほうが無難かなと思っています。

これらを踏まえ、何度か『楽天トラベルカスタマイズページ』をつくっていたのですが、何度も作っているうちに、

アオキ
スライドショーってどうやってつくるんだったっけ・・
アオキ
メニューの作り方ってどうだっけ・・
アオキ
画像を3つ横に並べたいんだけど・・・
アオキ
明朝体とゴシック体の指定の仕方はどうだっけ・・

といった事を毎回のように調べていたので、よく使う機能だけをしぼったテンプレートを作ってみる事にしました。

Sponsored link

『楽天トラベルカスタマイズページ』のテンプレートを作ってみた

ページはこちらです。

楽天トラベルカスタマイズページ用のテンプレート

HTMLと、CSSと、画像サイズを書いた画像ファイルで構成していまして、

右クリックで『ページのソースを表示』を押してもらうと、HTML、CSSそれぞれ確認いただくことができます。

また、画像ファイルはこちらにまとめてダウンロードできるようにもしておきます。

画像ファイル
※ちょっと不格好ですがご愛嬌でお願いします。

スライダーやメニュー、横並び、マウスホバー、フォントの指定 などを項目ごとにまとめています。

ここからは、多少のHTMLとCSSの知識が必要になるので、もしHTMLとCSSがまったくわからない、という場合はこちらの記事を参照してみてください。

↓↓ 

まずはHTMLの説明ですが、

“body” の後に、
!– ここからコピー開始 —

と記載があります。

楽天トラベルの仕様で、楽天トラベルの内に “bodyがすでに存在し、 改めて“bodyを書く必要がないので、“bodyタグを省いてコピーするようにしてください。

また、
!– ここからコピー開始 —
のすぐ下でCSSを読み込ませています。

普通のホームページなら、の後からCSSを読み込ませる事はまずないと思うのですが、こちらも楽天トラベルの仕様でこの場所でOKです。

CSSを読み込ませる場合は、style.css というファイル名は避けたほうが無難です。
こちらも楽天トラベルで使用しているのか、まれにバッティングを起こすようです。

続いて、
ulで囲った箇所はそれぞれにジャンプするだけなのではしょって、

sectionタグで囲った範囲を使用するようにしてください。

CSSの方で、id=”r_wrapper” で囲った範囲に max-width:950px をあてています。

これで、横幅950px ルールを守った状態で設定する事ができます。

次は、『楽天トラベルカスタマイズページ』のトップ画面に最もよく使われるであろうスライドショーについて。

必要なソースは下記です。

See the Pen rakuten_travel_customize_3 by suica (@suica) on CodePen.

HTML とCSSをそのままコピーし、画像だけ差し替えてもらえばOKです。

画像の枚数は6枚を想定しているのですが、もし画像の枚数を減らしたいという事であれば(例えば6枚を4枚にしたいなら)、

HTML側のdivタグを2つ分減らして、

CSS側の .rslider_pic img の箇所の、 30s の箇所をそれぞれ20s にすればOKです。

(今回は5秒ごとに切り替えで、4枚なので 5×4 = 20s の設定にする必要があります。)

続いて、メニュー6つ。こちらはHTMLだけで実現しています。

See the Pen rakuten travel customize template_3 by suica (@suica) on CodePen.

他にも、横に4つ並べる場合、横に3つ、横に3つ並べつつサイドを少し開けるなど、実際にページを作っていく中でよく使う要素をまとめてみました。

もちろん実際に『楽天トラベルカスタマイズページ』を作成する場合には、

フォトショップなどを使った画像加工、画像のリサイズなどが必要にはなってきますが、

レイアウトを調べたり、毎回テストしたりといった時間をできるだけ効率化して、スピードアップを図っていく事で、

ちょっとずつですが作業時間短縮ができてくるので、

普段からよく使う機能などはまとめておくと、次回からスピードアップが図れますね。

さいごに

実際に『楽天トラベルカスタマイズページ』を作成する機会はあまりないと思ったりはしますが、

HTML、CSSをつかってデザインする、レイアウトするといった流れは一般のホームページも同じですので、

よく使う機能などはできるだけまとめて、効率化を意識していくことで、はじめは面倒くさくても、徐々にスピードアップしてくると実感できます。

ちょっとずつスキルアップして、無駄なく仕事を進めていきたいものですね。

ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m
アオキのツイッターアカウント

created by Rinker
¥2,138 (2019/03/20 09:14:48時点 Amazon調べ-詳細)
Sponsored link

関連記事

  1. HTML/CSS

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】

    先日とあるコミュニティで質問があがりまして。教えたがり性分の身…

  2. HTML/CSS

    ホームページを作成して売上をあげるために知っておきたい事

    今回の記事ではこんな悩みにお答えします。ホームページって稼…

  3. HTML/CSS

    レスポンシブサイトの作り方をめっちゃわかりやすく書いてみた【Bootstrap4】【初心者向け】

    そもそも『レスポンシブサイト』って何?『レスポンシブサ…

  4. HTML/CSS

    TCDテンプレート『MAG』の見出し(h1,h2)の設定は変更しよう〜SEO重視するなら変更必須〜

    TCDといえばホームページ業者やブロガーならほとんど知っているんじゃ…

  5. HTML/CSS

    【Sass】の書き方をアップデートすべくbulmaフレームワークを読み解いてみる【初心者向け】

    ホームページなりWebサービスを作ろうと思ったらもれなく『HTML…

  6. HTML/CSS

    【初心者向け】パソコンでホームページをつくる5つの方法とサーバー4種類をまとめてみました

    子供向け無料プログラミング寺子屋『CoderDojo熊本』第1回のアン…

Sponsored link

最近の記事

アーカイブ

Sponsored link
  1. PHP

    【PHP】配列や連想配列が覚えづらかったので学校に例えてみた【初心者向け】
  2. Laravel

    【Laravel5.5】Webアプリケーションを作るためのゆるめの環境構築編【N…
  3. Vue.js

    【Vue.js】かっこいいフォトギャラリーを発見したのでソースを読んでみた。カテ…
  4. HTML/CSS

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  5. Django

    【Django】【Laravel】【RubyOnRails】を比較してみた【初心…
PAGE TOP