モジュールリストのメインのカスタマイズ

2021年8月にモジュールリストに追加したmainとその他スライドに関してソースをまとめです。
参考にしたほうが早い場合は使ってください。

main08,main10

①スライド画像が1920pxだった場合
右から見切れて左の余白感が残れば良いのだと思います。
EPRESSでは左右から見切れるように調整しているので下記のソースをコメントアウトして左起点にします。
細かい動きや調整はデザインによると思うので適宜調整をお願いします。
\src\base\assets\sass\core_main_slide.scss
41行目あたりの@include position-center();をコメントアウト

.main_visual_slick {
position: relative;
margin: 0 auto;
li:not([id^='slick-slide']) {
// @include position-center();

②スライド画像と背景色が別だった場合
参考：
https://www.sakanayaeura.com/
https://www.lattest2020.com/
・.main_visualを.main_boxで囲む
・scssの調整
\src\base\assets\sass\core_main_slide.scss
１、47行目あたりの@include position-center-wide();をコメントアウト
※.main_visual_slick li:not([id^=“slick-slide”]) img　に指定されているほうです。

img {
//@include  position-center-wide();

２、最下部に追記

@media ( min-width: $header_break_point+px) {
  .main_box {
      max-width: 1920px;
      position: relative;
      margin-bottom: 70px;
      &:after {
          content: "";
          position: absolute;
          display: block;
          background: #f1f8fc;
          background-size: contain;
          width: 100%;
          height: 100%;
          top: 70px;
          left: -34%;
          z-index: -1;
      }
      .main_visual {
        margin-left: 525px;
        .main_visual_copy {
          >li {
            img {
              top: 60%;
              left: -165px;
              right: auto;
              width: auto;
              @media ( min-width : 1500px ) {
                left: -36%;
                }
            }
          }
        }
      }
  }
}

main09

スライドの横幅が1920px未満の場合、引き延ばされないように調整をする必要があります。
\src\base\assets\sass\core_main_slide.scss
$main_slide_type: C;の場合
245行目あたりのpadding-topコメントアウト

  @media (min-width: $main_slide_width+px) {
    .main_visual {
      .main_visual_slick {
        // padding-top: ($main_slide_height / $main_slide_width) * 100#{'%!important'};
      }
    }
  }

あとは.main_visualに上下の余白を付けてラフを再現しましょう。

その他

スライドに余白を持たせていて、かつヘッダーがスライドの下にある場合、よく見るとスライドにヘッダーがかぶっている案件も見かけるので注意してください。
下記はスライドを囲む.main_visualに余白上下合計40pxを付けて、その分headerの上余白にスライド画像高さ+40pxつけた例です。
①main.scss
$header_type: bottom;
$main_slide_width: スライドのサイズ;
$main_slide_height: スライドのサイズ;
②_main_slide.scss
7行目あたり

.main_visual {
  margin: 20px;

③_header.scss
１、587行目あたり

@media (min-width: $container+px) {
  header {
    margin-top: $main_slide_height + 40 + px;

２、609行目あたり

@media (min-width: $main_slide_width+px) {
  header {
    margin-top: ($main_slide_height / $main_slide_width + 20px )*100#{'%'};