ベーステンプレートを更新しました (C-24.0509)
コピー元のページ構成の変更
日時の表記の変更
全ての日時の表記を日本語表記に変更
変更前 例）
2024-04-19
変更後 例）
2024年4月19日
詳細ボタン名の変更
遷移するボタン「詳しく見る」になってたのを「○○を詳しく見る 」に変更
時間表記を変更
以下の例の様に表記を変更。
また「~」を全角「〜」に全て変更
変更前 例）
14:30〜 開場
15:00〜 講演
16:00〜 ワークショップ
16:30〜 質疑応答・個人相談会
17:00〜 終了
変更後 例）
14時30〜 開場
15時〜 講演
16時〜 ワークショップ
16時30分〜 質疑応答・個人相談会
17時〜 終了管理Vr - C-23.0509
デザインパーツ用の見出しの記述を変更
「hd_custom01」の記述が「// 見出し全体（例：自由にカスタマイズしてください）」に入ってたので修正しました
修正前
//デザインパーツ
.component {
//見出し下余白条件分岐用
&:not(:root:root:root:root) {
&.heading[data-designpart-id] {
&:has(+ .component) {
:is(h1,h2,h3) {
@include margin-property(bottom,32px);
}
:is(h4,h5) {
@include margin-property(bottom,24px);
}
}
}
}
&:not(:root:root:root:root:root) {
// 見出し全体（例：自由にカスタマイズしてください）
&.heading[data-designpart-id] {
&.hd_custom01 {
:is(h1,h2,h3,h4,h5) {}
}
&.mt0_hd {
margin-top: 0;
}
&.mainClr_hd {
--fo-heading-main-color: var(--fo-main-color);
}
&.subClr_hd {
--fo-heading-main-color: var(--fo-sub-color);
}
&.accentClr_hd {
--fo-heading-main-color: var(--fo-accent-color);
}
}
}
}修正前
//デザインパーツ
.component {
//見出し下余白条件分岐用
&:not(:root:root:root:root) {
&.heading[data-designpart-id] {
&:has(+ .component) {
:is(h1,h2,h3) {
@include margin-property(bottom,32px);
}
:is(h4,h5) {
@include margin-property(bottom,24px);
}
}
}
}
&:not(:root:root:root:root:root) {
// 見出し全体（例：自由にカスタマイズしてください）
&.heading[data-designpart-id] {
:is(h1,h2,h3,h4,h5) {}
}
//デザインパーツ
&.heading {
&.hd_custom01 {
:is(h1,h2,h3,h4,h5) {}
}
&.mt0_hd {
margin-top: 0;
}
&.mainClr_hd {
--fo-heading-main-color: var(--fo-main-color);
}
&.subClr_hd {
--fo-heading-main-color: var(--fo-sub-color);
}
&.accentClr_hd {
--fo-heading-main-color: var(--fo-accent-color);
}
}
}
}
ページ内リンクずれ対策classの記述変更
scroll-margin-topでは挙動が不安定だったのでネガティブマージンとpaddingの併用に変更。
また、デザインパーツでは記述負けすることがあったので詳細度を１つ上げてます。
変更前
//ページ内リンクずれ対策class
.theme-fo-base {
.wrapper {
.contents {
section {
.component {
&.heading {
&.inPage_link {
@include breakpoint-pc {
scroll-margin-top: $inPage_link;
}
@include breakpoint-sp {
scroll-margin-top: $sp_inPage_link;
}
}
}
}
}
}
}
}変更後
//ページ内リンクずれ対策class
.theme-fo-base {
.wrapper {
.contents {
section {
.component {
&.heading:not(:root) {
&.inPage_link {
@include breakpoint-pc {
margin-top: calc(-#{$inPage_link} - 10px);
padding-top: calc(#{$inPage_link} + 10px);
}
@include breakpoint-sp {
margin-top: calc(-#{$sp_inPage_link} - 10px);
padding-top: calc(#{$sp_inPage_link} + 10px);
}
}
}
}
}
}
}
}LPのヘッダー固定時のページ内リンクのズレ対策CSSの記述変更
共通ナビと同じ記述「scroll-padding-top 」に変更。
また、IDに付与していた記述をheadingに別クラスとして移動。
変更前
//LPセクション固定
&.lp_sticky_sec {
position: sticky;
top: 0;
z-index: 1000;
box-shadow: $lp_box_shadow_nav_common;
& ~ section {
.inner {
.row {
.col {
[id] {
//ヘッダーの高さに合わせてください(ヘッダーの高さ＋componentのmargin10px）
//こちらは外部から飛んで来た場合対応できません
@include breakpoint-pc {
scroll-margin-top: calc(#{$lp_inPageLink_pc} + 10px) !important;
}
@include breakpoint-sp {
scroll-margin-top: calc(#{$lp_inPageLink_sp} + 10px) !important;
}
}
//外部対応したい場合はこちら。ただし、見出し（component）に背景色が設定されてる場合、設定が見えるので注意。
// .component {
// &.heading {
// &:target::before {
// content: "";
// @include breakpoint-pc {
// margin-top: calc(-#{$lp_inPageLink_pc} - 10px) !important;
// padding-top: calc(#{$lp_inPageLink_pc} + 10px) !important;
// }
// @include breakpoint-sp {
// margin-top: calc(-#{$lp_inPageLink_sp} - 10px) !important;
// padding-top: calc(#{$lp_inPageLink_sp} + 10px) !important;
// }
// }
// }
// }
}
}
}
}
}変更後
//ヘッダー
$lp_header_logo: 200px; //PCでの幅サイズ（固定）
$lp_header_sp_logo: 30px; //SPでの高さサイズ（maxサイズ）
$lp_header_height: 80px; //PC時のヘッダーの高さ（固定時に使用）
$lp_header_sp_height: 52px; //SP時のヘッダーの高さ（固定時に使用）
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
/*----------------------------------
LP heading（見出し）
----------------------------------*/
@mixin lp-heading {
.component {
&.heading {
&.lp_inPageLink {
@include breakpoint-pc {
margin-top: calc(-#{$lp_inPageLink_pc} - 10px);
padding-top: calc(#{$lp_inPageLink_pc} + 10px);
}
@include breakpoint-sp {
margin-top: calc(-#{$lp_inPageLink_sp} - 10px);
padding-top: calc(#{$lp_inPageLink_sp} + 10px);
}
}
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
/*----------------------------------
LP body（本体）
----------------------------------*/
//ヘッダー固定時ズレを修正
html {
&:has(.lp_sticky_sec) {
@include breakpoint-pc {
scroll-padding-top: calc(#{$lp_header_height} + 10px);
}
@include breakpoint-sp {
scroll-padding-top: calc(#{$lp_header_height} + 10px);
}
}
}編集画面用の行の余白の詳細度調整
追加されたデザインパーツに影響が出たので詳細度を下げました。
変更前ーーーーーーーーーーーーーーーーーーーー
//row余白調整
.theme-fo-base {
:where(
.main-visual .main-visual-content,
.wrapper .contents section .inner,
.foot .foot-cont
) {
.row {
&:not(:first-child) {
margin-top: 30px;
}
}
}
}
変更後ーーーーーーーーーーーーーーーーーーーー
//row余白調整
:where(.theme-fo-base) {
:where(
.main-visual .main-visual-content,
.wrapper .contents section .inner,
.foot .foot-cont
) {
:where(.row) {
&:not(:first-child) {
margin-top: 30px;
}
}
}
}
