投稿者: hana@tsubaki

🧱 まずは超重要！CSSの「Boxモデル」ってなに？

luaコピーする編集する+-------------------------+ ← Margin（外側の余白）
|   +-----------------+   |
|   |   Padding       |   | ← Padding（内側の余白）
|   |  +----------+   |   |
|   |  | Content  |   |   | ← Content（中身・文字とか画像）
|   |  +----------+   |   |
|   +-----------------+   |
+-------------------------+

そしてそのボックスに「幅（width）」「高さ（height）」「余白（margin, padding）」をCSSで指定していくのがレイアウトの第一歩！

🧲 そして現代CSSの魔法：Flexbox！

Flexbox（フレックスボックス）は、要素を簡単に並べたり中央に揃えたりできる魔法のレイアウトツール。

✅ 例：横並びにしたいとき

css

.container {
  display: flex;
}

これだけで、中の要素たちが横に並ぶんだ！

よく使うFlexのプロパティ：

🎯 ミッション：これやってみよう！

html

  <div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

css
 .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 20px;
}

.box {
  width: 100px;
  height: 100px;
  background: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

これをコピペしてブラウザで見てみて。
そしたら、中央に並んだ青いボックスたちが現れるよ✨

ここまででどう？
もうちょっと深掘りしたい部分とか、「え、それってどうなってるの？」みたいなのあったら、なんでも聞いて！
その調子だ弟子よ、センスあるぞ〜💪

WordPressでHTMLを書く場所（ブロックエディター編）

🔧 方法①：カスタムHTMLブロックを使う！

1. 投稿 or 固定ページの編集画面で、
   「＋」マーク →「カスタムHTML」ブロックを選択！
2. その中に、HTMLをガッツリ書いてOK！

html
　<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

↑これをそのまま貼り付ければOK。
あとは、style.css に書いたCSSがちゃんと反映されるように、CSSの読み込み場所だけ確認！

🧠 補足：style.cssの場所がちゃんと読み込まれてる？

子テーマの style.css に書いたなら、すでに反映されてるはずなんだけど…

もし「あれ？反映されてないぞ？」ってときは、念のため**「外観」→「カスタマイズ」→「追加CSS」**のほうに書いて確認してもOK！

✨でも今日から君は“Gutenberg使い”だ！！

Gutenberg（ブロックエディター）は最初こそ「え、なにこれ…Wixかよ？」って感じだけど、
慣れると意外と快適＆柔軟にカスタムできる神エディターなんよ！

しかも、カスタムHTMLブロック使えば
「ここだけHTMLで自由に作る」
ってことができるから、CSSと合わせてめっちゃ勉強になる🔥

💡ネオ流アドバイス：

• クラシックエディターは「超緊急時」だけ使う！
  • 例えば「一時的にどうしても崩れるから確認したい」とか。
• ふだんはGutenbergのカスタムHTMLで組む！
  • ブロック構造＝WEBの構造理解につながる！

どうする？今日の修行、まだ続けるか？🔥

🧪 今日のお題：「3つのボックスを中央に横並び表示」するパーツを作ろう！

✨ゴールイメージ：

• 横に並んだ3つの箱
• 画面の中央に表示
• かっこよく中央揃え
• スマホでもいい感じにレスポンシブ対応

🧱 HTML（GutenbergのカスタムHTMLブロックに貼るやつ）

html
　<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

🎨 CSS（style.css に追加してOK！）

css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 40px;
  flex-wrap: wrap; /* レスポンシブ対応 */
}

.box {
  width: 150px;
  height: 150px;
  background-color: #6ec6ff;
  color: white;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.box:hover {
  transform: scale(1.05);
  background-color: #00b0ff;
}

✅これでできること：

• 横並び（PCでもスマホでもOK）
• ホバーでぷにっと動く✨
• Flexboxの使い方を体で覚えられる！

🔧 実践ミッション！

1. WordPressのテストページを作る
2. 「カスタムHTML」ブロックを追加
3. 上のHTMLを貼り付ける
4. CSSは style.css に追加！
5. ブラウザで確認 → ニヤける😎

✅ 確認ポイントを一緒にチェックしよう：

① CSSがちゃんと読み込まれてる？

まず、style.css に書いたスタイルがページに反映されてるかどうか。

• 他のスタイル（色とか背景）が反映されてる？
  • → されてないなら、CSSの場所か読み込みに問題あるかも！

💡 テストで .box { background: red; } とかやってみて！

② CSSのセレクターは正しい？

HTMLでは .box クラスついてる？

html
<div class="box">Box 1</div>

とか、これがちゃんと .box になってるか確認！

③ ホバーしても変化しない？

transform: scale(1.05) ってのは、マウスを当てたときに拡大されるようにしてるやつなんだけど…

WordPressによっては、CSSがうまく反映されないことがあるから、ちょっと強制力強めてみよう👇

cssコピーする編集する.box:hover {
  transform: scale(1.05) !important;
  background-color: #00b0ff !important;
}

④ もしかして「追加CSS」に書いちゃってる？

それはそれでOKだけど、他のCSSとバッティングしてる可能性もあるので、

cssコピーする編集する.box {
  transition: transform 0.3s ease !important;
}

とか、transitionにも !important つけてみて確認。

🧪 最終テストCSS（これで動かなかったら教えて）

css
.box {
  width: 150px;
  height: 150px;
  background-color: #6ec6ff;
  color: white;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease !important;
}

.box:hover {
  transform: scale(1.05) !important;
  background-color: #00b0ff !important;
}

🔍 原因の可能性：

transition は効いてるんだけど、transform の初期値（＝通常状態）を書いてないから、
最初から「拡大状態」になってるんだ！🥹

✅ 解決方法：初期状態に transform: scale(1) を追加しよう！

css
.box {
  transform: scale(1); /* ←これを追加してあげる */
  transition: transform 0.3s ease;
}

最終的なコードはこう👇

css
.box {
  width: 150px;
  height: 150px;
  background-color: #6ec6ff;
  color: white;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transform: scale(1); /* 初期値ちゃんと設定 */
  transition: transform 0.3s ease;
}

.box:hover {
  transform: scale(1.05);
  background-color: #00b0ff;
}

🔧 補足：CSSアニメーション・トラブルあるある

• transition を使うときは、変化前の状態もちゃんと定義する
• transform や opacity など、初期値を忘れがちなので注意！

さあ、これで最初は通常サイズ → マウスホバーでぷにっとなるはず！
やってみて、「ぷに…きた…✨」ってなったら報告してくれ！

その瞬間を一緒に噛みしめようぜ！ネオはいつでも隣にいるぞ😎

4o

あなた:

師匠、治りません！先のボックスの方へも transform: scale(1);は書き込むんですか？

ChatGPT:

おおぉっ、よく気づいた！！それ、めちゃくちゃ重要な観点だ！！👏👏👏
弟子よ、キミはすでにCSSの「流れ」を掴み始めているぞ！

🎯 回答：

はい、transform: scale(1); は .box クラスに書けば、すべてのボックスに適用される！
（個別に「先頭のボックスだけ」とかじゃなく、全体に適用されるようにするのがポイント！）

💡ここがポイント！

CSSのクラス .box に対して、

cssコピーする編集する.box {
  transform: scale(1);
}

と書けば、すべての .box 要素（1個目、2個目、3個目全部）に対して、**「初期状態は1倍のサイズ」**という指定が入るんだ。

🧪 チェックリスト（再確認しよう！）

HTMLにクラス名が正しくついてる？

<div class="box">Box 1</div>

<div class="box">Box 2</div>

<div class="box">Box 3</div>

CSSはこうなってる？👇

.box { width: 150px; height: 150px; background-color: #6ec6ff; color: white; font-size: 20px; display: flex; justify-content: center; align-items: center; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transform: scale(1); /* ←ここ重要！ */ transition: transform 0.3s ease; } .box:hover { transform: scale(1.05); background-color: #00b0ff; }

キャッシュ消して確認してみた？（意外とこれで解決することある）

Windowsなら Ctrl + F5

Macなら Command + Shift + R

🆘 それでも動かなかったら…

• HTMLとCSSのコードをそのまま貼ってくれてOK！
• または、画面のスクショでもいい！

ネオが細部まで見て、一緒に原因ぶち抜くから安心してくれ！

お前のWEB魂🔥、ここで終わらせはしない！

4o

あなた:

あ！師匠！もしかして二つ目に書いてくれたhtmlは同じカスタムhtmlのブロックの中に書き込むのでしょうか？私、新たにカスタムhtmlを作ってそこに書き込んでしまいましたが・・・

ChatGPT:

──弟子よ……ッ！！！🔥
それだあああああああ！！！！！！（歓喜のハイタッチ！）🙌🙌🙌

🎯 ビンゴ！！

HTMLとCSSが「別の世界」で生きてたのが原因！！！

WordPressのブロックエディターでは、「カスタムHTML」ブロックは「そのブロック単体の表示にしか影響しない」ような扱いになることがあるんだ…！

つまり：

• HTMLをカスタムHTMLブロック1に書いた
• CSSは style.css に書いた
• でもその HTML は別のブロックの中になってる → CSSが効かない or 挙動がおかしくなる

っていうズレが起きることがある！

✅ 解決方法：

➤ 正しいやり方：

1つの「カスタムHTML」ブロックの中に、HTMLの構造ぜんぶまとめて書く！

htmlコピーする編集する<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

↑これをひとつのHTMLブロックの中にコピペ！

そのうえで、style.css に書いた .box や .container のスタイルがちゃんと適用されるようになる🔥

🧠 補足ネオポイント：

• カスタムHTMLブロックは「その場にHTMLを差し込む」だけだから、CSSが当たる範囲とセットで考えることが超重要！
• 複数のカスタムHTMLブロックに分けて使うのは上級者のテクニック。最初は1ブロックにまとめてOK！

🎉 さあ、やり直してごらん！

• カスタムHTMLブロックを一個だけ用意して
• そこに3つのボックスをまとめて書いて
• ページを更新＆確認！

報告、待ってる！💪

🎯 質問の答え

書いたCSSが、このHTMLに反応する理由は？

✅ CSSの「セレクター」とHTMLの「クラス名」が一致してるからだ！！

✍️ 具体的に見てみよう

たとえば、CSSにこう書いてあるよね？

cssコピーする編集する.box {
  /* スタイルいろいろ */
}

これの意味は、

「class=”box” って名前がついたHTML要素に対してこのスタイルを適用するよ！」

っていう約束なんだ。

そして、HTMLを見ると…

htmlコピーする編集する<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

って、全部**class=”box”**がついてるでしょ？
これが「CSSとHTMLがペアになってる」という状態なんだ！

だから、CSSが正しく反応して、見た目が変わる。

🧠 もうちょっとだけ深堀り

CSSセレクターには種類がある！

今やってるのは**クラスセレクター（.box）**を使ったやり方だね！

🔥 結論まとめ

• HTMLのclassと
• CSSの.クラス名

これが一致してるから、反応する！！！
（兄弟みたいなもんだと思えばOK！）

👑 ネオ流・応用アドバイス

「どのCSSがどのHTMLに効いてるのか」を目で確認するためには、
ブラウザの開発者ツールを使うとさらにレベルアップできる！

Chromeなら：

• 右クリック → 「検証」
• 該当要素をクリック
• 右側に「このCSSが効いてるよ」って一覧が出る！

これ、めちゃくちゃ強力だから、あとで一緒にやろうな！
（これできると、どんなサイトでも裏側丸見えレベルになる）

🔥 正解！！

はい！ズバリその通り！！

cssコピーする編集するbody {
  background-color: yellow;
}

h1 {
  color: #0099cc;
  text-align: center;
}

これはまさに「タグセレクター」ってやつ！

• body → HTML全体を包むタグ
• h1 → 見出しタグ

CSSが「このタグ全体にこういうスタイル当てるよ！」って指示してるんだ！

🧠 でも…「昨日はHTML書いてない」のに効いた理由は？

これ、WordPressが勝手にHTMLを書いてくれてるから！！

🔍 たとえば：

投稿ページで「見出し（H1）」ブロックを追加したとき、
WordPressは裏側でこういうHTMLを勝手に生成してるんだ👇

htmlコピーする編集する<h1>こんにちは世界！</h1>

それに対して、キミが書いたCSSの h1 { color: #0099cc; } が
ビシィッと効いてたってわけ！！✨

💡 WordPressは「HTMLの工場」

• ブロックを選ぶ → WordPressがHTMLを生成
• スタイルを書く → CSSがそのHTMLに反応
• 自分でHTMLを書く → より自由にデザインできる

っていう仕組みだから、CSSがどう反応するかを理解しておくのは超大事！！

✅ 今やってること＝めちゃくちゃ応用力の高いルート！

HTMLとCSSが「手をつないで動く」っていう感覚が身についたら、
もうね、WordPressでもHTMLファイルでも、どこでも戦えるようになるぞ⚔️

👑 総まとめネオポイント

その観察力と気づき、ほんとスゴい！
この勢いでCSSマスターして、「思った通りのデザインが実現できる自分」になろうぜ！

次やりたいこと、試したいことがあれば、いつでも言ってな！🔥

✅ body タグの役割

• body はページ全体を包み込んでいるタグだよ！
• background-color: yellow; を body に設定すると、ページ全体（背景）が黄色になるんだ！🟡

つまり、body はサイト全体の背景色やフォント、配置など、全体的な「外枠」のスタイルを担当する役割があるんだね！
すごく重要な部分だ！

✅ 見出し（h1, h2など）の役割

• h1 や h2 は、ページのタイトルやセクションの見出しを示すHTMLタグ。
• WordPressで「見出し」ブロックを使うと、裏で h1 や h2 タグが作られるから、そのままページ上で大きな文字で表示されるんだ。

htmlコピーする編集する<h1>こんにちは、WEBデザインの世界へ！</h1>

だから、見出し（h1、h2）の選択はそのページやセクションの「階層」や「重要度」を決めるために重要だよ！

• h1 は最も重要な見出し（通常はページのタイトル）
• h2 は次のセクションの見出し、こんな感じで「階層的に」使っていくんだ。

✨ まとめると：

• body の背景色は、サイト全体に効く！
• h1, h2 などは見出しのタグで、それぞれのセクションや内容の重要性を示すために使う！
• CSS でそれぞれの要素にスタイルを当てて、デザインを調整していく！

これで、さらにWEBの全体像が見えてきたな！！
次はCSSの応用や「レイアウト調整」へ進む時が来たかもしれない…🔥💻

何か気になること、わからないことがあれば、また気軽に聞いてくれ！
ネオはいつでもサポートするから、迷わず進んでいこう！💪

🧩 状況整理してみよう！

✅ サブドメインを作成した（ナイス！）

❌ DNS認証がまだ通ってない（ムームードメイン側？）

❓ サブドメインがマイページで表示されない（←ここがキーかも）

🔍 よくあるムームーでのつまづきポイント

① サブドメインは「ムームーDNS設定」では見えない

→ 実は、ムームードメインの「ドメイン一覧」には表示されないことがある。

✅ チェックポイント：

ムームー管理画面 → 「ドメイン操作」→「ムームーDNS」

対象の「メインドメイン」を選択

DNSレコード追加に「サブドメイン」の設定ができるようになってる？

例：

たとえば sub.example.com にしたいなら、サブドメイン欄に sub と入力して、サーバーの指示通りにCNAMEかAレコードを設定する必要があるよ。

② サーバー側の設定とリンクできてない場合

→ 例えばエックスサーバーやロリポップでサブドメインを追加したのに、DNSがまだ通ってないときは…

✅ チェックポイント：

サーバー側で「ドメイン追加」 or 「サブドメイン追加」が完了してる？

DNS反映には最大24時間くらいかかることもある（だいたい1〜2時間で通るけど）

🧠 アクションプラン

サーバーとムームー、どちらでサブドメイン設定を行ったか整理しよう！

まずは、使ってるレンタルサーバーの名前と、やろうとしてるサブドメイン名（例：dev.example.com）を教えてもらってもいい？

🧩 状況整理（最新版）

✅ ムームードメインでサブドメインを作成しようとした

✅ ロリポップでサブドメインの設定をした

❌ DNSとSSLがうまく通らず、WordPressがインストールできない状態

✅ ここで確認したいこと（チェックリスト）

① ロリポップでサブドメインを追加できてる？

ロリポップの管理画面から
「サーバーの管理・設定 → サブドメイン設定」 に行って、

サブドメインが追加されてる？

「公開フォルダ名」は指定してる？ （例：dev ってサブドメインなら dev.example.com → /dev/ というフォルダが作られる）

② ムームードメイン側のDNSレコードは？

ムームードメイン → 「ムームーDNS」 → ドメインを選択 →
以下のような設定が必要！

💡 ロリポップで「Aレコード」用のIPが出てるはず！
それをムームー側に入力すればOK。

③ SSL化はDNSが通った後じゃないとできない

ここ、落とし穴ポイント！

🔥 SSL（https）は、DNSが反映完了してから申請しないとエラーになる！

だから今は慌ててSSL化せずに、まずはサブドメインがブラウザで開けるか確認しよう！

🚀 今日のアクションプラン

ロリポップ側でのサブドメイン追加が完了してるか確認

ムームードメインでAレコード設定（またはCNAME）をチェック

しばらく待って、サブドメインが開けるか確認（数分〜1時間かかる場合あり）

成功したら、ロリポップでSSL申請 → その後WordPressインストール！

弟子死にそうっす…

子テーマを作成する際に、FTPで作ったフォルダについての簡単な説明

PHPとfunctionって何？

こんな感じのことをfunctions.phpに書くことが多い：

• テーマのカスタマイズ（さっきみたいにCSSを読み込む指示）
• カスタム機能を追加（新しいウィジェットとか）
• プラグインとの連携（例えば、SEO対策用のプラグインを読み込むなど）

🧩 functions.phpのイメージ

php

<?php

// 親テーマのCSSを読み込む

wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

// 子テーマのCSSを読み込む

wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-style’) );

このコードは、「親テーマ」と「子テーマ」のCSSを両方読み込む指示を与えてるんだよ。
まるでレシピみたいに、「これとこれを組み合わせてこうなるよ！」って指示を出してる感じ。

🌱 じゃあPHPがわかるようになると何ができる？

🌟 PHPを学ぶ一歩：

1. 基本的な文法を理解する
   • PHPは「変数」や「関数」を使って処理をする言語
   • echo で画面に文字を出すとか
2. WordPress独自の「フック」や「アクション」を学ぶ
   • add_action() や wp_enqueue_style() みたいな関数は、WordPress特有の「命令」だから覚えると便利

PHPも踏み込んで学べるようになれば、WEB制作の幅が広がるよ！

親テーマの更新によりレイアウトが崩れたりしないように子テーマを作成する

子テーマはFTPを使用し「themes」に新たにフォルダを作り作成する

子テーマフォルダの作成手順（FTP内）

1. wp-content フォルダを開く（ダブルクリック）
2. 中に「themes」というフォルダがあるので開く
3. その中に、右クリック or [新しいフォルダ作成]（ロリポップならボタンある）で
   👉 フォルダ名：twentytwentyfive-child

これで子テーマの“家”が完成🏠✨

🔧 次は中にファイルを作ろう！

そのフォルダ（twentytwentyfive-child）を開いて、以下のファイルを作成して中身を入力：

1. 📄 style.css

新規ファイル → 名前：style.css

中身はこれ↓

css

/*

 Theme Name:   Twenty Twenty-Five Child

 Template:     twentytwentyfive

*/

2. 📄 functions.php

もう一つ、新規ファイル → 名前：functions.php

中身はこれ↓

php

<?php

add_action( ‘wp_enqueue_scripts’, ‘enqueue_styles’ );

function enqueue_styles() {

    // 親テーマのCSS

    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

    // 子テーマのCSS

    wp_enqueue_style( ‘child-style’,

        get_stylesheet_directory_uri() . ‘/style.css’,

        array(‘parent-style’) // ← 親CSSの後に読み込むよう指定

    );

}

🎉 子テーマができたら

1. WordPress管理画面に戻る
2. 「外観」→「テーマ」に行くと、Twenty Twenty-Five Childが出てきてるはず！
3. それを「有効化」すればOK！

CSSが反映されない時のチェックリスト

✅ 1. 子テーマ、ちゃんと有効化されてる？

• WP管理画面 → 「外観 → テーマ」
• 「Twenty Twenty-Five Child」が「有効」と表示されてることを確認！

✅ 2. style.cssの内容、ちゃんと保存した？

• FTPやファイルマネージャーで編集して、保存ボタン押したか？
• 試しにこういうシンプルなCSSを入れてみて：

css

body {

  background-color: yellow;

}

めちゃくちゃ目立つから、変わったかどうか分かりやすい😂

✅ 3. ブラウザのキャッシュが邪魔してない？

• 試してみて：
  • Windows → Ctrl + F5
  • Mac → Command + Shift + R
  • または「シークレットモード」で開くのもおすすめ

✅ 4. style.cssがちゃんと読み込まれてるか？

うっかり functions.php の読み込みコードをミスってるとCSSが効かない！

確認する内容はこれ👇
twentytwentyfive-child/functions.php にこうなってる？

php

コピーする編集する

<?php

add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );

function enqueue_parent_styles() {

    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

}

✅ 5. ブロックテーマのCSSに“打ち消されてる”可能性

Twenty Twenty-Fiveは theme.json でデザイン管理されてるから、セレクタが弱いと無視されることもある！

例えばこれを試してみて：

css

コピーする編集する

body {

  background-color: yellow !important;

}

!important をつけると、強制的に優先されるようになる🔥
ただし多用はNGだけど、動作確認には最適！

✅ ページのソースを開いて、style.cssが読み込まれてるか見る！

1. 自分のサイトをChromeで開く（投稿ページなど）
2. 右クリック → 「ページのソースを表示」をクリック
3. Ctrl + F（検索）して、twentytwentyfive-child と入力！

💡 これが出てきたら成功：

html

コピーする編集する

<link rel=’stylesheet’ id=’parent-style-css’ href=’https://あなたのサイト/wp-content/themes/twentytwentyfive/style.css?ver=xxx’ type=’text/css’ media=’all’ />

もしくは twentytwentyfive-child/style.css が読み込まれてる記述！

出てこないなら…functions.phpのコードに問題があるかも！

body {
background-color: #f0f8ff;
}

h1 {
color: #0099cc;
text-align: center;
}

注意事項

• テーマの更新が行われてもよいように、子テーマに記載
• FTPツールを使ってStyle.cssに直接入力
• 簡易の場合は外観→カスタマイズ→追加cssに入力
• 子テーマを使用して表示されない場合はfunctions.php