Spiritual Advisor
ローディングアニメーション 水がいっぱいになるやつ
/* ==============================
ローディング
水アニメロゴ＋中央から外へ四角く開く
============================== */
ロゴ表示後に開いていく時間などは上記追加ｃｓｓで調整。
ロゴURLはJS【ロゴアニメーション 水注ぎロゴ 3文字白抜き】にいれる。
ローディングの水をいっぱいにする時間や待機時間など調整可能。
固定表示の開閉タブ
下記ｃｓｓとＪＳ【固定表示開閉タブOP/CL】でうごく。
/* ===========================
固定表示開閉タブ
見本メモ：調整エリア
ここだけ触れば見た目を変更できます
============================= */
画像・文章等が事業内容に合わない部分は、変更して納品します。画像・文章等が事業内容に合わない部分は、変更して納品します。
例）ミカン農家 → キャベツ農家
3枚横流れスライダー PC/SP兼用
下記ｃｓｓとＪＳ【横流れ3枚分スライダー】でうごく。
/* ==============================
yoko-wide
横流れスライダー 安定版
親グループ：yoko-wide-group
流れるカバー：yoko-wide-cover
文字用：yoko-wide-text
※ 1枚目左端の黒チラつき対策
============================== */
スライドスピードや余白や角丸などは大体追加ｃｓｓで調整
スライダー上の文字の配置等について
none
業種にあわせて選べるデザイン
ROCK
Works
品種・金額
Products
取り扱いレモン
対面相談1
ーーーーーーーー説明文1ーーーーーーーーーーーーーーーーーーーーーーーーー
10分 8,000円（税込）
対面相談2
ーーーーーーーー説明文2ーーーーーーーーーーーーーーーーーーーーーーーーー
20分 8,000円（税込）
対面相談3
ーーーーーーーー説明文31ーーーーーーーーーーーーーーーーーーーーーーーーー
30分 8,000円（税込）
対面相談4
ーーーーーーーー説明文4ーーーーーーーーーーーーーーーーーーーーーーーーー
40分 8,000円（税込）
【②タイトル＋説明文＋画像ver】 ※JSを 【②タイトル＋説明文＋画像】ギャラリー別ver（サービス）のPC項目をスマホに読込み/自動切換/hide-frontでJS除外/①併用不可！にすること ❶との併用不可！片方は必ずオフにすること！
下記追加ｃｓｓにて調整可能 ①②とも共通
/* ==============================
スマホ用 SERVICE 自動切替表示
※ タイトルは編集ページ側で作る版
============================== */
JSは「 【②タイトル＋説明文＋画像】ギャラリー別ver（サービス）のPC項目をスマホに読込み/自動切換/hide-frontでJS除外/①併用不可！」
Works
Products
取り扱いレモン
Works
商品・金額
Products
取り扱い商品
【無添加100%ストレートジュース】
当農園で栽培している様々な柑橘の果汁を絞ってそのまま瓶詰めしています。
河内晩柑ジュース（720ml）
2本セット
販売価格：4,050円（税込）
ぽんかんジュース（720ml）
2本セット
販売価格：4,050円（税込）
いよかんジュース（720ml）
2本セット
販売価格：4,050円（税込）
みかんジュース（720ml）
小瓶6本セット
販売価格：4,400円（税込）
季節により準備中の商品もございます
メールでのご注文も受付しております
Works
Products
取り扱い商品
この読込型のスマホ表示で文字量によってガタっとならない、上寄せにする方法は追加ｃｓｓに記載している
/* ==============================
ギャラリー型 b2/b4/b5
サービス型の高さ処理を移植
※文字量で中央基準に動くのを防ぐ土台
============================== */
↑UMI型 ↓マブロック型 それぞれやり方が違うみたいで追加ｃｓｓに記載している。
/* ==============================
スマホだけ：sp-onlyカバー内の中身を上寄せにする
目的：
・WordPressカバーの初期状態では、中身が上下中央寄せになりやすい
・SERVICE-1など、内容量が変わるスマホ用カバーで
中身全体が中央基準で上下に動くのを防ぐ
・カバー自体の位置や高さは変えず、中身の並び位置だけを上寄せにする
============================== */
下の読込み先の枠の高さ設定の調整方法
追加ｃｓｓの中のこの項目
/* ==============================
料金表全体の枠
※ ここがスクロール枠
※ スクロールバー位置はこの要素の右端で決まる
============================== */
/* 料金表の枠の高さ */
max-height: 45svh !important;
この枠の高さで調整する。
STYLIST
Director
下峠 さりみ
経験8年
【担当】
・ヘアカット
・着付け
・メイク
Stylist
龍神 円侍
経験14年
【担当】
・ヘアカット
STYLIST
【slider式プロフィール】スマホ読込後のフォントや色、構成・文章量について（重要） 増減対応可能
上記説明文が高さ枠を超えるとスクロールバー（疑似含む）が出る仕組み。高さの枠は.gym-prof-sp-textのmax-height: 250px !important;で調整する。
JS【GYMプロフィールの紹介文：高さ一定以上でscroll bar表示/スライド/スマホでスクロール負けしない/別ページで巻き戻し】との併用
/* ==============================
スマホPROFILE：PC項目読み込みスライダー 整理版
PC側：
gym-prof-source
gym-prof-img
gym-prof-role
gym-prof-name
gym-prof-text
SP側：
gym-prof-slider
仕様：
・PC側のカバーをスマホ側にそのまま表示
・本文の四角い囲み枠なし
・本文量が多い場合は本文だけ縦スクロール
・01 / 02 / 停止再生ボタンはスマホ下部に固定
・文章量で番号ボタンが上下しない
・疑似バーは残す
============================== */
基本的には追加ｃｓｓでフォントや色や、構成などは構築されている。個別で変えたいところがあれば下記名前のｃｓｓのところを変えると良い。ただし、各項目はスマホ読込されるとspという文字が追加されるから、調整するときはsp入りの名前を探すとよい。
なお、全体的にフォントを変えたいようなときには下記ｃｓｓを下のカスタムｃｓｓにいれると全体がかわる。
@media screen and (max-width: 768px){
/* 全体のフォント */
.price-sp,
.price-sp *{
font-family: 'Libre Baskerville','Zen Kaku Gothic New', sans-serif !important;
}
}
Reading Menu
Reading Menu
← Sweipe Left
下のタイトルグループでPCのみ非表示にするならグループのカスタムｃｓｓに下記をいれる。
/* ==================
PCだけ：ギャラリー現在タイトルを非表示
対象：work-current-title
================== */
@media screen and (min-width: 769px){
.work-current-title{
display: none !important;
}
}
タロット占い
西洋占星術
姓名判断
九星気学
上のギャラリーの各名称のいろはブロックからじゃ変えられない。追加ｃｓｓの .work-gallery-pc .work-current-title{ に書いてあるcolorを変える必要がある。一度ＪＳに指令がいってＪＳから文字生成しているからブロックが効かない。
不要なカバーは、クラス名にhide-frontといれ、fs-slideのクラス名を消すこと！復活させるには逆のことを
Access
千心流
主宰 高山 千心
東京都足立区〇〇3丁目〇〇
連絡先 お問い合わせフォームから
稽古日 月・火・水曜日 予約制
ABOUT
商号
Moonlight Reading Room
占い師
サラ星宮
所在
山形県●●市●●
OP/CL
15:00-22:00 ※要予約
交通
山形駅徒歩2分
山形市バス徒歩3分
ここより下hide-frontのカバーやグループをおく
none
グラデーションの設定はカスタムｃｓｓにいれている
selector{
position: relative !important;
overflow: hidden !important;
}
/* カバー画像は下 */
selector .wp-block-cover__image-background{
z-index: 0 !important;
opacity: 1 !important;
}
/* WordPress標準のカバー色は消す */
selector .wp-block-cover__background{
opacity: 0 !important;
}
/* グラデーションだけ */
selector::before{
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 0.55 !important; /* グラデの濃さ */
background: linear-gradient(
90deg,
white 0%, /* 左端の色 */
e0d226 100% /* 右端の色 */
) !important;
}
/* 斜め線だけ */
selector::after{
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
pointer-events: none !important;
opacity: 0.03 !important; /* 斜め線の濃さ */
background: repeating-linear-gradient(
-45deg, /* 斜め線の角度 */
404040 0px, /* 線の色 */
404040 4px, /* 線の太さ */
transparent 4px,
transparent 12px /* 線と線の間隔 */
) !important;
}
/* 文字は一番上 */
selector .wp-block-cover__inner-container{
position: relative !important;
z-index: 3 !important;
}