@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 4.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

Claudeが応答を完了しました

思考時間：1分12秒
思考時間：1分12秒
011に進みます。まず波線の色を決めたいので、お知らせ帯と合わせて実際に描画して比べます。


5個のコマンドを実行しました, 4個のファイルを表示しました, ファイルを作成しました · 2 ノート




5個のコマンドを実行しました, 4個のファイルを表示しました, ファイルを作成しました · 2 ノート
011を組みました。style.css と preview.html は010＋011の両方が入った状態に更新しています。

波線は白に決めました。 2案を実際に描画して比べたところ、白にするとヒーローの下端が白い波としてお知らせ帯に流れ込み、ヒーローから帯までが1つの形になります。生成りのままだと背景と同色で何も見えません。010のHTMLの fill="#FBF7EF" を fill="#ffffff" に置換してください。手元の010_hero.mdは更新済みです。

ここはカスタムHTMLにできませんでした。 堀江先生が投稿したお知らせが自動で出る必要があるからです。標準の「最新の投稿」ブロックでも組めますが、日付が 2026年8月22日 形式になり 8/22 にするにはサイト全体の日付形式を変えることになる、日付がタイトルの後ろに出る、お知らせ0件のとき空の白帯が残る、という3点が引っかかります。functions.php に20行のショートコードを足すほうが素直でした。堀江先生の操作は「お知らせカテゴリで投稿するだけ」で変わりません。

スマホで1件目のタイトルが「無…」で切れていたので、2行ぶんの窓に広げました。1コマの高さを変数1つで管理して、切替アニメーションもそれを参照しているので、高さを変えても崩れません。360・390・1280pxで省略なしを確認しています。

あわせてカテゴリのスラッグは英数字にしてください（news / local / tips）。071の前倒しですが、日本語スラッグだとURLが読めない文字列になり、あとから変えるとリンクが切れます。

ひとつ運用ルールが必要です。お知らせのタイトルは25字前後まで。 帯が1行（スマホ2行）しかないので、長いと末尾が切れます。マニュアル②（ブログ更新の仕方）に1行入れておく内容なので、092のときのために011のメモに書いておきました。

次は012（数字の実績4カード）です。そこで判断が要るのが**「得意科目100%」の根拠表記**で、仕様書の「根拠が弱いことは断定しない」に照らすと母数を添えるかどうかを決めることになります。


011 news
ドキュメント · MD 

Style
コード · CSS 

Preview
コード · HTML 

Final 390
画像 · PNG 

Final 1280
画像 · PNG 

010 hero
ドキュメント · MD 
ワードプレス側、何もしていないけどいいの？


11秒間思考しました
11秒間思考しました
いいえ、よくないです。010も011も、まだ完了していません。

私が渡したのは全部、貼る前の材料です。CSS、フォント、ショートコード、正解の見た目。サーバー上のWordPressには1つも反映されていないので、チェックリストの010・011は ☐ 未着手 のままです。

正直に言うと、「はい」を011着手の合図と受け取ったのは私の勇み足でした。010が実機で正しく出ることを確認しないまま012、013と進めるのは危ないです。 特にSANGOの見出し装飾の打ち消しが効くかどうかは、実際の環境でしか分かりません。ここが崩れると011以降のCSSも前提が変わります。ここで一度止めて、実機に反映するのが順番です。

WordPress側でやることは、この順番です。

まずファイル。 子テーマに style.css を反映（既存があれば末尾に追記）、fonts/hope-rounded-800.woff2 を子テーマ直下の fonts/ に配置、functions.php にショートコードを追記。ついでにCSSのキャッシュ対策も入れておくと、以降の修正が楽になります。

次に設定。 設定→表示設定でホームページを固定ページ「トップ」に。ページ属性を1カラム（サイドバーなし）にして、SANGOのページタイトル表示をオフ。投稿→カテゴリーで news / local / tips を作成。お知らせカテゴリに記事を3本（動作確認用のダミーで構いません）。

最後に組む。 固定ページ「トップ」で、グループブロック（全幅）→ カスタムHTMLにヒーローのHTML。その下にグループブロック（全幅）→ ショートコードブロックに [hope_news]。

ここまでやってBASIC認証下で開き、preview.html と見比べてください。手順の詳細は 010_表示確認.md にあります。

崩れたら、開発者ツールでキャッチを選んだStylesパネルのスクショを送ってください。すぐ直します。012はそのあとにします。

style.cssの中身を子テーマの追加CSSの中に貼り付けた


15秒間思考しました
15秒間思考しました
それだとフォントが読めません。 貼った場所によって直し方が変わるので、まずそこを確認させてください。

「追加CSS」がカスタマイザー（外観 → カスタマイズ → 追加CSS）の欄なら、2つ問題があります。

ひとつ、@font-face の相対パスが解決できません。 追加CSS欄の中身はページの <head> に直接書き出されるので、url("fonts/hope-rounded-800.woff2") はテーマフォルダではなくページのURLを基準に探しにいきます。https://.../fonts/hope-rounded-800.woff2 を見て404になり、見出しは標準書体のまま出ます。

ふたつ、大原則に反します。 「カスタムCSSは子テーマの style.css だけ」と決めて、マニュアル③にも書く予定でした。ここで崩すと、半年後に「あの余白どこで指定したっけ」が起きます。堀江先生がカスタマイザーを開いたときに見えてしまう場所でもあります。

推奨は、子テーマの style.css ファイルに移すことです。 外観 → テーマファイルエディター → 編集するテーマで子テーマを選ぶ → 右の一覧から style.css。そこに貼り直して、カスタマイザーの追加CSS欄は空にしてください。両方に残すと二重管理になります。相対パスはそのままで正しく効きます。

もし事情があって追加CSS欄のまま進めたい場合は、@font-face の src だけ絶対パスに変えれば動きます。

css
src:url("/wp-content/themes/【子テーマのフォルダ名】/fonts/hope-rounded-800.woff2") format("woff2");
フォルダ名はテーマファイルエディターの画面で確認できます。ただしフォルダ名をCSSに直書きすることになるので、応急処置と考えてください。

確認したいことが2つあります。フォントファイルはもうアップロードしましたか。 子テーマ直下に fonts/ を作って hope-rounded-800.woff2 を置く作業です。CSSだけ貼っても、ファイルが無ければ読めません。

もうひとつ、style.css に貼り直しても何も変わらない場合は、SANGOの子テーマが style.css を読み込んでいない可能性があります。そのときは 010_表示確認.md のC-2にある functions.php の追記を入れてください。読み込みとキャッシュ対策を兼ねています。

どちらに貼ったか教えてもらえれば、そこから続けます。

screencapture-hopekidsenglish-wp-admin-themes-php-2026-08-23-22_22_53.png
具体的にどこ？


12秒間思考しました
12秒間思考しました
画面の左メニューにある**「テーマファイルエディター」**です。外観の下、背景の下にあります。

順番はこうです。

1. 外観 → テーマファイルエディター
2. 画面右上「編集するテーマを選択」で SANGO Child を選び、「選択」を押す（ここを間違えて親テーマのまま編集すると、SANGO更新時に消えます）
3. 右側の「テーマファイル」一覧から スタイルシート（style.css） をクリック
4. 既存の中身の末尾に貼り付けて、下の「ファイルを更新」

そのうえで、カスタマイザーの追加CSS欄は空にしてください。 外観 → カスタマイズ → 追加CSS です。両方に残すと、どちらが効いているか分からなくなります。

functions.php も同じ画面です。一覧の中の**「テーマのための関数（functions.php）」**に、011のショートコードを追記します。

ただしフォントファイルは、この画面では置けません。 テーマファイルエディターはテキストしか扱えないためです。エックスサーバーのファイルマネージャーかFTPで、この場所に fonts フォルダを作って hope-rounded-800.woff2 を入れてください。

/【ドメイン】/public_html/wp-content/themes/【子テーマのフォルダ名】/fonts/
子テーマのフォルダ名は、テーマファイルエディターを開いたときのURLの末尾（&theme= のあと）に出ています。

もうひとつ、左メニューに**「TS Webfonts for …」**というプラグインが見えています。これはモリサワのWebフォントを外部から読み込むものです。有効だと、仕様書の「外部フォントは読み込まない」に反するうえ、こちらで用意した見出しフォントを上書きしてしまう可能性があります。使う予定がなければ、停止してから表示確認に進んでください。使う予定があるなら、そもそも自前配信の話が変わってくるので教えてください。



Claudeが応答したときに通知を受け取りますか？




Claude は AI のため、誤りを含む可能性があります。回答内容は必ずご確認ください。
Style · CSS
/* ============================================================
   Webフォント（見出しのみ・自前配信）
   M PLUS Rounded 1c ExtraBold / SIL Open Font License 1.1
   Copyright 2016 The Rounded M+ Project Authors
   ※サイト内の見出しで使う文字のみのサブセット（1,008字 / 145KB）
   ============================================================ */
@font-face{
  font-family:"Hope Rounded";
  src:url("fonts/hope-rounded-800.woff2") format("woff2");
  font-weight:700 900;
  font-style:normal;
  font-display:swap;
}
 
/* ============================================================
   010｜トップ ファーストビュー（A案ヒーロー）
   ============================================================ */
 
/* --- 全体 --- */
.hope-hero{
  position:relative;
  overflow:hidden;
  padding:60px 0 108px;
  background:linear-gradient(180deg,#CFEBFA 0%,#E4F5FC 44%,#FBF7EF 100%);
  text-align:center;
}
.hope-hero__inner{
  position:relative;
  z-index:2;
  max-width:1060px;
  margin:0 auto;
  padding:0 22px;
}
 
/* --- 保険：グループブロックの「全幅」が効かない場合だけ有効化 ---
.hope-hero{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
}
body{ overflow-x:hidden; }
   ※有効化したら、スマホで横スクロールが出ないか必ず確認する
--- */
 
/* --- 空の装飾（太陽・雲） --- */
.hope-hero__sun{
  position:absolute; top:34px; right:9%;
  width:84px; height:84px; border-radius:50%;
  background:radial-gradient(circle,#FFF3D4,#FCE4A8);
  box-shadow:0 0 54px 18px rgba(252,228,168,.5);
}
.hope-hero__cloud{
  position:absolute; background:#fff; border-radius:100px; opacity:.82;
}
.hope-hero__cloud::before,
.hope-hero__cloud::after{
  content:""; position:absolute; background:#fff; border-radius:50%;
}
.hope-hero__cloud--1{ width:110px; height:30px; top:66px; left:6%; }
.hope-hero__cloud--1::before{ width:46px; height:46px; top:-20px; left:18px; }
.hope-hero__cloud--1::after { width:34px; height:34px; top:-12px; left:54px; }
.hope-hero__cloud--2{ width:80px; height:24px; top:140px; right:20%; opacity:.7; }
.hope-hero__cloud--2::before{ width:36px; height:36px; top:-14px; left:14px; }
.hope-hero__cloud--2::after { width:26px; height:26px; top:-8px;  left:42px; }
 
/* --- キッカー（教室エリア＋一言） --- */
.hope-hero__kicker{
  display:inline-block;
  margin:0 0 22px;
  padding:7px 20px;
  background:#fff;
  color:#1B3A8F;
  font-size:12.5px;
  font-weight:800;
  line-height:1.6;
  border-radius:30px;
  box-shadow:0 4px 12px rgba(27,58,143,.14);
}
.hope-hero__kicker b{ color:#0E7FC0; }
 
/* --- 白鳥（絵文字／ロゴ画像 共通） --- */
.hope-swan{
  display:block;
  width:-moz-fit-content;
  width:fit-content;
  margin:0 auto 6px;
  font-size:88px;
  line-height:1;
  filter:drop-shadow(0 12px 20px rgba(43,179,243,.32));
  animation:hopeFloat 4s ease-in-out infinite;
}
.hope-swan img{ display:block; width:110px; height:auto; }
 
@keyframes hopeFloat{
  0%,100%{ transform:translateY(0)     rotate(-3deg); }
  50%    { transform:translateY(-14px) rotate(0); }
}
/* 端末が「視差効果を減らす」設定なら停止 */
@media (prefers-reduced-motion: reduce){
  .hope-swan{ animation:none; }
}
 
/* --- キャッチ（SANGOの見出し装飾を打ち消してから指定） --- */
.hope-hero__title{
  margin:0 0 16px;
  text-wrap:balance;
  padding:0;
  border:none;
  background:none;
  color:#3E4A5B;
  font-size:clamp(21px,6.4vw,43px);
  line-height:1.42;
  font-weight:800;
  letter-spacing:.01em;
}
.hope-hero__title::before,
.hope-hero__title::after{ content:none; display:none; }
 
/* 黄色のマーカー */
.hope-mark{
  padding:0 6px;
  background:linear-gradient(transparent 58%,#FFE39A 58%);
}
 
/* --- サブコピー --- */
.hope-hero__sub{
  margin:0 0 32px;
  color:#8290A0;
  font-size:clamp(12.5px,3.4vw,16.5px);
  font-weight:500;
  line-height:1.9;
}
.hope-hero__accent{ color:#0E7FC0; }
 
/* --- ボタン --- */
.hope-hero__cta{
  display:flex;
  gap:13px;
  justify-content:center;
  flex-wrap:wrap;
  margin:0;
}
.hope-hero .hope-btn{
  display:inline-block;
  padding:15px 32px;
  border-radius:40px;
  font-size:15.5px;
  font-weight:800;
  line-height:1.5;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.hope-hero .hope-btn--line{
  background:#06C755;
  color:#fff;
  box-shadow:0 8px 20px rgba(6,199,85,.3);
}
.hope-hero .hope-btn--ghost{
  padding:15px 28px;
  background:#fff;
  color:#1B3A8F;
  box-shadow:0 6px 15px rgba(27,58,143,.13);
}
.hope-hero .hope-btn:hover{ transform:translateY(-2px); }
.hope-hero .hope-btn:focus-visible{ outline:3px solid #0E7FC0; outline-offset:3px; }
 
@media (prefers-reduced-motion: reduce){
  .hope-hero .hope-btn{ transition:none; }
  .hope-hero .hope-btn:hover{ transform:none; }
}
 
/* --- 下端の波線 --- */
.hope-hero__wave{
  position:absolute;
  left:0; bottom:-1px;
  width:100%;
  display:block;
}
 
/* --- スマホ（★モックに無かったので補完。訪問者の7〜8割がスマホ） --- */
@media (max-width:768px){
  .hope-hero{ padding:40px 0 76px; }
  .hope-hero__title{ line-height:1.5; }
  .hope-hero__sub{ margin-bottom:26px; text-wrap:balance; }
  /* 固定の改行位置はスマホだと孤立行を生むので、自然に流す */
  .hope-hero__sub br{ display:none; }
  .hope-hero__kicker{ font-size:11.5px; padding:6px 15px; }
  .hope-swan{ font-size:62px; }
  .hope-swan img{ width:82px; }
  .hope-hero__sun{ width:56px; height:56px; top:20px; right:6%; }
  .hope-hero__cloud--2{ display:none; }
  .hope-hero__cta{ flex-direction:column; align-items:center; gap:10px; }
  .hope-hero .hope-btn{ width:100%; max-width:330px; text-align:center; }
}
 
/* ============================================================
   見出しへのフォント適用（本文には当てない）
   ※ブログ記事(.single)は対象外。サブセットに無い漢字が混ざるため
   ============================================================ */
.hope-hero__title,
.hope-hero__kicker,
.hope-btn,
.page .entry-content h2,
.page .entry-content h3,
.page .entry-content h4{
  font-family:"Hope Rounded",
              "Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4",
              "Hiragino Sans","Noto Sans JP",sans-serif;
}
 
/* ============================================================
   011｜トップ お知らせ帯（自動切替）
   ※中身は「お知らせ」カテゴリの投稿。堀江先生が投稿すると自動で入る
   ============================================================ */
.hope-news{
  background:#fff;
  border-bottom:1px solid #DBF0FB;
}
.hope-news__inner{
  display:flex;
  align-items:center;
  gap:16px;
  max-width:1060px;
  margin:0 auto;
  padding:13px 22px;
}
.hope-news__tag{
  flex-shrink:0;
  margin:0;
  padding:5px 14px;
  background:#2BB3F3;
  color:#fff;
  font-size:11.5px;
  font-weight:800;
  line-height:1.6;
  border-radius:20px;
}
 
/* --- 切り替え窓 --- */
/* 1コマの高さ。スマホは2行ぶんに広げる（下のメディアクエリで上書き） */
.hope-news{ --hope-news-h:26px; }
 
.hope-news__track{
  flex:1;
  min-width:0;
  height:var(--hope-news-h);
  overflow:hidden;
}
.hope-news__list{
  margin:0;
  padding:0;
  list-style:none;
}
.hope-news__item{
  height:var(--hope-news-h);
  line-height:26px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13.5px;
}
.hope-news__item a{
  color:#3E4A5B;
  text-decoration:none;
}
.hope-news__item a:hover{ text-decoration:underline; }
.hope-news__date{
  margin-right:6px;
  color:#8290A0;
  font-weight:700;
}
 
/* --- 自動切替。末尾に1件目の複製があるので、戻りが見えない --- */
.hope-news__track[data-count="2"] .hope-news__list{ animation:hopeNews2 12s infinite; }
.hope-news__track[data-count="3"] .hope-news__list{ animation:hopeNews3 18s infinite; }
 
@keyframes hopeNews2{
  0%,42%  { transform:translateY(0); }
  50%,92% { transform:translateY(calc(var(--hope-news-h) * -1)); }
  100%    { transform:translateY(calc(var(--hope-news-h) * -2)); }
}
@keyframes hopeNews3{
  0%,28%  { transform:translateY(0); }
  33%,61% { transform:translateY(calc(var(--hope-news-h) * -1)); }
  66%,94% { transform:translateY(calc(var(--hope-news-h) * -2)); }
  100%    { transform:translateY(calc(var(--hope-news-h) * -3)); }
}
 
/* 読んでいる途中で切り替わらないように、カーソルを乗せたら止める */
.hope-news:hover .hope-news__list{ animation-play-state:paused; }
 
/* 「視差効果を減らす」設定なら、1件目だけを出す */
@media (prefers-reduced-motion: reduce){
  .hope-news__list{ animation:none !important; }
}
 
@media (max-width:768px){
  /* スマホは横幅が足りないので、2行ぶんの窓にして省略を減らす */
  .hope-news{ --hope-news-h:44px; }
  .hope-news__inner{ gap:10px; padding:11px 18px; }
  .hope-news__item{
    line-height:22px;
    font-size:12.5px;
    white-space:normal;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
}