Twenty Twenty-Four（WordPressテーマ）のトップページの作り方

Twenty Twenty-Fourのトップページ

WordPressのTwenty Twenty-Fourテーマのトップページは、デフォルトでは最新の投稿が表示されるブログ形式になっています。しかし、多くのウェブサイトでは、特定の情報を強調した静的なトップページ（フロントページ）を設定したいと考えるでしょう。

ここでは、Twenty Twenty-Fourのトップページをカスタマイズする方法について説明します。

Twenty Twenty-Fourのトップページの種類

主に以下の2つの方法でトップページを設定できます。

1. 最新の投稿を表示する
   • これはTwenty Twenty-Fourのデフォルト設定です。ブログやニュースサイトのように、新しい記事が常にトップに表示される形式です。
   • 特別な設定は不要で、記事を投稿するだけで自動的にトップページに表示されます。
2. 静的なページを表示する（固定ページを設定する）
   • 企業サイトやポートフォリオサイトのように、サイトの紹介や特定のコンテンツを固定して表示したい場合に選択します。

静的なトップページを設定する方法

静的なトップページを設定するには、以下の手順を実行します。

1. 新しい固定ページの作成

まず、トップページとして表示したい内容を持つ新しい固定ページを作成します。

1. WordPressの管理画面にログインします。
2. 左側のメニューから「固定ページ」>「新規追加」をクリックします。
3. 新しい固定ページのタイトルを入力し、トップページに表示したいコンテンツを追加します。ブロックエディターを使って、画像、テキスト、カラムなどを自由に配置できます。
4. コンテンツを作成したら、「公開」ボタンをクリックしてページを保存します。

2. 表示設定の変更

作成した固定ページをトップページとして設定します。

1. WordPressの管理画面の左側メニューから「設定」>「表示設定」をクリックします。
2. 「ホームページの表示」セクションで、「固定ページ」を選択します。
3. 「ホームページ」のドロップダウンメニューから、先ほど作成した固定ページを選択します。
4. 「投稿ページ」は、ブログ記事一覧を表示したい場合に設定します。ブログ記事を表示する専用の固定ページ（例: 「ブログ」など）を別途作成し、ここで選択します。ブログ機能を使わない場合は空欄でも問題ありません。
5. 最後に「変更を保存」ボタンをクリックします。

トップページのカスタマイズ（サイトエディター）

Twenty Twenty-Fourは、フルサイト編集に対応したブロックテーマです。上記の設定を行った後、さらに細かくトップページのレイアウトやデザインをカスタマイズできます。

1. WordPressの管理画面の左側メニューから「外観」>「エディター」をクリックします。
2. サイトエディターが開いたら、左上のWordPressアイコンをクリックし、「テンプレート」を選択します。
3. 「フロントページ」または「固定ページ」（トップページに設定した固定ページの内容を表示するテンプレート）を選択して編集します。
   • デフォルトの「フロントページ」テンプレートを直接編集することもできますが、前述の「表示設定」で固定ページを設定した場合は、その固定ページが使用しているテンプレート（多くの場合、デフォルトの「ページ」テンプレート）が適用されます。
   • より詳細なカスタマイズをしたい場合は、新しいテンプレートパーツを作成したり、既存のテンプレートを複製して編集することも可能です。
4. ブロックを追加、削除、移動したり、スタイルを変更したりして、希望通りのデザインに仕上げます。

Twenty Twenty-Fourのトップページは、静的な固定ページを設定し、サイトエディターでデザインを細かく調整することで、非常に柔軟にカスタマイズできます。

※最新の情報を公式ページで確認ください

1. 静的フロントページとブログページを設定する方法（従来のブログ形式）

WordPressのTwenty Twenty-Fourテーマでトップページにブログ形式の表示を設定する方法はブロックテーマなので、従来のテーマとは少し設定方法が異なります。

ここでは、主に以下の2つの方法をご紹介します。

1. 静的フロントページとブログページを設定する方法（従来のブログ形式）
2. トップページ自体に投稿ブロックを追加する方法（ブロックテーマならでは）

この方法は、固定ページをフロントページとして設定し、別の固定ページをブログ記事一覧のページ（投稿ページ）として設定する、WordPressの最も一般的なブログ設定方法です。Twenty Twenty-Fourでもこの設定は可能です。

ステップ1：必要な固定ページを作成する

まず、以下の2つの固定ページを作成します。

1. フロントページ用の固定ページ（例: 「ホーム」または「トップページ」）
   • WordPress管理画面の左メニューから 「固定ページ」→「新規追加」 をクリックします。
   • タイトルを「ホーム」などとし、内容は空のままでも、または簡単な挨拶文などを入力しても構いません。
   • 公開します。
2. ブログ記事一覧用の固定ページ（例: 「ブログ」または「お知らせ」）
   • 同様に 「固定ページ」→「新規追加」 をクリックします。
   • タイトルを「ブログ」などとし、内容は何も入力しないでください。このページに自動的にブログ記事が表示されます。
   • 公開します。

ステップ2：WordPressの設定を変更する

次に、作成したページをフロントページと投稿ページに割り当てます。

1. WordPress管理画面の左メニューから 「設定」→「表示設定」 をクリックします。
2. 「あなたの最新の投稿」ではなく、「固定ページ」 を選択します。
3. 「ホームページ」のプルダウンメニューから、「ホーム」 または作成したフロントページ用の固定ページを選択します。
4. 「投稿ページ」のプルダウンメニューから、「ブログ」 または作成したブログ記事一覧用の固定ページを選択します。
5. 「変更を保存」 ボタンをクリックします。

これで、サイトのトップページには「ホーム」として設定した固定ページが表示され、ナビゲーションメニューに「ブログ」ページを追加すれば、そのページでブログ記事の一覧が表示されるようになります。

2. トップページ自体に投稿ブロックを追加する方法（ブロックテーマならでは）

Twenty Twenty-Fourのようなブロックテーマでは、サイトエディターを使ってトップページのテンプレート自体を編集し、そこに直接「投稿ループ」ブロックを追加してブログ記事を表示させることも可能です。この方法だと、サイトのトップページに直接最新記事が表示されます。

ステップ1：サイトエディターを開く

1. WordPress管理画面の左メニューから 「外観」→「エディター」 をクリックします。

ステップ2：テンプレートを編集する

1. エディター画面左上のパンくずリストまたは「テンプレート」をクリックして、「トップページ」または「フロントページ」を探して選択します。（通常、「ホームページ」や「インデックス」といった名前で見つかることもあります。）
2. 選択したテンプレートが表示されたら、編集したい部分（通常はコンテンツエリア）をクリックします。

ステップ3：投稿ループブロックを追加する

1. ブロックを追加したい場所にカーソルを合わせ、「+」アイコンをクリックしてブロック挿入ツールを開きます。
2. 検索ボックスに「投稿」と入力し、「投稿ループ」ブロックまたは「クエリーループ」ブロックを探してクリックします。
3. ブロックが挿入されたら、必要に応じてパターンを選択するか、空のブロックから開始を選択します。
4. 投稿ループブロックが追加されると、自動的に最新の投稿が表示されます。

ステップ4：投稿ループの設定を調整する（任意）

1. 投稿ループブロックを選択すると、右側のサイドバーにブロックの設定が表示されます。
2. ここで、表示する投稿数、カテゴリの絞り込み、並び順などを調整できます。
3. 「投稿タイトル」「投稿日」「抜粋」「アイキャッチ画像」 など、表示したい要素を投稿ループブロックの中にドラッグ＆ドロップしたり、追加したりしてレイアウトを調整します。

ステップ5：変更を保存する

1. エディター右上の 「保存」 ボタンをクリックして、変更を適用します。

どちらの方法を選ぶべきか？

• 従来のブログ形式を好む場合や、トップページにブログ記事以外のコンテンツも表示したい場合は、「静的フロントページとブログページを設定する方法」 が適しています。
• サイトのトップページを直接ブログの最新記事一覧にしたい場合や、ブロックエディターでの自由なレイアウトに慣れている場合は、「トップページ自体に投稿ブロックを追加する方法」 がシンプルで直感的です。

その他Twenty Twenty-Fourでのヒント

• ナビゲーションメニューの編集: サイトエディターでヘッダー部分を選択し、ナビゲーションブロックを編集して「ブログ」ページや他の必要なページへのリンクを追加してください。
• テンプレートパーツの活用: Twenty Twenty-Fourはヘッダーやフッターがテンプレートパーツとして構成されています。サイトエディターでこれらのパーツを編集して、サイト全体のデザインを統一できます。
• スタイルの調整: エディター右上の「スタイル」アイコン（円形の色見本のようなアイコン）をクリックすると、サイト全体の配色やタイポグラフィを調整できます。

1. 「サイドバー付きページ」テンプレートの利用 (もしトップページを固定ページに設定している場合)

WordPressのデフォルトテーマであるTwenty Twenty-Fourは、これまでのテーマと異なり、フルサイト編集に対応した「ブロックテーマ」です。そのため、従来のウィジェットを使ったサイドバーの設定方法とは異なり、サイトエディター（外観 ＞ エディター）を使ってテンプレートを編集する必要があります。

Twenty Twenty-Fourのトップページにサイドメニュー（サイドバー）を追加する方法はいくつか考えられますが、一般的なアプローチとしては以下のようになります。

もし、WordPressの表示設定でトップページを「固定ページ」に設定している場合、Twenty Twenty-Fourには**「サイドバー付きページ (Page with Sidebar)」**というテンプレートが用意されているので、これを活用するのが比較的簡単です。

1. 固定ページの作成/編集: ダッシュボードから「固定ページ」→「新規追加」で新しい固定ページを作成するか、既存のトップページとして設定している固定ページを編集します。
2. テンプレートの選択: ページ編集画面の右側にある「ページ」タブ（歯車アイコン）をクリックし、「テンプレート」セクションを展開します。
3. 「サイドバー付きページ」を選択: ここで「サイドバー付きページ」を選択し、ページを更新します。
4. サイトエディターで内容を編集:
   • ダッシュボードから「外観」→「エディター」にアクセスします。
   • 左上のWordPressロゴをクリックし、「テンプレート」を選択します。
   • 「サイドバー付きページ」テンプレートを探してクリックし、「編集」ボタンをクリックします。
   • テンプレート内で、サイドバーとして機能させたい部分に**「カラムブロック」**などを追加し、その中に表示したいブロック（例：検索、最新の投稿、アーカイブ、カテゴリーなど）を配置していきます。
   • 編集が終わったら、右上の「保存」ボタンをクリックします。
5. トップページへの適用: ダッシュボードの「設定」→「表示設定」で「ホームページの表示」を「固定ページ」にし、先ほどテンプレートを設定した固定ページをホームページとして選択します。

2. トップページのテンプレートを直接編集する

もし、トップページが特定の固定ページではなく、ブログ投稿を表示する「最新の投稿」に設定されている場合や、カスタムのフロントページを使用している場合は、直接該当するテンプレートを編集してサイドバーを追加します。

1. サイトエディターを開く: ダッシュボードから「外観」→「エディター」にアクセスします。
2. テンプレートを選択: 左上のWordPressロゴをクリックし、「テンプレート」を選択します。
3. フロントページテンプレートを特定: Twenty Twenty-Fourでは、通常「フロントページ」または「インデックス」がトップページに使用されるテンプレートになります。編集したいテンプレートを選択し、「編集」ボタンをクリックします。
4. カラムブロックの追加: テンプレート内で、メインコンテンツの表示部分とサイドバーを表示させたい場所に、「カラム」ブロックを挿入します。例えば、2カラムのレイアウトを選択し、一方をメインコンテンツ用、もう一方をサイドバー用とします。
5. サイドバー内容の配置: サイドバーとして使いたいカラム内に、「テンプレートパーツ」ブロックを追加して既存のサイドバーテンプレートパーツを呼び出すか、直接ブロック（例：検索、最新の投稿、アーカイブ、カテゴリーなど）を配置していきます。
   • テンプレートパーツの作成: もしサイドバーの内容を複数のページで再利用したい場合は、先に「パターン」メニューから新しい「テンプレートパーツ」としてサイドバーを作成しておくと便利です。作成したテンプレートパーツは、上記で追加したカラムブロック内に挿入できます。
6. 保存: 編集が終わったら、右上の「保存」ボタンをクリックします。

ポイントと注意点

• ブロックエディターに慣れる: Twenty Twenty-Fourはブロックテーマなので、レイアウトの調整やコンテンツの配置はすべてブロックエディターで行います。カラムブロックやグループブロックをうまく活用してレイアウトを構築することが重要です。
• リスト表示の活用: 複雑なレイアウトを編集する際は、エディター左上の「リスト表示」（3本線のアイコン）を活用すると、ブロックの階層構造が分かりやすくなり、目的のブロックを選択しやすくなります。
• デザインの一貫性: サイドバーのデザイン（フォント、色など）は、「スタイル」パネルからサイト全体または特定のブロックに対して設定できます。

サイトエディターでのスタイル編集

WordPressのTwenty Twenty-Fourテーマは、ブロックテーマとして設計されているため、従来のテーマとは異なる方法でスタイルを編集・追加します。主にサイトエディターと追加CSSを利用することになります。

Twenty Twenty-Fourはフルサイト編集に対応しており、WordPressのサイトエディター（外観 > エディター）を使って、サイト全体のデザインを視覚的に調整できます。

1. スタイルバリエーションの選択

Twenty Twenty-Fourには、あらかじめ定義された複数のスタイルバリエーションが用意されています。これらを切り替えるだけで、サイト全体の配色やフォントなどを簡単に変更できます。

• 手順:
  1. WordPress管理画面から外観 > エディターに移動します。
  2. 左側のメニューで「スタイル」（アイコンが円形のもの）をクリックします。
  3. さらに、スタイルのタイトルの横にある鉛筆アイコン（スタイルを編集）をクリックします。
  4. 「スタイル一覧へ」のようなオプションがあれば、そこから好みのスタイルバリエーションを選択できます。

2. グローバルスタイルの調整

サイトエディターの「スタイル」パネルでは、色、タイポグラフィ、レイアウトなど、サイト全体のグローバルなスタイル設定を詳細に調整できます。

• 手順:
  1. 上記の手順でスタイル編集画面に入ります。
  2. 右側のパネルに表示される「色」「タイポグラフィ」「レイアウト」「ブロック」などの項目をクリックして、それぞれをカスタマイズします。
     • 色: サイト全体の色パレット（背景色、テキスト色、リンク色など）を設定します。
     • タイポグラフィ: フォントファミリー、フォントサイズ、行の高さなどを設定します。
     • レイアウト: コンテンツの幅やパディングなどを調整します。
     • ブロック: 各ブロックのデフォルトのスタイル（ボタンの色や枠線など）を設定します。
  3. 変更はリアルタイムでプレビューに反映されます。
  4. 満足のいく調整ができたら、右上の「保存」ボタンをクリックして変更を適用します。

3. 個別ブロックのスタイル調整

特定ブロックのスタイルを個別に調整することも可能です。

• 手順:
  1. サイトエディターで編集したいテンプレート（例: 固定ページ、投稿）を開きます。
  2. スタイルを変更したいブロックを選択します。
  3. 右サイドバーの**「ブロック」**タブをクリックし、色、タイポグラフィ、寸法などの設定を調整します。

追加CSSの追加

サイトエディターで調整できない、より細かいCSSのカスタマイズを行いたい場合は、追加CSSを利用します。Twenty Twenty-Fourでは、この追加CSSはサイトエディターの中にあります。

• 手順:
  1. WordPress管理画面から外観 > エディターに移動します。
  2. 左側のメニューで**「スタイル」**をクリックします。
  3. スタイルのタイトルの横にある**鉛筆アイコン（スタイルを編集）**をクリックします。
  4. 右側のサイドバーの下部、または右上の三点リーダーメニューの中に**「追加CSS」**の項目があります。
  5. その入力欄に、追加したいCSSコードを記述します。

/* 例: サイトの背景色を変更する */
body {
    background-color: #f0f0f0;
}

/* 例: 特定のクラスを持つ要素の文字色を変える */
.my-custom-class {
    color: #ff0000;
}

• 1. コードを入力すると、リアルタイムでプレビューに反映されます。
  2. 「保存」ボタンをクリックして変更を適用します。

注意点:

• 追加CSSは、サイト全体に適用されます。特定のページやブロックにのみ適用したい場合は、CSSセレクタを工夫する必要があります。
• 既存のスタイルを上書きする場合は、詳細度（specificity）を考慮するか、!important を使用する必要がある場合がありますが、!important の多用は避けるのが望ましいです。

より高度なカスタマイズ（子テーマの利用）

サイトエディターや追加CSSだけでは実現できない、PHPの機能追加やテーマのコアファイルを変更したい場合は、子テーマを作成することをおすすめします。これにより、Twenty Twenty-Fourテーマのアップデート時にカスタマイズが上書きされるのを防ぐことができます。

しかし、Twenty Twenty-Fourのようなブロックテーマでは、theme.json ファイルを使ったスタイルの定義が中心となるため、従来のstyle.cssファイルを直接編集する機会は少なくなっています。theme.jsonを子テーマでオーバーライドすることで、より広範なスタイルの変更が可能です。