#7 ブロックテーマのフロントページを自分好みに編集する方法【サイトエディター入門】

フロントページを自分仕様に作っていきたいあるある！テンプレートを編集していきます。

６記事目にテンプレートの編集方法を書こうと思っていたのですが、AIの記事を先に書いてしまい申し訳ありません。

この記事で、ブロックテーマ独特のサイトエディター（＝テンプレート）というものを、少しでも理解していただけたら、うれしく思います。

テンプレート（サイトエディター）とは。

WordPressのブロックテーマを使っていると、「トップページのデザインを変えたいけど、どこで編集するの？」と迷うことがあります。４記事目と５記事目にもつながることですが、テンプレートと固定ページの違いが、この記事で深く理解できるようになると思います。そしてここでは、そのテンプレートの編集方法を解説していきます。

サイトエディターとは、WordPressのテーマ全体のデザインを編集できる画面のことです。テンプレートとは、「このページをどんなレイアウトで表示するか」を決めたひな形のことです。

実は、ブロックテーマにはサイトエディターという専用の編集画面があります。ここを使えば、コードを書かずにトップページのレイアウトを自由に変えることができます。

固定ページ→内容を書いていくところ。異なる内容を書く場合はこちらに書くのがおススメです。エクセルの表の中に入力するテキストや数字、式のようなもの
テンプレート→基本的にほとんど編集しない箇所はここがおすすめです。レイアウトを作るところ、エクセルの表や枠組みと同じような役割。

各テンプレートごとの役割

WordPressには、ページの種類ごとにテンプレートが用意されています。

フロントページ → トップページ用のテンプレート
投稿 → ブログ記事ページ用のテンプレート
アーカイブ → 記事一覧ページ用のテンプレート　など

従来のWordPressではテーマによって、「外観」→「カスタマイズ」から設定していましたが、ブロックテーマではサイトエディターがその役割を担っています。今回は、このなかのフロントページ（トップページ）のテンプレートを編集していきます。

Warning

ポイント： サイトエディターはブロックテーマ専用の機能です。クラシックテーマ（昔ながらのテーマ）では使えません。

#4 文章が書けない…はテンプレートのコンテンツブロックで解決！

#5 テンプレート一覧ー種類と使われる場所をわかりやすく解説

AIの記事を#６の記事に書いているので、使いどころがあれば、つないで使っていただくと、効率化できると思います。AIのつなぎ方や、解説はこの記事で解説しております。（私はGeminiをつないでみました）

#6_AI搭載！WordPress 7.0のAI機能にGeminiを連携してみた体験記

使い方

STEP1＿サイトエディターで、テンプレートを開く

１．WordPressの管理画面の外観→エディターを選びます。（これがサイトエディターというものです)

WordPress管理画面の「外観」メニューから「エディター」を選択する操作画面。

２．エディターをクリックしたら下の画面になるので、テンプレートを選びます。

WordPressサイトエディターのデザインメニューで、テンプレート項目が赤枠で囲まれている。

３．下がテンプレートをえらんだ後の画面。子テーマを作っている人は、子テーマのテンプレートを選びます。私は作ったのでchild X-T9という名前の子テーマを選び、その中のフロントページをクリックして、このフロントページを編集します。

テンプレート一覧画面で、サイドバーの「child X-T9」と、右側の「フロントページ」が赤枠で強調されている。

Warning

「フロントページ」が表示されていない場合： WordPress の設定で「固定ページ」をホームページに指定していないと表示されないことがあります。「設定」→「表示設定」→「ホームページの表示」を「固定ページ」（タイトル名） にしてから確認してみてください。（固定ページを設定したら、設定したページの下にフロントページと表記されていると思います）

WordPressの表示設定で「ホームページの表示」を「固定ページ」に設定し、各ページを選択している画面。

テンプレート一覧に表示されている「WordPress手帖 — フロントページ」の項目。

STEP2＿フロントページの編集をする

１．フロントページをクリックしたら、編集画面にうつります。固定ページの編集画面とほぼ同じです。

WordPressサイトエディターの編集画面。左上の「＋」ボタンが赤枠で囲まれ、「ブロックを追加するとき、ここをクリック」と注釈されている。

２．ブロックを追加・削除・移動する

ここで、「遊びに来てくださり、ありがとうございます」という文言を追加したいので、段落ブロックを追加してみます。（ブロックエディターの使い方の詳細はここでは解説しません。詳細を知りたい方は、下記の本をお勧めします。私もブロックテーマを勉強するとき、初めはこの本を読みました。動画もついていてわかりやすいです。（CSSが分からない人は、とりあえずこの本ではそのまま貼付けでOK）テーマによって、CSSを使わなくても装飾できるのもあります。私は、このブログではX-T9のテーマを使用しているので、見出しなどのスタイルはこのテーマのスタイルを使用しています。）

💡おすすめ本

①「WordPressの新しい標準レッスン」フルサイト編集＋ブロックエディター活用講座 / 発売➡️インプレス）

②いちばんやさしい「WordPressの教本」人気講師が教える本格Webサイトの作り方 / 発売➡️インプレス）この本では、当サイトが使用しているＸ－Ｔ９で説明をされています。（そりゃそうですね）😁

簡単にですが、段落の追加を説明します。

上記の画像にあるように、左上の方に＋マークがあるので、ここをクリックすると下の画面になり、いろんなブロックが出てきます。この中の段落をクリックすると、段落が追加されます。（右側に赤い枠で囲んだ「これはコンテンツブロックです～」の箇所がありますね。ここはテンプレートで編集しない箇所だということを頭に置いておいてくださいね。ここでは割愛しますが、これが#４の固定ページで文章が書けない！のからくりです。詳しくはURLを貼っておきますので再度記事を確認くださいね。）

#4 文章が書けない…はテンプレートのコンテンツブロックで解決！

☆ 下記は追加→段落ブロックを挿入しようとしている所です。

サイトエディターの編集画面。左側のブロック追加メニューの「段落」と、右側のコンテンツエリアが赤枠で強調されている様子。

４．段落の追加をしたら、テキストを入力していきます。

「遊びに来てくださり、ありがとうございます」🙇を追加しました。

サイトエディターのリストビューで段落ブロックを選択し、編集画面に「遊びに来てくださり、ありがとうございます」と入力した様子。

テキストを間違えたため、編集したいときもありますよね。入力したテキスト（右側のテキストの所をクリックして、書き換えられます）Deleteで消すと一字づつ消せます。パソコンでテキスト入力する時と同じ要領です。

５．段落ブロック自体を消したい場合、段落を選んで右の縦3つの点の所から削除を選んでクリックします。

WordPressのリストビューで段落ブロックのオプションメニューを開き、「削除」を選択する操作画面

ツールバーはこちらです。このツールバーによって、真ん中揃えや左揃え、段落の移動ができます。（ｐの反対向けのアイコンが段落アイコンです。テーマやプラグインのインストール状況によって、ない物もあると思います）

WordPressのブロックツールバー。段落アイコン、移動矢印、配置、太字、リンク、三点リーダーなどのアイコン。

操作	方法
ブロックを選択する	クリックする
ブロックを削除する	ブロックツールバーの「⋮（三点メニュー）」→「削除」
ブロックを移動する	選択 → ツールバーの「↑↓」矢印アイコン、または段落ブロックをつかんでドラッグ＆ドロップ
ブロックを追加する	追加したい場所の上のブロックを選択し、「＋」ボタンをクリック

STEP3＿テンプレートの変更を保存する

１．編集が終わったら、右上の 「保存」ボタン をクリックします。確認ダイアログが出たら、もう一度 「保存」 をクリックすれば完了です。保存ボタンは必ず2回でてくるというわけではありません。１回だけでいい場合と２回しないといけない場合があります。テンプレート編集を開いて最初に変更して保存する場合は、大体２回保存ボタンが出てくるので、１回保存したあと、また保存ボタンが出てきたら、再度保存してください。２回目の保存ボタンが出なければ、１回の保存で大丈夫です。