【無料テンプレート➁：客室ページ編】楽天トラベルカスタマイズページ更新方法【コピペコード有】

こんにちは、カヨです。

【自己紹介】
SEとしてお仕事しています。
楽天トラベルカスタマイズページの作成も担当しています。

今回のお題は、

【楽天トラベルカスタイマイズページの無料テンプレート】
「客室ページ」作ってみました

この記事がとても好評でTOPページの無料テンプレートの記事（【無料テンプレート】楽天トラベルカスタマイズページ更新方法【コピペコード有】）を書きました。引き続き、沢山の方にご覧いただいているため、このページの第二段「客室ページ」編を作成しました。

こんな方に読んでいただきたいと思っています！

✔︎楽天トラベルカスタマイズページを作成したい人
✔︎コードの知識はないけど楽天トラベルカスタマイズページを頑張りたい人
✔︎サーバーから読み込むののではなく楽天トラベルカスタマイズページの記述欄に直接書きたい人
✔︎前回の記事を読んでTOPはできたので、つづいて客室ページを作成したい人

楽天トラベルが今年2023年秋にページデザインの変更をおこなうようです。現在、カスタマイズページ使用者に対してデザイン崩れの注意喚起が出ております。管理画面では新デザインのテストビューも用意されており、この記事に掲載しているコードはテストビューでの表示確認済ですのでご安心ください。

では、客室ページのコードについてみていきましょう！

出来上がりの見た目
フォーマットコード
用意するもの
表示したい画像やテキストを設定する
1. 画像の表示させ方
  1. 表示させたい画像とコードの一致
  2. 画像のパス設定
2. タイトルや文章の変更の編集の仕方
まとめ
関連記事

出来上がりの見た目

※外周を覆っている外枠の線は今回のコードに含まれていません。
※画像はサンプルです。コード内に含まれていません。

フォーマットコード

＜コードを見る＞


<div class="ly__con-rakuten base">



  <!-- トップ画像 -->
  <div class="logo"><img alt="トップ画像" src="https://drive.google.com/uc?export=view&id=1Hc14H5dNqhC4gnbP8rr7ovE4wB8-ZSPd"></div>
  <!-- トップ画像/ここまで -->





  <!-- トップメニュー -->
  <div class="header__nav__list">
      <div class="header__nav__list__item"><a href="" class="el__ho-link">客室</a></div>
      <div class="header__nav__list__item"><a href="" class="el__ho-link">朝食</a></div>
      <div class="header__nav__list__item"><a href="" class="el__ho-link">サービス</a></div>
      <div class="header__nav__list__item"><a href="" class="el__ho-link">浴場</a></div>
      <div class="header__nav__list__item"><a href="" class="el__ho-link">アクセス</a></div>
  </div>
  <!-- トップメニュー/ここまで -->




  <!-- 「客室について」のタイトル -->
  <div class="bl__ttl__base"><h1 class="bl__ttl">客室について</h1></div>
  <!-- 「客室について」のタイトル/ここまで -->




 
  <!-- 客室各部屋紹介１ （SINGLE ROOM / シングルルーム）-->
  <div class="room-type">
 
    <div class="room-type__list">
      <div class="room-type__item">
        <h2 class="room-type__item__ttl bl__ttl">■ SINGLE ROOM / シングルルーム</h2>


        <div class="room-type__item__img"><img alt="客室画像➀" src="客室画像➀のパス"></div>
        <div class="room-type__detail">


          <!-- SINGLE ROOM / シングルルーム：説明文-->
          <div class="room-type__detail__txt">落ち着きのある洋風レトロな部屋です。家具１つ１つにこだわり、さわやかな朝を迎えて頂けるようなカラーを使用。こだわりの家具はSNSへの写真もおすすすめのお部屋です。</div>
          <!-- SINGLE ROOM / シングルルーム：説明文/ここまで-->


          <!-- SINGLE ROOM / シングルルーム：部屋詳細（表）-->
          <div class="room-type__detail__table">
            <div class="def-list">
              <div class="def-list__1"><i class="icon-spa"></i>お部屋の広さ</div>
              <div class="def-list__2">30㎡</div>
            </div>
            <div class="def-list">
              <div class="def-list__1"><i class="icon-spa"></i>ベッドサイズ</div>
              <div class="def-list__2">120㎝</div>
            </div>
            <div class="def-list">
              <div class="def-list__1"><i class="icon-clock"></i>定員</div>
              <div class="def-list__2">1～2名</div>
            </div>
            <div class="def-list def-list__last">
              <div class="def-list__1"><i class="icon-clock"></i>設備</div>
              <div class="def-list__2">バス・トイレ</div>
            </div>
          </div>
          <!-- SINGLE ROOM / シングルルーム：部屋詳細（表）/ここまで-->


        </div>
      </div>
    </div>
   
  </div>
  <!-- 客室各部屋紹介１ （SINGLE ROOM / シングルルーム）/ここまで -->





  <!-- 客室各部屋紹介２ （DOUBLE ROOM / ダブルルーム）-->
  <div class="room-type">


    <div class="room-type__list">
      <div class="room-type__item">
        <h2 class="room-type__item__ttl bl__ttl">■ DOUBLE ROOM / ダブルルーム</h2>
        <div class="room-type__item__img"><img alt="客室画像➁" src="客室画像➁のパス"></div>
        <div class="room-type__detail">


          <!-- DOUBLE ROOM / ダブルルーム：説明文-->
          <div class="room-type__detail__txt">落ち着きのある洋風レトロな部屋です。家具１つ１つにこだわり、さわやかな朝を迎えて頂けるようなカラーを使用。こだわりの家具はSNSへの写真もおすすすめのお部屋です。</div>
          <!-- DOUBLE ROOM / ダブルルーム：説明文/ここまで-->


          <!-- DOUBLE ROOM / ダブルルーム：部屋詳細（表）-->
          <div class="room-type__detail__table">
            <div class="def-list">
              <div class="def-list__1"><i class="icon-spa"></i>お部屋の広さ</div>
              <div class="def-list__2">30㎡</div>
            </div>
            <div class="def-list">
              <div class="def-list__1"><i class="icon-spa"></i>ベッドサイズ</div>
              <div class="def-list__2">120㎝</div>
            </div>
            <div class="def-list">
              <div class="def-list__1"><i class="icon-clock"></i>定員</div>
              <div class="def-list__2">1～2名</div>
            </div>
            <div class="def-list def-list__last">
              <div class="def-list__1"><i class="icon-clock"></i>設備</div>
              <div class="def-list__2">バス・トイレ</div>
            </div>
          </div>
          <!-- DOUBLE ROOM / ダブルルーム：部屋詳細（表）/ここまで-->


        </div>
      </div>
    </div>


  </div>
  <!-- 客室各部屋紹介２ （DOUBLE ROOM / ダブルルーム）/ここまで-->





  <!-- 客室各部屋紹介３ （SINGLE ROOM / シングルルーム）-->
  <div class="room-type">
 
    <div class="room-type__list">
      <div class="room-type__item">
        <h2 class="room-type__item__ttl bl__ttl">■ SINGLE ROOM / シングルルーム</h2>


        <div class="room-type__item__img"><img alt="客室画像➂" src="客室画像➂のパス"></div>
        <div class="room-type__detail">


          <!-- SINGLE ROOM / シングルルーム：説明文-->
          <div class="room-type__detail__txt">落ち着きのある洋風レトロな部屋です。家具１つ１つにこだわり、さわやかな朝を迎えて頂けるようなカラーを使用。こだわりの家具はSNSへの写真もおすすすめのお部屋です。</div>
          <!-- SINGLE ROOM / シングルルーム：説明文/ここまで-->


          <!-- SINGLE ROOM / シングルルーム：部屋詳細（表）-->
          <div class="room-type__detail__table">
            <div class="def-list">
              <div class="def-list__1"><i class="icon-spa"></i>お部屋の広さ</div>
              <div class="def-list__2">30㎡</div>
            </div>
            <div class="def-list">
              <div class="def-list__1"><i class="icon-spa"></i>ベッドサイズ</div>
              <div class="def-list__2">120㎝</div>
            </div>
            <div class="def-list">
              <div class="def-list__1"><i class="icon-clock"></i>定員</div>
              <div class="def-list__2">1～2名</div>
            </div>
            <div class="def-list def-list__last">
              <div class="def-list__1"><i class="icon-clock"></i>設備</div>
              <div class="def-list__2">バス・トイレ</div>
            </div>
          </div>
          <!-- SINGLE ROOM / シングルルーム：部屋詳細（表）/ここまで-->


        </div>
      </div>
    </div>
   
  </div>
  <!-- 客室各部屋紹介３ （SINGLE ROOM / シングルルーム）/ここまで -->





   <!-- 客室各部屋紹介４ （DOUBLE ROOM / ダブルルーム）-->
   <div class="room-type">


    <div class="room-type__list">
      <div class="room-type__item">
        <h2 class="room-type__item__ttl bl__ttl">■ DOUBLE ROOM / ダブルルーム</h2>
        <div class="room-type__item__img"><img alt="客室画像➃" src="客室画像➃のパス"></div>
        <div class="room-type__detail">


          <!-- DOUBLE ROOM / ダブルルーム：説明文-->
          <div class="room-type__detail__txt">落ち着きのある洋風レトロな部屋です。家具１つ１つにこだわり、さわやかな朝を迎えて頂けるようなカラーを使用。こだわりの家具はSNSへの写真もおすすすめのお部屋です。</div>
          <!-- DOUBLE ROOM / ダブルルーム：説明文/ここまで-->


          <!-- DOUBLE ROOM / ダブルルーム：部屋詳細（表）-->
          <div class="room-type__detail__table">
            <div class="def-list">
              <div class="def-list__1"><i class="icon-spa"></i>お部屋の広さ</div>
              <div class="def-list__2">30㎡</div>
            </div>
            <div class="def-list">
              <div class="def-list__1"><i class="icon-spa"></i>ベッドサイズ</div>
              <div class="def-list__2">120㎝</div>
            </div>
            <div class="def-list">
              <div class="def-list__1"><i class="icon-clock"></i>定員</div>
              <div class="def-list__2">1～2名</div>
            </div>
            <div class="def-list def-list__last">
              <div class="def-list__1"><i class="icon-clock"></i>設備</div>
              <div class="def-list__2">バス・トイレ</div>
            </div>
          </div>
          <!-- DOUBLE ROOM / ダブルルーム：部屋詳細（表）/ここまで-->


        </div>
      </div>
    </div>


  </div>
  <!-- 客室各部屋紹介４ （DOUBLE ROOM / ダブルルーム）/ここまで-->





  <!-- 備品について（説明文付き） -->
  <div class="plan" style="margin-top: 3rem;">
    <div class="bl__ttl__base"><h1 class="bl__ttl">備品について</h1></div>
   
    <div class="plan__list">


      <!-- 備品カード -->
      <div class="plan__item">
        <div class="plan__item__img"><img alt="備品画像➀" src="備品画像➀のパス"></div>
        <div class="plan__item__txt">
          <p>１日ルームサービス付きプラン</p>
          <hr style="border: none; border-bottom: 1px solid #dbdbdb;">
          <p>人気のルームサービス１日使い放題プラン！お部屋でお食事、ティータイムを楽しんでいただけます。テレワークでのご利用にも最適です。</p>
        </div>
      </div>
      <!-- 備品カード/ここまで -->


      <!-- 備品カード -->
      <div class="plan__item">
        <div class="plan__item__img"><img alt="備品画像➁" src="備品画像➁のパス"></div>
        <div class="plan__item__txt">
          <p>１日ルームサービス付きプラン</p>
          <hr style="border: none; border-bottom: 1px solid #dbdbdb;">
          <p>人気のルームサービス１日使い放題プラン！お部屋でお食事、ティータイムを楽しんでいただけます。テレワークでのご利用にも最適です。</p>
        </div>
      </div>
      <!-- 備品カード/ここまで -->


      <!-- 備品カード -->
      <div class="plan__item">
        <div class="plan__item__img"><img alt="備品画像➂" src="備品画像➂のパス"></div>
        <div class="plan__item__txt">
          <p>１日ルームサービス付きプラン</p>
          <hr style="border: none; border-bottom: 1px solid #dbdbdb;">
          <p>人気のルームサービス１日使い放題プラン！お部屋でお食事、ティータイムを楽しんでいただけます。テレワークでのご利用にも最適です。</p>
        </div>
      </div>
      <!-- 備品カード/ここまで -->


    </div>
  </div>
  <!-- 備品について（説明文付き）/ここまで -->





  <!-- 備品について（説明分なし） -->
  <div class="plan">    
    <div class="plan__list">
      <div class="plan__item">
        <div class="plan__item__img"><img alt="備品画像➃" src="備品画像➃のパス"></div>
        <div class="plan__item__txt">
          <p>１日ルームサービス付きプラン</p>
        </div>
      </div>


      <div class="plan__item">
        <div class="plan__item__img"><img alt="備品画像➄" src="備品画像➄のパス"></div>
        <div class="plan__item__txt">
          <p>１日ルームサービス付きプラン</p>
        </div>
      </div>


      <div class="plan__item">
        <div class="plan__item__img"><img alt="備品画像➅" src="備品画像➅のパス"></div>
        <div class="plan__item__txt">
          <p>１日ルームサービス付きプラン</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 備品について（説明分なし）/ここまで -->
 


  <!-- フッター（ロゴと住所TEL） -->
  <div class="footer">
    <div class="footer__inner">
      <div class="footer__logo"><img alt="ロゴ" src="ロゴ画像のパス"></div>
      <p class="footer__txt">〒123-4567　東京都新宿区新宿123hogehogeホテル<br>TEL: 000-0000-0000</p>  
    </div>
  </div>
  <!-- フッター（ロゴと住所TEL/ここまで） -->
 




</div>









<!-- スタイルcss（装飾）--------->
<style>


  .base {
    font-size: 15px;
    font-family: YakuHanJP, YuGothic, "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  }


  .base img {
     width: 100%;  
  }


  .base a {
    color: #575555;  
  }


  .ly__con-rakuten {
    width: 950px;
    margin: 0 auto;
  }


  .logo {
    position: relative;
  }


  .logo::after {
    content: "";
    width: 100px;
    height: 100px;
    background: url(フッターロゴ画像のパス) top left / contain no-repeat;
    position: absolute;
    top: 20px;
    left: 20px;
  }


  /* トップメニュー */
  .header__nav__list {
    display: flex;
    justify-content: space-between;
    margin: 1rem 0;
  }


  .header__nav__list__item {
    width: calc(100% /5);
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #bdbdbd;
    font-weight: 700;
  }


  .header__nav__list__item:first-child {
    border-left: 1px solid #bdbdbd;
  }
 
 
  /* 表 */
  .room-type__detail {
    display: flex;
    margin-top: 1.5rem;
  }
 
  .room-type__detail__txt {
    width: 50%;
    margin-right: 3rem;
  }


  .room-type__detail__table {
    width: 50%;
  }
 
  .def-list {
    border-top: 1px solid #999;
    display: flex;
  }


  .def-list__last {
    border-bottom: 1px solid #999;
  }


 
  .def-list__1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    min-width: 30%;
    background: #ededed;
    padding: 0.5em;
    line-height: 1.5;
  }
 
  .def-list__2 {
    display: flex;
    align-items: center;
    padding: 0.5em;
    line-height: 1.5;
  }


  /* プラン(備品について) ※TOPページのプラン部分を再利用して備品カードcss作成*/
  .plan__list {
    display: flex;
    margin: 1rem;
  }


  .plan__item {
    margin: 0 0.5rem;
    box-shadow: 0px 3px 2px 0px rgba(0,0,0,0.16);
    width: calc(100% / 3);
  }


  .bl__ttl__base {
    text-align: center;
  }


  .bl__ttl {
    margin-top: 3rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #222;
    display: inline-block;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.1em;
  }


  .plan__item__txt {
    margin: 1rem;
  }



  /* リンク関連 */


  .el__ho-link {
    transition: 0.3s;
  }


  .el__ho-link:hover {
    opacity: 0.6;
    text-decoration: none;
    color: #575555 !important;
  }



/* フッター */
.footer {
  border-top: 1px solid;
  margin-top: 5rem;


}


.footer__inner {
  display: flex;
  width: 478px;
  margin: 4rem auto;
}


.footer__logo {
  width: 80px;
}


.footer__txt {
  padding-left: 1rem;
}
</style>

※長いのでコードは折りたたんでいます。▶をクリックした表示・非表示を入り変えてください。可能でしたらコピーしてコード全体を見渡せるところに貼り付けると画像を配置する際にわかりやすいかもしれません。

用意するもの

✔︎楽天トラベルのアカウント
✔︎画像（写真）
✔︎入力したいタイトルや文章

楽天トラベルのアカウント

楽天トラベルカスタマイズページへの移動方法は以下の記事に画像付きで解説していますので是非ご覧ください。

Kayoblog

2024.04.29

【楽天トラベル】カスタマイズページ作成方法【初心者でもわかる手順画像付き】

https://kayoblog.org/rakuten_travel_custom_page_create

こんにちは、カヨ（@matuge_kirin）です。【自己紹介】SEとしてお仕事していますコーディング作業も増えてきたので手順などを記録自分用ですがぜひよかったら使ってください今回のお題は、楽天トラベルカスタマイズページを作成しようこんな方に読んでいただきたいと思っています！✔︎楽天トラベルにページを持っているが自分でカスタムしてみたい✔︎楽天トラベルの管理画面でカスタムページ編集はどこにあるのか迷っているシンプルに楽天トラベル管理ページの中にあるカスタマイズページまでの行き方を紹介し...

画像（写真）

・【メニュー上のTOP画像】950×400px以上　　　　　　１枚
・【客室画像➀～④】950×px以上　　　　　　　　　　４枚
・【横長バナー】950×120px以上　　　　　　　　　　　　 1枚　　　　　　
・【備品画像➀～➅】290×194px以上　　　　　６枚
・【ロゴ（TOP画と住所横）】80×80p以上　　　　　　　１枚

上から順に必要画像のサイズと枚数を記載しました。サイトの出来上がりの見本を見ながら用意してみてください。また、記載サイズ以上はOKです。しかし、比率は変えないでください。比率を気にせずで用意した場合もしかしたら思わぬ表示のされ方になるかもしれません。

✔︎比率の変換に便利なサイト：【自動計算】比率計算ツールと計算方法

入力したいタイトルや文章

あらかじめ用意しておきましょう。タイトルや文章、素材を用意してできればデザイン画を用意するのが望ましいです。デザインやテキストが決まっておらず、テスト用の文章や画像をいれてたとしても、実際に使用するテキスや素材を入れた時にバランスが崩れることが多く再度色々設定しなおすことが多いです。

必要な準備はできたでしょうか？用意した画像はそのままでは使えないので楽天の画像アップロードする場所に上げたり、画像サーバーがあればそちらに上げておいてくださいね。画像をアップロードして用意する方法がわらない場合はまた別の記事で説明しようと思いますので今回は飛ばします。
※「楽天トラベル画像アップロード」などの検索で公式の説明pdfが出てくると思うのでそちらを参考にしていただくと良いかもしれません。

表示したい画像やテキストを設定する

画像の表示させ方

ただコードをコピーして貼り付けても画像がなにも表示されないので注意してください。あなたの表示させたい画像を表示させるには自分で設定する必要があります。

表示させたい画像とコードの一致

設定したい画像の場所はコードのどの部分をかえればいいのか知る必要があります。今回はわかりやすく画像の場所に名前をつけ、コードにも同じ名前を書いておきました。先ずは画像場所の名前を以下で確認してください。

例として今回はトップ画を変えたいとしましょう。その場合コードの中から「トップ画」という言葉がかかれている場所をさがしてください。以下のような箇所が見つかると思います。

  <!-- トップ画像 -->
   <div class="logo"><img alt="トップ画像" src="トップ画像パス"></div>
  <!-- トップ画像/ここまで -->

画像のパス設定

場所がわかれば、あとは簡単。「src=”トップ画像パス”」の””の間を編集。楽天の管理画面内に画像がある方はそこから、別のサーバーの画像があればそちらの画像のバス（URL）を””の間の『トップ画像パス』という文字と置き換えてみましょう。これで、TOP画像の場所にあなたが設定した画像が表示されているはずです。

このように表示したい場所とそこに対応するコードを見つけることができれば他の場所も変更できると思います。他の場所の名前も記載した画像を以下に用意しましたのでご利用ください。

画像の場所の名前（全体)

※長いので画像は折りたたんでいます。▶をクリックした表示・非表示を入り変えてください。

タイトルや文章の変更の編集の仕方

最初のフォーマットに書いてある文字をコード上で検索するのがいいかと思います。少し変更して自分の書いた文字が反映されているかをテストページで確認してみてください。もしくは画像の位置をもとにしてみるのもいいかもしれません。

まとめ

いかがだったでしょうか。TOPページに引き続きこちらの記事を読んでくださっていた場合、方法は同じなのでコードのコピーだけで活用できたかと思います。初めてこちらのページを読んでくださった方は少し説明が簡素で分かりにくかったかもしれませんので是非以下のTOPページ作成の記事や楽天管理ページの記事もよんでみてください。そちらの方がより丁寧です。

Kayoblog

2024.04.29