LP用カスタムCSS(旧CMS）
必要最低限を記載してます。
また、編集画面用のCSSも記述してるので、各所定の場所に貼り付けて使用してください。
新CMSでは標準で設置されてます
管理Vr 20240416
ボタンの構造とlp_sticky_secを使った時の構造を変更
//管理Vr 20240416 (変更しないでください)
/*
LP variables（変数）
LP button（ボタン） >> カスタムボタン
LP header (見出し) >> コンテンツエリア
LP common（LP共通）>> テキストパーツ、リッチテキスト、フォームパーツ
LP main（コンテンツ）
・lp_sec
・lp_header_sec
・lp_footer_sec
編集画面用CSS（編集画面のみに効くCSS）
*/
/* --------------------------------
LP variables（変数）
----------------------------------- */
//フォント
$lp_font_family: 'Noto Sans JP', sans-serif;
//$lp_font_family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana, sans-serif;
$lp_base_fontsize: 16px; //ベースとなるフォントサイズ
$lp_base_line_height: 1.75; //ベースとなるline-height（行間）
$lp_base_letter_spacing: normal;
//カラー
$lp_base_color: #333; //ベースカラー
$lp_main_color: #003791; //メインカラー
$lp_accent_color: #df8c3b; //アクセントカラー
$lp_base_text_color: $lp_base_color; //テキストカラー
$lp_a_text_color: #003b82; //テキストリンクのカラ
$lp_form_hissu_color: #c70909;//赤 フォームの「必須マーク」カラー
//ボックスシャドウ
$lp_box_shadow_common: 2px 2px 10px 0 rgba(#000,.08);
//hover時の不透明度
$lp_hover_opacity: .8;
//ヘッダーロゴ
$lp_header_logo: 200px; //PCでの幅サイズ（固定）
$lp_header_sp_logo: 50px; //SPでの高さサイズ（maxサイズ）
//セクション余白
$lp_section_padding: 70px 0 60px; //PC時のパディング
$lp_section_sp_padding: 0; //SP時のパディング
//見出し
$lp_hd_line_height: 1.5; //見出し用line-height（行間）
$lp_hd_font_weight: bold; //見出し用
$lp_hd_font_strong: normal; //見出し用（編集画面の「.strong」に対応）
$lp_title_font_family: $lp_font_family; //サイト内見出しのフォントファミリー
$lp_site_h1_fontsize: 46px; //サイト内（ブログコンテンツを除く）の見出しh1のフォントサイズ（PC）
$lp_site_h2_fontsize: 38px; //サイト内（ブログコンテンツを除く）の見出しh2のフォントサイズ（PC）
$lp_site_h3_fontsize: 30px; //サイト内（ブログコンテンツを除く）の見出しh3のフォントサイズ（PC）
$lp_site_h4_fontsize: 20px; //サイト内（ブログコンテンツを除く）の見出しh4のフォントサイズ（PC）
$lp_site_h5_fontsize: 18px; //サイト内（ブログコンテンツを除く）の見出しh5のフォントサイズ（PC）
//コピーライト
$lp_copyright_bg_color: #eae8e8; //コピーライトの背景色
$lp_copyright_text_color: $lp_base_color; //コピーライトのテキストカラー
$lp_copyright_text_fontsize: 12px; //コピーライトのフォントサイズ
//角丸
$lp_border_radius_common: 0;
$lp_border_radius_btn_common: 0;
//web font
@import url('');//不要な場合は削除
/*----------------------------------
LP button（ボタン）
----------------------------------*/
.component {
&.button {
&:is(
.lp_btn_custom01
) {
.button-cont {
a {
&:is(.size-s,.size-m,.size-l) {
box-sizing: border-box;
letter-spacing: $lp_base_letter_spacing;
line-height: 1.3;
text-align: left;
text-decoration: none;
border-radius: 0;
}
//サイズ小のとき
&.size-s {
//フォントサイズやボタンの大きさを設定
min-width: 220px;
font-size: 14px;
padding: 9px 20px;
@include breakpoint-pro {
min-width: 200px;
}
@include breakpoint-sp {
min-width: 80%;
width: auto;
}
@include breakpoint-tb {
min-width: 200px;
}
}
//サイズ中のとき
&.size-m {
min-width: 280px;
font-size: 16px;
padding: 15.5px 20px;
@include breakpoint-sp {
width: auto;
min-width: 90%;
padding: 15px;
}
@include breakpoint-tb {
min-width: 280px;
}
}
//サイズ大のとき
&.size-l {
display: inline-block;
min-width: 350px;
font-size: 20px;
margin: auto;
padding: 20px;
@include breakpoint-sp {
width: 100%;
min-width: auto;
}
@include breakpoint-tb {
width: auto;
min-width: 350px;
}
}
&:hover {
opacity: 1;
}
}
}
//SP時ボタンを中央にするクラス
&.sp_center {
&.button-cont:is(.left, .right) {
@include breakpoint-sp {
text-align: center;
}
}
}
}
//ボタン01
&.lp_btn_custom01 {
.button-cont {
a {
&:is(.size-s,.size-m,.size-l) {
display: inline-flex;
align-items: center;
justify-content: center;
background: $lp_main_color;
color: #fff;
text-decoration: none;
border: 2px solid $lp_main_color;
border-radius: $lp_border_radius_btn_common;
&::before {
content: "\f0e0";
font-family: $font_family_awsm6;
font-weight: 400;
color: inherit;
margin-right: 10px;
position: relative;
top: .5px;
}
}
&:is(.blue,.red,.orange,.black,.white) {}
&:hover {
opacity: $lp_hover_opacity;
}
}
}
}
//telボタン
&.lp_btn_custom_tel {
margin: 0;
height: 100%;
.button-cont {
a {
&:is(.size-s,.size-m,.size-l) {
//背景色とかborder色など外観を設定
background-color: transparent;
font-family: inherit;
letter-spacing: $lp_base_letter_spacing;
color: $lp_base_text_color;
text-decoration: none;
position: relative;
border-radius: 0;
margin: 0;
padding: 0;
&::before {
content: "\f095";
font-family: $font_family_awsm;
font-size: 100%;
font-weight: 900;
position: relative;
margin-right: 0.3rem;
}
&:visited {
color: $lp_base_text_color;
text-decoration: none;
}
&:hover {
opacity: $lp_hover_opacity;
}
//サイズ小のとき
&.size-s {
//フォントサイズやボタンの大きさを設定
font-size: 18px;
}
//サイズ中のとき
&.size-m {
font-size: 20px;
}
//サイズ大のとき
&.size-l {
display: inline-block;
font-size: 32px;
}
}
}
}
//SP時ボタンを中央にするクラス
&.sp_center {
.button-cont:is(.left, .right) {
@include breakpoint-sp {
text-align: center;
}
}
}
}
}
}
/*----------------------------------
LP hedding（見出し）
----------------------------------*/
.theme-fo-base {
.contents {
.component {
&.heading {
&.lp_hd_custom01 {
:is(h1,h2,h3,h4,h5) {
font-family: $lp_title_font_family;
font-weight: $lp_hd_font_weight;
line-height: $lp_hd_line_height;
color: $lp_accent_color;
@include breakpoint-sp {
overflow-wrap: break-word;
}
}
h1 {
font-size: $lp_site_h1_fontsize;
@include breakpoint-sp {
font-size: calc(#{$lp_site_h1_fontsize} - 20px);
}
}
h2 {
font-size: $lp_site_h2_fontsize;
@include breakpoint-sp {
font-size: calc(#{$lp_site_h2_fontsize} - 14px);
}
}
h3 {
font-size: $lp_site_h3_fontsize;
@include breakpoint-sp {
font-size: calc(#{$lp_site_h3_fontsize} - 8px);
}
}
h4 {
font-size: $lp_site_h4_fontsize;
@include breakpoint-sp {
font-size: calc(#{$lp_site_h4_fontsize} - 2px);
}
}
h5 {
font-size: $lp_site_h5_fontsize;
@include breakpoint-sp {
font-size: calc(#{$lp_site_h5_fontsize} - 2px);
}
}
}
/*--- カスタム見出し ---*/
// カスタム見出し01
&.lp_hd_custom01 {
:is(h1,h2,h3,h4,h5) {
margin-bottom: 1em;
}
}
}
}
}
}
/*----------------------------------
LP common（lp共通）
----------------------------------*/
.theme-fo-base {
.wrapper {
.contents {
section {
/* LPベースセクション ----------------------*/
&:where(
.lp_sec,
.lp_header_sec,
.lp_mv_sec,
.lp_footer_sec
) {
font-family: $lp_font_family;
color: $lp_base_text_color;
line-height: $lp_base_line_height;
letter-spacing: $lp_base_letter_spacing;
padding: $lp_section_padding;
@include breakpoint-sp {
padding: $lp_section_sp_padding;
}
.inner {
.row {
.col {
.component {
/* テキストパーツ ---------------*/
&.text {
font-size: $lp_base_fontsize;
}
/* リッチテキストパーツ ----------*/
&.richtext {
font-size: $lp_base_fontsize;
p {
font-size: inherit;
}
li {
font-size: inherit;
a {
font-size: inherit;
}
}
table {
thead {
tr {
th {
p {
line-height: $lp_base_line_height;
}
}
}
}
tbody {
tr {
td {
p {
line-height: $lp_base_line_height;
}
}
}
}
}
}
/* フォームパーツ ---------------*/
&.form {
//カスタムフォーム
&.lp_form_custom {
//エラー
.show-notice {
border-radius: 0;
span {
padding: 5px;
& + span {
padding: 0 5px 5px;
}
}
}
.contact_form {
//inputフルカスタム(必要な時に使用)
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea {
background: #fff;
height: auto;
font-family: inherit !important;
line-height: 1.25;
border-radius: 0;
border: solid 1px rgba(0,0,0,0.20);
padding: 0.6rem 0.75rem;
&::placeholder {
font-family: inherit;
color: rgba(0,0,0,0.30);
}
&:hover {}
&:focus {
background-color: #fff;
color: #555;
border-color: #5a5a5a;
}
}
input[type="text"].form-error,
input[type="email"].form-error,
input[type="password"].form-error,
input[type="date"].form-error,
input[type="search"].form-error,
input[type="url"].form-error,
select.form-error,
textarea.form-error {
background: #fdf5f2;
border: 1px solid $lp_form_hissu_color !important;
}
.group {
margin: 20px 0;
}
.form-label {
font-size: $lp_base_fontsize;
@include breakpoint-sp {
display: inline-block !important;
}
}
.agree-label {
line-height: 1.5;
}
.form-cont {
p {
font-size: $lp_base_fontsize;
margin-top: 0.25rem;
}
}
//規約テキスト
.service_term {
background: #fff;
overflow: auto;
font-size: $lp_base_fontsize;
padding: 20px;
}
//規約リンク
.service_term_link {
font-size: $lp_base_fontsize;
margin-top: 20px;
margin-bottom: 5px;
a {
overflow-wrap: break-word;
color: $lp_a_text_color;
letter-spacing: 0;
}
}
}
}
//送信ボタンスタイル
&.lp_form_btn_custom01 {
.form-submit {
margin-top: 20px;
.popup-link {
font-family: $lp_font_family;
font-size: 18px;
background: $lp_main_color;
border: 1px solid $lp_main_color;
border-radius: $lp_border_radius_btn_common;
padding: 15px 60px;
@include breakpoint-sp {
padding: 10px 60px;
}
&:hover {
background: #fff;
color: $lp_main_color;
}
}
}
}
//フォームの必須
.form-label.require {
&:after {
background: $lp_form_hissu_color;
margin-left: 20px;
}
}
input[type=checkbox],
input[type=radio] {
min-height: auto;
}
&.vertical {
.form-label {
&:after {
position: relative;
top: -2px;
}
}
}
&.horizontal {
.form-label {
&:after {
@include breakpoint-pc {
top: 6px;
}
@include breakpoint-sp {
top: -3px;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
/*----------------------------------
contents(LP)
----------------------------------*/
//コンテンツ内
.theme-fo-base {
&:has(.lp_sticky_sec) {
overflow: initial;
}
.wrapper {
.contents {
section {
//ヘッダー
&.lp_header_sec {
padding: 0;
width: 100%;
background: #fff;
.inner {
.row {
&.lp_header_row {
display: flex;
align-items: center;
.col {
padding: 0;
&.lp_logo_col {
.component {
&.image {
margin: 0;
&.lp_logo_img {
img {
@include breakpoint-pc {
max-width: $lp_header_logo !important;
}
@include breakpoint-sp {
max-height: $lp_header_sp_logo !important;
}
}
}
}
}
}
&.lp_btn_col {
display: flex !important;
justify-content: flex-end;
align-items: center;
.component {
margin: 0;
&:not(:first-child) {
@include breakpoint-pc {
margin-left: 35px;
}
}
&:where(.lp_btn_custom01,.lp_btn_custom_tel ) {
.button-cont {
a {
@include breakpoint-sp {
background: none;
width: auto;
min-width: auto;
font-size: 0;
letter-spacing: 0;
border-radius: none;
border: 0;
margin: 0;
padding: 5px 10px 5px 5px;
}
&::before {
@include breakpoint-sp {
font-size: 22px;
color: $lp_base_color;
margin: 0;
}
}
}
}
}
}
}
}
}
}
}
}
//セクション固定
&.lp_sticky_sec {
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 3px 6px rgba(#000,.1);
}
//メンビジ
&.lp_mv_sec {
.inner {
.row {
.col {
.component {}
}
}
}
}
//コンテンツ
&.lp_sec {
.inner {
.row {
&.lp_box_shadow_row {
box-shadow: $lp_box_shadow_common;
}
.col {
.component {
//テキストパーツ
&.text {}
//リッチテキストパーツ
&.richtext {}
//イメージパーツ
&.image {}
}
}
}
}
}
//フッター
&.lp_footer_sec {
padding: 50px 0 0;
@include breakpoint-sp {
padding: 30px 0 0;
}
.inner {
max-width: 100%;
padding: 0;
.row {
max-width: 1110px;
margin: auto;
padding: 0 20px;
&.lp_foot_contents_row {
padding-bottom: 40px;
@include breakpoint-sp {
padding-bottom: 30px;
}
}
//ボタン固定
&.lp_page_top_row {
padding: 0;
.col {
padding: 0;
.component {
&.image {
width: 60px;
height: 60px;
position: fixed;
right: 0;
bottom: 0;
z-index: 1000;
margin-bottom: 0;
@include breakpoint-sp {
right: 0;
}
@include breakpoint-tb {
}
a {
img {
width: 60px;
height: 60px;
@include breakpoint-sp {
width: auto !important;
}
}
}
}
}
}
}
//コピーライト
&.lp_copyright_row {
max-width: 100%;
padding: 0;
.col {
padding: 0;
.component {
&.richtext {
&.foot_copyright_richtext {
display: flex;
justify-content: center;
align-items: center;
background: $lp_copyright_bg_color;
height: 60px;
margin: 0;
padding: 0;
@include breakpoint-sp {
padding: 0 70px 0 10px;
}
@include breakpoint-tb {
padding: 0;
}
p {
font-size: $lp_copyright_text_fontsize;
line-height: 1.3;
color: $lp_copyright_text_color;
margin: 0;
}
}
}
}
}
}
.col {
.component {
//リストパーツ
&.list {
//サイトマップ
&.site_map_list {
margin: 0;
ul {
li {
list-style-type: none;
font-size: $base_fontsize;
color: inherit;
&:not(:first-child) {
margin: 10px 0 0;
}
a {
display: inline-block;
color: inherit;
padding: 0;
&:hover {
background: transparent;
opacity: $lp_hover_opacity;
}
}
}
}
}
}
//イメージパーツ
&.image {
&.lp_foot_logo_img {
margin-top: 0;
img {
@include breakpoint-pc {
max-width: $lp_header_logo !important;
}
@include breakpoint-sp {
max-height: $lp_header_sp_logo !important;
}
}
}
}
}
}
}
}
}
}
}
}
}
//編集画面用(「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 {
padding: 20px;
.row {
//ボタン固定
&.lp_page_top_row {
.col {
.component {
&.image {
width: 100%;
position: relative;
right: auto;
bottom: auto;
}
}
}
}
}
}
}
}
}
}
}
//ここまで
© Basic Inc. All Rights Reserved.