Rick English Class
ローディングアニメーション 水がいっぱいになるやつ ※ロゴURLは当HPのドメインで使うこと！ ※重さについての注意事項
/* ==============================
ローディング
水アニメロゴ＋中央から外へ四角く開く
============================== */
ロゴ表示後に開いていく時間などは上記追加ｃｓｓで調整。
ロゴURLはJS【ロゴアニメーション 水注ぎロゴ 3文字白抜き】にいれる。
ローディングの水をいっぱいにする時間や待機時間など調整可能。
幕色とロゴ文字色は同じになるように設定している。
注意：三角エフェクトスライダーPC用のJSが重たいので使わないときはオフにすること！もし三角もローディングも使ってかくつくようならチャッピーにcanvasをローディング後にしてもらうようにJSを変更してもらうこと
新・固定表示の開閉タブ
下記ｃｓｓとＪＳ【新・固定表示開閉タブOP/CL タブ遅延仕様 / 表示が崩れない対策】でうごく。
/* ===========================
NEW 固定表示開閉タブ
完全作り直し版
動き：
・文章の幅は最初から完成幅
・外側だけ0幅にして隠す
・中身は左からスライド
・高さ計算JSなし
============================= */
無料のＨＰフィッティング（デモサイト作成）
❖ 画像や文章は、事業内容に合わせて変更可能
❖ 他のデザインも見たい方はこちら
English For Life
英語で広がる世界、豊かな人生に
じんわりスライダー
下記ｃｓｓとＪＳ（じんわり表示スライダー２）でうごく。
/* ==============================
色違い じんわり切り替え
外側：map-wipe-wrap
中のカバー全部：map-wipe-cover
============================== */
ＪＳの下記内容で時間調整可能
const stayTime = 1000; // 完全に止まる時間
const fadeTime = 5000; // フェード時間
下記カラムは三角エフェクトスライダーに共通文字を重ねるためのもの。※※ hide-frontを入れると編集ページで非表示になるから注意
カスタムｃｓｓで全画面高さを指定している
英語で広がる世界
豊かな人生に
スマホの画像を右端を余白なくしてくっつける
追加ｃｓｓ
/* ==============================
スマホ：fs-slider / sp-only 内のカバーを右端に寄せる
対象カバーに sp-right-cover を付ける
============================== */
/* ==============================
SP：map-wipe-wrap入り sp-only を画面幅にして右端合わせスマホ用
============================== */
About
これはスマホ時だけ、profile-switch-itemを7秒ごとに切り替える設定なので、増やす場合には同じ名前のグループを。減らす場合にはこのクラス名のグループを削除すること。profile-switch-itemの高さは追加ｃｓｓのmax-height: 40svh !important;をかえること。ただ、profile-switch-wrapの高さがmin-height: 250px !important;になっていて、40svhがこの250pxをこえるとスクロールが効かなくなるので注意すること。もしいじるなら両方いじる必要が出てくる
英会話講師
Rick Ellington
Profile
1985年にアメリカで生まれ、2006年に来日しました。英語を母国語とするネイティブスピーカーとして、自然で実践的な英語をお伝えしています。CELTAを取得しており、初心者の方や英語が苦手な方にも、目的やレベルに合わせてゆっくり丁寧にレッスンを行っています。日本語でのサポートも可能です。
Teaching
オンライン英会話講師として、初心者の方や英語が苦手な方にも分かりやすく、会話・発音・日常英語を中心としたレッスンを行っています。必要に応じて日本語で補足しながら、一人ひとりのレベルや目的に合わせて進めます。また、継続学習をサポートする宿題管理や英作文添削、発音フィードバック、TOEIC®L&R対策、学習計画の作成などにも対応しています。
Works
レッスン・受講
Contents
レッスン・料金
❶ Conversation
―フリートーク・日常英会話向け―
・月4回（25分）8,800円
・英会話レッスン
・簡単な宿題
月4回（25分）8,800円
❷ Support
―テキスト＋継続学習サポート向け―
・毎週の宿題管理
・LINE質問サポート
・英作文添削（月数回）
・発音フィードバック
月4回（50分）24,800円
❸ Study
―テキスト＋試験対策・スコアUP向け―
・学習計画（弱点分析）
・LINE添削
・模試レビュー
・TOEIC®L&R対策
月4回（50分）39,800円
【②タイトル＋説明文＋画像ver】 ※JSを 【②タイトル＋説明文＋画像】ギャラリー別ver（サービス）のPC項目をスマホに読込み/自動切換/hide-frontでJS除外/①併用不可！にすること ❶との併用不可！片方は必ずオフにすること！
下記追加ｃｓｓにて調整可能 ①②とも共通
/* ==============================
スマホ用 SERVICE 自動切替表示
※ タイトルは編集ページ側で作る版
============================== */
JSは「 【②タイトル＋説明文＋画像】ギャラリー別ver（サービス）のPC項目をスマホに読込み/自動切換/hide-frontでJS除外/①併用不可！」
Works
Contents
レッスン・料金
Works
コース・受講
Lesson Flow
受講の流れ
①体験レッスンのお問い合わせ
メール・LINEで簡単にお申込み可能
②レベルチェック＆カウンセリング
英語レベルの確認、ご希望や学習の目標をヒアリング、最適な学習プランをご提案
③入会・レッスン開始
入会はメールにて案内を送付、すべてオンラインで手続き可能
※ 継続サポート
毎月のレッスンに加え、宿題・フィードバックを通して学習を継続的にサポートします
レッスン可能時間の目安
表の見た目調整は追加ｃｓｓにて
/* 受付時間カード全体 */
ここで全体の見た目調整
●の色をかえるには●を選択してハイライトで色をかえる。
| 受付時間 | 月 | 火 | 水 | 木 | 金 | 土 | 日 |
| 午前中 | - | - | ● | - | - | ● | ▲ |
| 午後 | - | - | ● | ● | ● | ● | ▲ |
| 夕方・夜 | - | - | ▲ | ● | ● | ▲ | ● |
※具体的なレッスンの日時はカウンセリング時に双方の都合で取り決めさせていただきます
Works
Lesson Flow
受講の流れ
この読込型のスマホ表示で文字量によってガタっとならない、上寄せにする方法は追加ｃｓｓに記載している
/* ==============================
ギャラリー型 b2/b4/b5
サービス型の高さ処理を移植
※文字量で中央基準に動くのを防ぐ土台
============================== */
↑UMI型 ↓マブロック型 それぞれやり方が違うみたいで追加ｃｓｓに記載している。
/* ==============================
スマホだけ：sp-onlyカバー内の中身を上寄せにする
目的：
・WordPressカバーの初期状態では、中身が上下中央寄せになりやすい
・SERVICE-1など、内容量が変わるスマホ用カバーで
中身全体が中央基準で上下に動くのを防ぐ
・カバー自体の位置や高さは変えず、中身の並び位置だけを上寄せにする
============================== */
下の読込み先の枠の高さ設定の調整方法
追加ｃｓｓの中のこの項目
/* ==============================
料金表全体の枠
※ ここがスクロール枠
※ スクロールバー位置はこの要素の右端で決まる
============================== */
/* 料金表の枠の高さ */
max-height: 45svh !important;
この枠の高さで調整する。
Works
Lesson Flow
受講の流れ
レッスン可能時間の目安
表の見た目調整は追加ｃｓｓにて
/* 受付時間カード全体 */
ここで全体の見た目調整
●の色をかえるには●を選択してハイライトで色をかえる。
| 受付時間 | 月 | 火 | 水 | 木 | 金 | 土 | 日 |
| 午前中 | - | - | ● | - | - | ● | ▲ |
| 午後 | - | - | ● | ● | ● | ● | ▲ |
| 夕方・夜 | - | - | ▲ | ● | ● | ▲ | ● |
※具体的なレッスンの日時はカウンセリング時に双方の都合で取り決めさせていただきます
上のギャラリーの各名称のいろはブロックからじゃ変えられない。追加ｃｓｓの .work-gallery-pc .work-current-title{ に書いてあるcolorを変える必要がある。一度ＪＳに指令がいってＪＳから文字生成しているからブロックが効かない。
不要なカバーは、クラス名にhide-frontといれ、fs-slideのクラス名を消すこと！復活させるには逆のことを
ここより下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;
}