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

コピー元サイト


目次[非表示]

  1. 1.コピー元のページ構成の変更
    1. 1.1.共通パーツの初期設置変更
    2. 1.2.ページ内文言を変更
  2. 2.管理Vr -C-23.0726
    1. 2.1.entry-list（ 記事リストパーツ）
    2. 2.2.LP記述変更
    3. 2.3. 編集画面用CSS（編集画面のみに効くCSS）記述変更
    4. 2.4.テスト実装

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

共通パーツの初期設置変更

　→　変更後

  • CTA
  • CTA(TELボタンなし)

上記を削除

「フォーム用コピーライト」を「コピーライト」に、「CTA_カスタム用」を「CTA」に変更。


ページ内文言を変更

  • 無料相談申し込み完了

  • メルマガ申し込み完了


上記のページの文言

「お問い合わせありがとうございます。」
↓
「お申し込みありがとうございます。」

に文言変更。


管理Vr -C-23.0726

注釈削除

  • // 「セクションパーツ」で検索すると見つかります。


entry-list（ 記事リストパーツ）

デザインパーツ用の記述場所を設置

//デザインパーツ
// .component {
//   &:not(:root):not(:root):not(:root):not(:root):not(:root) {
//     &.entry-list[data-designpart-id] {
//     }
//   }
// }


LP記述変更

変数

変更
$lp_font_family: Shippori Mincho;
↓
$lp_font_family: "Noto Sans JP";

追加
$lp_hd_letter_spacing:.04em;

LP heading（見出し）

@mixin lp-heading {
  .component {
    &.heading {
      &.lp_hd_custom01 {
        :is(h1,h2,h3,h4,h5) {
          font-family: $lp_font_family;
          font-weight: $lp_hd_font_weight;
          line-height: $lp_hd_line_height;
          letter-spacing: $lp_hd_letter_spacing;//追加
      /*--- カスタム見出し ---*/
      // カスタム見出し01
      &.lp_hd_custom01 {
        :is(h1,h2) {
          @include heading-marginBottom(60px);
        }
        :is(h3,h4,h5) {
          @include heading-marginBottom(30px);
        }
      }

以下に変更ーーーーーーー

      /*--- カスタム見出し ---*/
      // カスタム見出し01
      &.lp_hd_custom01 {
        :is(h1,h2) {
          margin-bottom: 60px; //変更箇所
        }
        :is(h3,h4,h5) {
          margin-bottom: 30px; //変更箇所
        }
      }

LP contents(コンテンツ)

/*----------------------------------
    LP contents(コンテンツ)
----------------------------------*/
@mixin lp-contents {
  font-family: $lp_font_family;
  color: $lp_text_color;
  line-height: $lp_text_line_height;
  letter-spacing: $lp_text_letter_spacing;
  //セクション余白調整
  @include breakpoint-pc {
    padding: calc(#{$lp_section_padding} - 30px) 0 calc(#{$lp_section_padding} - 40px);
  }
  @include breakpoint-sp {
    padding: $lp_section_sp_padding;
  }

以下に変更ーーーーーーーーーーーーーーー
/*----------------------------------
    LP contents(コンテンツ)
----------------------------------*/
@mixin lp-contents {
  font-family: $lp_font_family;
  color: $lp_text_color;
  line-height: $lp_text_line_height;
  letter-spacing: $lp_text_letter_spacing;
  //セクション余白調整
  @include breakpoint-pc {
    padding: calc(#{$lp_section_padding} - 30px) 0 calc(#{$lp_section_padding} - 40px);
  }
  @include breakpoint-sp {
    padding: $lp_section_sp_padding 0; //変更箇所
  }

//よくあるご質問

変更前

      //よくあるご質問
      &.lp_faq_row {
        @include adjacentMargin(lp_faq_row,40px);
        .col {
          &.lp_faq_col {
            display: block;
            background: #fff;
            box-shadow: $lp_box_shadow_common;
            border-radius: $lp_border_radius_common;
            padding: 20px;
            .component {
              &.richtext {
                &:is(.faq_qu,.faq_an) {
                  position: relative;
                  border-bottom: 1px solid $lp_border_color;
                  margin: 0;
                  padding: 15px 15px 15px 50px;
                  @include breakpoint-sp {
                    padding-left: 40px;
                  }
                  &::before {
                    content: "Q.";
                    display: inline-block;
                    font-size: 28px;
                    font-weight: bold;
                    color: $lp_accent_color;
                    position: absolute;
                    left: 5px;
                    top: 4px;
                    @include breakpoint-sp {
                      top: 2px;
                    }
                  }
                }
                &.faq_an {
                  border-bottom: 0;
                  &::before {
                    content: "A.";
                    color: $lp_text_color;
                  }
                }
              }
            }
          }
        }
      }

変更後

      //よくあるご質問
      &.lp_faq_row {
        margin: 10px 0 20px;
        & + .lp_faq_row {
          margin-top: 40px;
        }
        .col {
          background: #fff;
          box-shadow: $lp_box_shadow_common;
          border-radius: $lp_border_radius_common;
          padding: 20px;
          .component {
            &.richtext {
              &:is(.faq_qu,.faq_an) {
                position: relative;
                border-bottom: 1px solid $lp_border_color;
                margin: 0;
                padding: 15px 15px 15px 50px;
                @include breakpoint-sp {
                  padding-left: 40px;
                }
                &::before {
                  content: "Q.";
                  display: inline-block;
                  font-size: 28px;
                  font-weight: bold;
                  color: $lp_accent_color;
                  position: absolute;
                  left: 5px;
                  top: 4px;
                  @include breakpoint-sp {
                    top: 2px;
                  }
                }
              }
              &.faq_an {
                border-bottom: 0;
                &::before {
                  content: "A.";
                  color: $lp_text_color;
                }
              }
            }
          }
        }
      }

//フッター

追記

            &.site_map_row {
              padding: 40px 20px;
              .col {
                vertical-align: middle;
              }
            }
ここから追記ーーーー
            &.page_top_row {
              @include page_top;
            }
            &.copyright_row {
              .col {
                padding: 0;
                .component {
                  &.richtext {
                    &.foot-copyright {
                      @include copyright_custom;
                    }
                  }
                }
              }
            }
ここまでーーーーー

以下を削除

                &.cta {
                  margin: 0;
                  .cta-row {
                    padding-top: 0 !important;
                    &.page_top_row {
                      @include page_top;
                      & + .cta-row {
                        margin-top: -40px;
                      }
                    }
                    .cta-column {
                      padding: 0;
                      .component {
                        &.richtext {
                          &.foot-copyright {
                            @include copyright_custom;
                          }
                        }
                      }
                    }
                  }
                }


 編集画面用CSS（編集画面のみに効くCSS）記述変更

変更

  //コンテンツ
  .theme-fo-base {
    .wrapper {
      .contents {
        section {
          //編集画面内の仕様回避の為
          margin: 50px 0 !important;
          &.innerNo_sec {
            .inner {
              padding: 20px;
            }
          }
          &.footer_sec,
          &.lp_footer_sec { //ここを削除
------------------------------------------------------
  //コンテンツ
  .theme-fo-base {
    .wrapper {
      .contents {
        section {
          //編集画面内の仕様回避の為
          margin: 50px 0 !important;
          &.innerNo_sec {
            .inner {
              padding: 20px;
            }
          }
          &.footer_sec {

追記

  //LP
  .theme-fo-base {
    .wrapper {
      .contents {
        section {
          &.lp_sticky_sec {
            position: relative;
            &::after {
              content: "固定中";
              color: #fff;
              font-size: 18px;
              position: absolute;
              bottom: -45px;
              line-height: 25px;
              width: 100%;
              box-sizing: border-box;
              background: #0987d4;
              text-align: center;
              padding: 10px;
            }
          }
以下を追記ーーーーーーーーーーーー
          &.lp_footer_sec {
            .inner {
              .row {
                &.page_top_row {
                  .col {
                    .component {
                      &.image {
                        position: static !important;
                        margin: 10px 0 !important;
                        &::before {
                          content: "ページ右下に固定されます";
                          display: inline-block;
                          text-align: center;
                          background: #0987d4;
                          color: #fff;
                          position: absolute;
                          right: 0;
                          bottom: -24px;
                          left: 0;
                          z-index: 1;
                          padding: 0 5px;
                        }
                      }
                    }
                  }
                }
                &.copyright_row {
                  margin-top: 30px;
                }
              }
            }
          }
          .inner {
            .row {
              .col {}
            }
          }
ここまでーーーーーーーーー

テスト実装

//テスト実装
::selection {
  color: #fff;
  background: var(--fo-accent-color);
}
//テスト実装　end


前の記事

prev-article-image

新CMS向け制作マニュアルがリリースされました

次の記事

next-article-image

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

fOでの基本設定

パーツ配置

CSSでの装飾

サイトチェック

pagetop

© Basic Inc. All Rights Reserved.