ズラしデザイン02

デモ02

h3見出しテキスト

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

h3見出しテキスト

コード

セクションから紐付けしています。
セクションのclassは書き換えお願いします。
見出しに関しては各自で装飾してください。
SP時画像とテキストを逆にしたい場合は「reverse」で可能。

rowのclass名「column2_row」
colのclass名「textL_col」「textR_col」「img_col」

※編集画面が壊れるので注意が必要です。

コード

//ズラしデザイン02
&.demo02_sec {
.inner {
max-width: 100%;
padding: 20px 0;
.row {
&.column2_row {
margin-bottom: 70px;
&:last-child {
margin-bottom: 0;
}
.col {
padding: 0;
&.textL_col,
&.textR_col {
background: #fff;
padding: 30px 40px;
max-width: 590px;
width: 100% !important;
position: relative;
display: block;
margin-bottom: 60px;
box-shadow: 0 3px 8px var(--fo-shadow-color);//新CMSの設定なので各アカウントの定義を設定してください
@include breakpoint-sp {
max-width: none;
}
}
&.textL_col {
margin-left: auto;
margin-right: -60px;
@include breakpoint-sp {
margin: 0;
}
}
&.textR_col {
margin-right: auto;
margin-left: -60px;
@include breakpoint-sp {
margin: 0;
}
}
&.img_col {
padding-top: 60px;
vertical-align: bottom;
@include breakpoint-sp {
padding-top: 0;
}
.component {
&.image {
margin: 0;
}
}
@include breakpoint-sp {
width: 100% !important;
}
@include breakpoint-pro {
width: 50% !important;
}
}
}
}
}
}
}

編集画面崩れ修正用コード

//ズラしデザイン02　編集画面用
&.demo02_sec {
.inner {
.row {
&.column2_row {
.col {
&.textL_col,
&.textR_col {
display: table-cell !important;
width: 50% !important;
margin: 0;
}
}
}
}
}
}

※「編集画面用CSS（編集画面のみに効くCSS）」に記述してください。

CSSパーツ集