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

<div class="ly__con-rakuten base">



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




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




  <!-- メニュー下文字載せ画像 -->
  <div class="img__special-top bg_dark"><img alt="スペシャルトップ" src="スペシャルトップ画像パス"></div>
  <p class="txt__special-top">都会の幻想から離れて<br>癒しの時間を</p>
  <!-- メニュー下文字載せ画像/ここまで -->
 



  <!-- 横長バナー -->
  <div class="bnr"><img alt="横長バナー" src="バナー画像パス"></div>
  <!-- 横長バナー/ここまで -->




  <!-- おすすめ宿泊プラン -->
  <div class="plan">
    <div class="bl__ttl__base"><h1 class="bl__ttl">おすすめ宿泊プラン</h1></div>


    <div class="plan__list">


      <!-- プラン１つ目 -->
      <div class="plan__item">
        <a href="プランURL" class="el__ho-link">
          <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>
        </a>
      </div>
      <!-- プラン２つ目 -->
      <div class="plan__item">
        <a href="プランURL" class="el__ho-link">
          <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>
        </a>
      </div>
      <!-- プラン３つ目 -->
      <div class="plan__item">
        <a href="プランURL" class="el__ho-link">
          <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>
        </a>
      </div>


    </div>


  </div>
  <!-- おすすめ宿泊プラン/ここまで -->




  <!-- 写真とテキストセットBOX (画像：左ver.) -->
  <div class="content">
    <div class="bl__ttl__base"><h1 class="bl__ttl">客室について</h1></div>
    <div class="content__inner">
      <div class="content__img"><img alt="画像➀" src="画像➀の画像パス"></div>
      <div class="content__detail content__txt-left">
        <div class="content__ttl">画像➀タイトル</div>
        <div class="content__txt">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</div>
      </div>
    </div>
  </div>




  <!-- 写真とテキストセットBOX (画像：右ver.) -->
  <div class="content">
    <div class="bl__ttl__base"><h1 class="bl__ttl">客室について</h1></div>
    <div class="content__inner">
      <div class="content__detail content__txt-right">
        <div class="content__ttl">画像➁タイトル</div>
        <div class="content__txt">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</div>
      </div>
      <div class="content__img"><img alt="画像➁" src="画像➁の画像パス"></div>
    </div>
  </div>




  <!-- 写真とテキストセットBOX (画像：左ver.) -->
  <div class="content">
    <div class="bl__ttl__base"><h1 class="bl__ttl">客室について</h1></div>
    <div class="content__inner">
      <div class="content__img"><img alt="画像➂" src="画像➂の画像パス"></div>
      <div class="content__detail content__txt-left">
        <div class="content__ttl">画像➂タイトル</div>
        <div class="content__txt">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</div>
      </div>
    </div>
  </div>  




  <!-- 写真とテキストセットBOX (画像：右ver.) -->
  <div class="content">
    <div class="bl__ttl__base"><h1 class="bl__ttl">客室について</h1></div>
    <div class="content__inner">
      <div class="content__detail content__txt-right">
        <div class="content__ttl">画像➃タイトル</div>
        <div class="content__txt">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</div>
      </div>
      <div class="content__img"><img alt="画像➃" src="画像➃の画像パス"></div>
    </div>
  </div>




  <!-- 写真とテキストセットBOX (画像：左ver.) -->
  <div class="content">
    <div class="bl__ttl__base"><h1 class="bl__ttl">客室について</h1></div>
    <div class="content__inner">
      <div class="content__img"><img alt="画像➄" src="画像➄の画像パス"></div>
      <div class="content__detail content__txt-left">
        <div class="content__ttl">画像➄タイトル</div>
        <div class="content__txt">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</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　東京都新宿区新宿123テストホテル<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;
}


/* メニュー下文字載せ画像 */
.img__special-top img {
  border-radius: 20px;
  display: block;
  opacity: 0.7;
}


.img__special-top {
  border-radius: 20px;
}


div.bg_dark {
  background-color: black;
  display: inline-block;
}


.txt__special-top {
  font-family: A1明朝,A1 Mincho,serif;
  font-size: 2.3rem;
  color: white;
  margin-top: -15rem;
  margin-bottom: 10rem;
  z-index: 10;
  position: relative;
  margin-left: 6rem;
  letter-spacing: 0.4rem;
  line-height: 3rem;
}


/* プラン */
.plan__list {
  display: flex;
  margin: 1rem;
}


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


.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;
  text-decoration: none;
}


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


.content {
  margin: 1.5rem;
}


.content__ttl{
  font-size: 1.3rem;
  margin-bottom: 1rem
}


.content__inner {
  display: flex;
  margin-top: 2rem;
}


.content__detail {
  padding-top: 2%;
  width: 55%;
}


.content__txt-left {
  padding-left: 4%;
}


.content__txt-right {
  padding-right: 4%;
}


.content__img {
  width: 45%;
}


/* フッター */
.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>