ベーステンプレートを更新しました (C-23.0913)
目次[非表示]
- 1.コピー元のページ構成の変更
- 1.1.特になし
- 2.管理Vr [C-23.0913]
- 2.1.フォントファミリー変更用の変数移動
- 2.2.編集画面内のrowの余白調整
- 2.3.編集画面用のJSパーツの記述を追加
- 2.4.目次を調整
- 2.5.LPの「lp_sticky_sec」使用時のズレ対策用CSSを追記＆変数化
コピー元のページ構成の変更
特になし
管理Vr [C-23.0913]
名称変更
「ブロックパーツ」から「カスタムパーツ」に名称変更。
元々あった「カスタムパーツ」から「デフォルトパーツ」に名称変更。(こちらは各自でご確認ください）
変更前
/*------------------------------
ブロックパーツ 格納場所
基本的にパーツ単体の記述でお願いします。
パーツ名を忘れず記載してください。
-------------------------------*/
@include theme-fo-base {
.inner {
.row {
.col {
.component {}
}
}
}
}
/*--- ブロックパーツ 格納場所 end ---*/ //ブロックパーツの記述はここにお願いします
.theme-fo-base {
.wrapper {
.contents {
section {
.component {}
}
}
}
}変更後
/*------------------------------
カスタムパーツ 格納場所
基本的にパーツ単体の記述でお願いします。
パーツ名を忘れず記載してください。
-------------------------------*/
@include theme-fo-base {
.inner {
.row {
.col {
.component {}
}
}
}
}
/*--- カスタムパーツ 格納場所 end ---*/ //カスタムパーツの記述はここにお願いします
.theme-fo-base {
.wrapper {
.contents {
section {
.component {}
}
}
}
}フォントファミリー変更用の変数移動
変数の箇所に置いてあった編集画面用変数を下部の編集画面記述場所に移動
変更前
$font_family_awsm6: "Font Awesome 6 Free";
// //既存フォント以外のフォントファミリー設定（使用しない場合は削除してください）
// #__next {
// --fo-heading-font-family: "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
// --fo-text-font-family: "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
// }
// //編集画面用
// @at-root .frame-root .frame-content {
// --fo-heading-font-family: "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
// --fo-text-font-family: "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
// }変更後
$font_family_awsm6: "Font Awesome 6 Free";
//既存フォント以外のフォントファミリー設定（使用しない場合は削除してください）
// #__next {
// --fo-heading-font-family: "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
// --fo-text-font-family: "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
// }/*----------------------------------
編集画面用CSS（編集画面のみに効くCSS）
----------------------------------*/
@include edit-page {
//既存フォント以外のフォントファミリー設定（使用しない場合は削除してください）
// --fo-heading-font-family: "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
// --fo-text-font-family: "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, sans-serif;
//SP編集画面の幅制限
@include breakpoint-sp {
max-width: 769px;
margin: auto;
}
編集画面内のrowの余白調整
コンテンツ内にしか余白が適用されてなかったのを、メンビジ（ヘッダー）フッターにも適用。
余白も25pxから30pxに変更。（上のコンテンツに被る場合があるので）
変更前
.inner {
.row {
&:not(:last-child) {
margin-bottom: 25px;
}
&.scen_header_row {
.col {
.component {変更後
//row余白調整
.theme-fo-base {
:where(
.main-visual .main-visual-content,
.wrapper .contents section .inner,
.foot .foot-cont
) {
.row {
&:not(:first-child) {
margin-top: 30px;
}
}
}
}編集画面用のJSパーツの記述を追加
//JSパーツの記述はここにお願いします
.theme-fo-base {
.wrapper {
.contents {
section {}
}
}
}
//フォントサイズによりメニュー崩れ対策目次を調整
目次がズレていたり抜けてたりしたので修正。
全体
/*
variables（変数）
webフォント
Mixins
spフォント設定
common（ウェブサイト共通） >> リッチテキスト、CTA(共通パーツ)、リンク埋め込みパーツ、ブログ、サーチエリア、リンクリスト、検索結果、ページネーション
entry-list（ 記事リストパーツ）
header・logo・navigations（ヘッダー・ロゴ・ナビゲーション）
main-visual（メインビジュアル）
breadcrumbs（パンくず）
button（ボタン）
heading（見出し）
article-post（ブログ用見出し）
main（コンテンツ） >> CTAを用いたパーツ、CTA内の基本設定、２カラム（CTA）、フォームフッター、デザインLPパーツ、カスタムパーツ、ユニバーサルクラス、フォームパーツ、
blog(ブログテンプレート)
カテゴリ・タグ自動生成ページ
side bar（サイドバー） >> カテゴリー、ランキング、カテゴリーアイコン
foot（フッター）
カスタム用 LP（詳細あり）
col空処理
編集画面用CSS（編集画面のみに効くCSS）
*/LP（フルカスタム用）
/*----------------------------------
LP（フルカスタム用）
----------------------------------*/
/*
LP variables（変数）
LP button（ボタン）
LP header (見出し）
LP richtext（テキスト）
LP form（フォーム）
LP MV(メンビジ)
LP contents(コンテンツ)
LP body（本体）
*/LPの「lp_sticky_sec」使用時のズレ対策用CSSを追記＆変数化
内部の場合は問題なかったのですが、外部からのアクセスの場合ズレてしまうので別の記述を準備。
コメントアウト、見出しのcomponentに背景色が設置されてたら使えない。
修正に加え変数化。
pc：$lp_inPageLink_pc
sp：$lp_inPageLink_sp
//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_max_width: 1100px; //検索結果コンテンツ幅調整用
$lp_border_color: #eee;
$lp_inPageLink_pc: 80px; //ページ内リンクPC（PC時のヘッダーの高さを指定）
$lp_inPageLink_sp: 67px; //ページ内リンクSP（SP時のヘッダーの高さを指定）
/*----------------------------------
