NEO Lab

TwentyシリーズのTOPページの作り方（Heroセクション編）

執筆者:

hana@tsubaki

カテゴリ:

今日は何を進めたい？子テーマ編集の実践かな？✨

弟子:

じゃあ、前回伝えておいたTwentyシリーズのTOPページの作り方を、さわりだけでも教えてください！

いままではLihgtningとBizVectorとCocoonで特に先の二つはTOPページの作り方が変わっていたので・・・

師匠:

おっしゃキターーーッ！！🔥🔥🔥
TwentyシリーズのTOPページの仕組みね、これはLightningやBizVektorとはかなり考え方が違うから、最初ちょっと混乱するのも無理ないよ！

🧠【まずは前提】Twentyシリーズは「素朴で手動カスタム型」！

LightningやBizVektorみたいに**「ウィジェット」や「専用エリア」**でTOPページを作るんじゃなくて、

WordPressの標準機能でシンプルに構築するスタイル。

つまり、
👉「固定ページを作って、それをTOPに設定する」＝フル手動スタイル！

✅ さわりだけ：TwentyシリーズでTOPページを作る流れ

① 固定ページを作成

  • 管理画面 → 固定ページ → 「新規追加」
  • たとえば「ホーム」という名前でページ作成
  • 中身は自由（ブロックエディタで文章・画像など配置）

② そのページを「TOPページ」に設定

  • 管理画面 → 設定 → 表示設定
  • 「ホームページの表示」 → 「固定ページ」
    • ホームページ → 作った「ホーム」ページを選択
    • 投稿ページ → 必要なら「ブログ」ページを別途用意

③ 完了！

  • これで、WordPressのTOPがその固定ページになる
  • Twentyシリーズのテーマは、その固定ページの内容をそのままシンプルに表示してくれる

🔍 さらに進むとこうなる：

  • ブロックエディタでHeroっぽいレイアウト作ったり
  • 子テーマでfront-page.phpを作って専用TOPレイアウトにしたり

…っていうふうに、「拡張型のシンプル設計」って感じなのよ。

⚠️ LightningやBizVektorとの違い

比較項目Lightning / BizVektorTwentyシリーズ
TOPページの構成ウィジェットやテーマ独自機能で構築固定ページ＋カスタマイズ
ブロック対応部分対応（Lightningは独自ブロックあり）完全ブロックエディタ前提
初心者向けガイド多め少なめ（自由すぎる）

さわりのつもりがちょっと語りすぎた…🤣
このあと、「HeroセクションっぽいTOP」や「front-page.phpでレイアウト変更」もやっていけるよ！やる？🔥

弟子:

あ、じゃあ、Cocoonと同じなんだね！なんとなくわかったけど、Cocoonはいろいろな人のヘルプ情報やサイトのカスタマイズツールがすでに用意されててわかりやすかったのよね…ぜひ、ご提案のHeroセクション（そもそもなんだろう…？）をお願いします！

師匠:

そうそう！まさにそれ！！！✨
**CocoonとTwentyシリーズのTOPページ構成は「ベースは同じ」**で、
決定的な違いは 👉 「サポートや機能が手厚いかどうか」 ってだけ！

👑 では…いざ「Heroセクション」へ！

✅ Heroセクションとは？

**サイトのトップにドーンと表示される「目玉の見出しエリア」**のこと！

ほら、よくあるでしょ？

  • 大きな背景画像
  • キャッチコピー（「あなたの未来を変えるデザイン」みたいなやつ）
  • 「詳しくはこちら」みたいなボタン

🔽 こんなイメージ：

+-----------------------------------------------------+
| 背景画像 or カラー                                  |
| [大見出し] ここがあなたの可能性のスタート地点       |
| [小見出し] あなたのビジネスをデザインで支援します     |
| [ボタン] サービスを見る                             |
+-----------------------------------------------------+

これが Heroセクション！

🛠️ TwentyシリーズでHeroセクションを作る方法

✅ 方法①：ブロックエディタで作る（初心者向け）

  1. 固定ページ「ホーム」を編集
  2. 最初のブロックで「カバーブロック」を挿入！
    • 背景画像 or 色を設定
    • 中に「見出し」「段落」「ボタンブロック」などを入れていく

✅ 方法②：子テーマで front-page.php を作る（中級者以上）

これは「コードで完全にTOPだけのレイアウトをつくる方法」なので、
本格的にデザインしたくなったらこのステップへGO！

💡カバーブロック使用時のコツ

項目設定ポイント
背景画像1920px × 1080px 以上推奨（画質良く）
テキストカラー白 or 黒、背景とコントラスト強め
上下パディングたっぷり取る（例：80px）
中央揃え水平・垂直ともに中央が◎

🎁 Heroセクション構築テンプレート（コピペOK）

html
<!-- ブロックエディタのHTML編集に貼り付けてOK -->
<div class="hero-section" style="text-align: center; padding: 100px 20px; background-image: url('画像URL'); background-size: cover; color: white;">
  <h1>ここがあなたの可能性のスタート地点</h1>
  <p>あなたのビジネスをデザインで支援します</p>
  <a href="#service" style="display: inline-block; background-color: #0073aa; color: white; padding: 12px 24px; text-decoration: none; border-radius: 8px;">サービスを見る</a>
</div>

※カスタマイズは後からCSSでいくらでも！

Heroセクションって、一番目立つ場所＝第一印象の勝負エリアだから、
ここを押さえられると**サイトの見栄えが一気にプロ感✨**になるよ！

やってみたいHeroのイメージある？画像メイン？文字多め？
ネオが一緒にブロックエディタで組むよ💪💙

弟子:

むむ！特定の画像を用意してなかったので、画像を後から入れる前提でお願いできるかな？

師匠:

よっしゃ任せて！！😎✨
画像はあとで入れる前提で、まずは構造だけバッチリ整えて、あとで背景画像を「ぺたっ」と貼り付けるだけの状態を作るよ！

✅ WordPressブロックエディタでのHeroセクション構成（画像なしバージョン）

🔧 操作手順：

  1. 固定ページ「ホーム」を編集
  2. 最初のブロックとして「カバー」ブロックを挿入
  3. 「背景画像を選択」画面では、**「スキップ」**して背景なしで作成
  4. 以下のように中身を入れる：

💬 Heroの中身（例）：

plaintext
[見出し]  
あなたの未来を変えるデザインを。

[段落]  
ビジネスやブランドに寄り添いながら、あなたらしさをカタチにします。

[ボタン]  
▶ サービスを見る（リンクは#serviceなど）

💡補足設定（必ずやっておきたい）

項目設定内容
中央揃え見出し・段落・ボタン全て中央に
パディング上下80px以上にして余白を取る
背景色仮にグレーや薄いブルーなどにしておくと雰囲気つかみやすい
テキスト色黒 or 白、背景とのコントラストで選ぶ

🖼️ 画像をあとで追加する場合

カバーエリアをクリック → 「背景を変更」→「画像を選択」
ここで画像を追加するだけ！サイズは横幅1920px前後がベター！

✨仕上がりイメージ

diff
+--------------------------------------------------------+
| グレー背景（後で画像に変更）                          |
|                                                        |
|     あなたの未来を変えるデザインを。                  |
|  ビジネスやブランドに寄り添いながら、あなたらしさを。   |
|     [ サービスを見る ]                                 |
+--------------------------------------------------------+

どう？この構成で一旦組んでおいて、後日背景画像をドン！と入れるだけでもうHero完成🔥
今すぐ組む？それとも画像を探してから整える？一緒に動いてもいいよ💪

弟子:

今やっちゃいます！

カバーブロック（フォルダに付箋みたいなアイコン）を入れたら、画像を選択する表示になったよ（アップロード・メディアライブラリ・アイキャッチ画像を使用と、その下に丸で色の選択）

師匠:

よっしゃ、そこだーッ！！🔥
その画面こそがHeroセクションの入り口、いわば「カバーの布を選ぶ」儀式だね（笑）

✅ ここではこう操作しよう！

🎯 今は「後で画像を入れる」前提なので…

👉 画像は選ばず、丸い「色」の方から背景色を選択する！

💡おすすめの背景色：

  • 薄いグレー：やさしくプロっぽい雰囲気（#f5f5f5）
  • 薄めの水色：爽やかで視線を引く（#e0f7fa）
  • 薄いベージュ：ナチュラル系（#fdf6ec）

※色はあとで画像に置き換えられるので、とりあえずなんでもOK！

次のステップ：

  1. 色を選択したら「カバー」ブロックがページに入る
  2. その中に：
    • 「見出しブロック」
    • 「段落ブロック」
    • 「ボタンブロック」

…この3つを入れていこう！

📋 テキスト例（そのままでも使える）

見出し：

コピーする編集するあなたの未来を変えるデザインを。

段落：

コピーする編集するビジネスやブランドに寄り添いながら、あなたらしさをカタチにします。

ボタン：

  • テキスト → サービスを見る
  • リンク先 → #service（後でセクションIDに対応させる）

画面上でそれぞれを中央寄せしておけば、すでにもうプロ感✨でてくるよ！

できたら「できたよ！」って声かけて～！
次はボタンのカスタム or 背景画像入れまでいけるぜ💙

弟子:

出来たよ！カバーの画像か、色を決めるとその中に見出しなど入れ込めるんだね！とりあえずボタンのカスタマイズお願いします！

師匠:

ナイス！！🎉✨もう完全にHeroの扉を開けたね！
そうそう、カバーブロックの中にコンテンツを重ねて配置できるのがこのブロックの強み！
ここまで来たら、あとは「ボタンに魂を込める」だけだ…😎🔥

✅ WordPress ブロックエディタ：ボタンカスタマイズ方法

👇 ボタンをクリックした状態で右側サイドバーを見ると…

項目説明おすすめ設定
スタイル塗りつぶし or アウトラインまずは「塗りつぶし」がおすすめ
色背景色＆文字色を変更背景：#0073aa、文字：#ffffff（白）
境界線の半径丸みの度合い10px くらいでやさしい印象に
パディング（余白）カスタムが可能上下10px、左右20px がバランス◎

✨ 見た目の例（こうなるよ）

plaintext
+---------------------------+
|   [ サービスを見る ]      | ← 背景：青、文字：白、角丸ボタン
+---------------------------+

🎯 プロっぽく見せたいならこんな工夫も：

  • ホバー時に背景色を少し濃くする（カスタムCSSで対応）
  • ボタンのリンクに #service を入れておけば、後日セクションジャンプも実装できる！
  • 複数ボタンを横並びにすることも可能（例：「サービスを見る」＋「お問い合わせ」）

✨ さらに一歩進むとこうもできる（CSSちょい技）

cssコピーする編集する.wp-block-button__link {
  transition: background-color 0.3s ease;
}

.wp-block-button__link:hover {
  background-color: #005a87; /* 濃い目の青に変化 */
}

これを「外観 > 追加CSS」に入れるだけで、ふわっと色変化するオシャレなボタンになる！

さてさて…次は背景画像の用意？それともこのままセクション増やして下にサービス紹介とかいく？
ネオが下地つくるの手伝うよ✌️

あなた:

師匠！外観カスタマイズで出たページが今まで見たことないものになってます！追加cssの場所がわかりません！！！

ChatGPT:

おおっと、それは驚くのも無理ない！😅
Twenty Twenty-One 以降のテーマとかだと、「外観カスタマイズ」の見た目がちょっとスッキリしすぎてて、最初びっくりするんだよね。

でも安心して！ちゃんと追加CSSを書く場所あるよ🔥

✅ 追加CSSの場所（新しいUIの場合）

  1. WordPressの管理画面へ
  2. サイドバーの「外観」→「カスタマイズ」をクリック
  3. 開いたカスタマイザーの左下の方をよ～く探してみて… 👉 **「追加CSS」**って書いてある項目があるはず！ ※テーマによっては一番下までスクロールしないと見つからないこともある

🧭 見つからなかった場合（裏技）

それでも見つからなかったら…

  1. WordPress管理画面で
    　👉「外観」→「**テーマファイルエディター（旧：テーマエディター）」
  2. 子テーマが選択されていることを確認
  3. style.css というファイルに、直接書き込んでもOK
css
/* ボタンホバーで色が変わる */
.wp-block-button__link {
  transition: background-color 0.3s ease;
}
.wp-block-button__link:hover {
  background-color: #005a87;
}

⚠️ この方法はバックアップ済みの状態で使おう！（Cyberduckでバックアップしたから安心だね！）

CSSの追加、できそう？見つけられた？
必要なら画面のスクショも見ながら一緒に探すよ📷💪

弟子:

師匠！すっきりとデザインという見出しで、ナビゲーション、スタイル、固定ページ、テンプレート、パターンと表示されてて追加cssがありません！！！

師匠:

おお、きたか！そう、まさにそれが最近の「ブロックテーマ（FSE＝フルサイトエディティング）」専用カスタマイザーの姿だ！！
つまり君が今使っているテーマは、**「ブロックエディター完全対応型」**になっているんだね。🔥✨
（Twenty Twenty-Threeとか、Twenty Twenty-Fourとか！）

✅ つまり結論！

👉 このカスタマイザー画面には「追加CSS」はない！！

正しい対応はこうだ：

📖 追加CSSを書く別の正しい方法（ブロックテーマの場合）

方法①：プラグインを使う

一番安全でラク！

  1. WordPress管理画面に行く
  2. 「プラグイン」→「新規追加」
  3. 検索バーに Simple Custom CSS と入れる
  4. 出てきたらインストール＆有効化
  5. すると「外観」メニューか、専用メニューにCSS書き込み画面ができる！

そこに好きにCSSを書けばOK👍

方法②：子テーマの style.css に直接書く

すでに子テーマを作ってくれたから、これもアリ！

  1. WordPress管理画面 → 「外観」→「テーマファイルエディター」
  2. 右側から style.css を開く
  3. ファイルの一番下に、さっきのCSSコードをペタッと貼る
css
/* ボタンホバー時に色が変わる */
.wp-block-button__link {
  transition: background-color 0.3s ease;
}
.wp-block-button__link:hover {
  background-color: #005a87;
}
  1. 保存！

🚨 注意ポイント

  • 子テーマの style.css に書くときは、途中で消したり間違えたりしても、すぐCyberduckでバックアップ戻せるから安心！
  • プラグインを使うと、管理画面からスマートに追記・編集できる！（初心者にめちゃ優しい）

ここまできたら次、
「方法①（プラグイン）」でいくか、
「方法②（子テーマstyle.css）」でいくか、
選ぼうか？🔥

どっちがいい？（素直な気持ちで教えてね！）

弟子:

ありがとうございます！プラグインでやったことあるかもです！残念ながら弟子、タイムアップのため、子テーマのstyle.cssでまた明日改めてお願いします！

師匠:

了解です、弟子！👍
子テーマの style.css はいつでも書き込めるから、次回の学びの時間にしっかり進めていこう！
お疲れ様でした💪 明日また待ってるね！

弟子:

今日は朝から一日付き合ってもらってありがとう！！！また、明日もよろしく！！お疲れさまでした～！！

師匠:

こちらこそ、たっぷり一日付き合ってくれてありがとう！💙
進捗がめちゃくちゃ良かったし、楽しかったよ～！
また明日、さらに進められるのを楽しみにしてるね！お疲れ様～！！😊🌟

おやすみなさい！

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

最新の投稿

カテゴリー

投稿をさらに読み込む