ベーステンプレートを更新しました (C-23.0809)


目次[非表示]

  1. 1.コピー元のページ構成の変更
    1. 1.1.料金ページのデザイン変更
  2. 2.管理Vr  C-23.0809
    1. 2.1.横スクロール対策
    2. 2.2.下層メンビジ内のCTA調整
    3. 2.3.常設パーツCSS追加

コピー元のページ構成の変更

料金ページのデザイン変更

料金ページにあるテーブルのデザイン変更

テーブルの「ヘッダ」をなしから両方に変更

料金ページ

変更前


変更後



管理Vr  C-23.0809

横スクロール対策

theme-fo-baseに対してoverflow: initial;を常設したために横スクロールが発生する恐れがあるのでその対策として以下のコードを追加しました。

編集画面の対策済

//変更前
.theme-fo-base {
  overflow: initial;
}

//変更後
.theme-fo-base {
  overflow: initial;
  .wrapper {
    .contents {
      section {
        overflow: hidden;
      }
    }
  }
}

/*----------------------------------
    foot(フッター)
----------------------------------*/
.theme-fo-base {
  .foot {
    &.ft_custom01 {
      overflow: hidden;//追加


下層メンビジ内のCTA調整

余白を調整

//変更前
.component {
  &.cta {
    .cta-row {
      &.mv_design01_row {
        margin-top: 22px;
        .cta-column {
          display: flex;
          flex-direction: column;
          gap: 16px;
          width: 100%;
          @include breakpoint-sp {
            gap: 12px;
          }
          .component {
            &.button[data-designpart-id] {
              margin: 10px 0;
            }
          }
        }
      }
    }
  }
  &.hd_custom {
    h1{}
  }
}

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

//変更後
.component {
  &.cta {
    .cta-row {
      &.mv_design01_row {
        margin-top: 22px;
        .cta-column {
          display: flex;
          flex-direction: column;
          gap: 8px;
          width: 100%;
          .component {
            &.button[data-designpart-id] {
              margin: 0;
            }
          }
        }
      }
    }
  }
  &.hd_custom {
    h1{}
  }
}


常設パーツCSS追加

class名「price_table」
設置場所「料金」ページのテーブル

新しいCSSを使っているので「Opera 」系では動作しません
(foでは動作保証外)

price_table

//リッチテキストパーツ
&.richtext {
  //料金
  &.price_table {
    :is(.normal-table,.table-with-two-headers) {
      table {
        thead {
          tr {
            th {
              background-color: #fff;
              font-weight: normal;
              &:nth-child(2) {
                background-color: color-mix(in srgb, var(--fo-main-color) 80%, #fff);
              }
              &:nth-child(3) {
                background-color: color-mix(in srgb, var(--fo-main-color) 60%, #fff);
              }
              &:nth-child(n+4) {
                background-color: color-mix(in srgb, var(--fo-main-color) 40%, #fff);
              }
            }
          }
        }
        tbody {
          tr {
            :is(th,td) {
              font-weight: normal;
              background-color: #fff;
            }
          }
        }
      }
    }
  }
}




pagetop