Twenty Twenty-Three解説｜フルサイト編集に特化したミニマリストなWordPressテーマ

WordPressのデフォルトテーマ「Twenty Twenty-Three」を徹底解説。フルサイト編集（FSE）への対応や10種類のスタイルバリエーション、ミニマリストなデザインの特徴から、具体的な使い方や注意点まで紹介します。最新のブロックテーマを使いこなしたい方は必見です。

Twenty Twenty-Threeとは

WordPressテーマ Twenty Twenty-Threeは、WordPress 6.1で導入されたデフォルトテーマです。このテーマは、フルサイト編集の機能を最大限に活用できるように設計された、ミニマリストなブロックテーマであることが大きな特徴です。

主な特徴と利点は以下の通りです。

主要な特徴

• フルサイト編集への対応: WordPress 6.1で強化されたサイトエディターを活用し、サイト全体（ヘッダー、フッター、コンテンツ、テンプレートなど）をブロックで自由に編集できます。これにより、従来のカスタマイザーに代わって、より直感的にサイトデザインをコントロールできます。
• スタイルバリエーション: Twenty Twenty-Threeには、コミュニティから提供された10種類のスタイルバリエーションが付属しています。これにより、色、フォント、レイアウトなどを瞬時に変更し、サイトの雰囲気をガラッと変えることが可能です。デフォルトのモノクロームに加えて、様々な雰囲気のスタイルが用意されています。
• ミニマリストなデザイン: 非常にシンプルで軽量なデザインが特徴です。余計な機能や画像がなく、サイトの速度とアクセシビリティに重点が置かれています。そのため、ゼロからサイトを構築する際の「空白のキャンバス」として最適です。
• フルードタイポグラフィとフルードスペーシング: 画面サイズに合わせてテキストや要素間の間隔が自動的に調整される「フルードタイポグラフィ」と「フルードスペーシング」をサポートしています。これにより、どんなデバイスでも一貫した美しい表示を提供します。
• アクセシビリティ対応: アクセシビリティに配慮して設計されており、より多くのユーザーが利用しやすいテーマとなっています。
• ブロックパターン: 事前にデザインされたブロックの組み合わせである「ブロックパターン」が豊富に用意されており、これらを利用することで効率的にレイアウトを作成できます。

利点

• 高いカスタマイズ性: フルサイト編集と豊富なスタイルバリエーションにより、プログラミングの知識がなくてもサイトを自由にデザインできます。
• 高速性・軽量性: 余分な機能がないため、読み込み速度が速く、パフォーマンスが高いです。
• 汎用性: ブログ、ポートフォリオサイト、企業サイト、オンラインストア、ニュースサイトなど、様々な種類のウェブサイトに対応できます。
• コミュニティ主導: スタイルバリエーションがコミュニティから提供されているため、多様なデザインの選択肢があります。

Twenty Twenty-Threeの使い方

1. サイトエディターの基本

Twenty Twenty-Threeを有効化すると、WordPressの管理画面の「外観」に「エディター」という項目が表示されます。これがサイトエディターです。

• サイトエディターへのアクセス: 「外観」＞「エディター」をクリックします。
• インターフェース: サイトエディターに入ると、ヘッダー、フッター、コンテンツエリアなど、サイト全体の要素がブロックとして表示されます。左上のWordPressアイコン（またはサイトアイコン）をクリックすると、テンプレートやテンプレートパーツ、スタイルなど、サイト全体の構造を管理する画面に切り替わります。

2. テンプレートの編集

サイトエディターでは、ブログ投稿ページ、固定ページ、アーカイブページなど、様々な種類のテンプレートを編集できます。

• テンプレートの選択: サイトエディターの左上のWordPressアイコンをクリックし、「テンプレート」を選択します。ここに表示されるテンプレートの一覧から、編集したいテンプレートをクリックします。
• ブロックの追加・編集: 選択したテンプレート内で、既存のブロックをクリックして内容を編集したり、右上の「+」アイコンをクリックして新しいブロックを追加したりできます。
• ブロックパターンの活用: Twenty Twenty-Threeには、あらかじめデザインされたブロックパターンが豊富に用意されています。これらを活用することで、簡単に魅力的なレイアウトを作成できます。「+」アイコンをクリックし、「パターン」タブから選択できます。

3. テンプレートパーツの編集

ヘッダーやフッターなど、複数のテンプレートで使い回す共通の部分は「テンプレートパーツ」として管理されます。

• テンプレートパーツの選択: サイトエディターの左上のWordPressアイコンをクリックし、「テンプレートパーツ」を選択します。
• 編集方法: テンプレートと同様に、ブロックとして編集できます。ここで変更した内容は、そのテンプレートパーツを使用しているすべてのページに反映されます。

4. スタイルのカスタマイズ

Twenty Twenty-Threeは、WordPress 6.2で追加された「スタイルバリエーション」機能に対応しており、簡単にサイト全体のデザインを変更できます。

• スタイルへのアクセス: サイトエディターの右上の「スタイル」アイコン（白黒の円が重なったようなアイコン）をクリックします。
• スタイルバリエーションの選択: 「参照」をクリックすると、Twenty Twenty-Threeに用意されている複数のスタイルバリエーションが表示されます。クリックするだけで、フォント、色、レイアウトなどのサイト全体のデザインを瞬時に切り替えられます。
• 個別のカスタマイズ: スタイルバリエーションを適用した後も、個々の要素（色、タイポグラフィ、レイアウト、ブロック）をさらに細かくカスタマイズできます。

5. グローバルスタイル

サイト全体に適用されるフォント、色、レイアウトなどの設定を「グローバルスタイル」として定義できます。

• グローバルスタイルへのアクセス: サイトエディターの右上の「スタイル」アイコンをクリックし、「スタイルを編集」を選択します。
• 設定項目: ここでは、サイト全体の色パレット、タイポグラフィ（フォントサイズ、行の高さなど）、レイアウト（コンテンツの幅、パディングなど）などを設定できます。

6. その他のポイント

• ブロックの操作: 各ブロックには、個別の設定パネル（右側のサイドバー）があり、幅、高さ、色、パディング、マージンなどの詳細な設定が可能です。
• リストビュー: サイトエディターの左上の「リストビュー」アイコン（3本の横線）をクリックすると、現在のページのブロック構造をツリー表示で確認・操作できます。複雑なレイアウトを編集する際に便利です。
• プレビュー: 編集中の内容は、いつでも右上の「プレビュー」ボタンから確認できます。
• 保存: 編集内容は、右上の「保存」ボタンをクリックして保存してください。

まとめ

Twenty Twenty-Threeは、WordPressのフルサイト編集（FSE）を体験するための素晴らしいテーマです。最初は戸惑うかもしれませんが、サイトエディターに慣れることで、コードを書かずにWordPressサイトのデザインを自由にコントロールできるようになります。

Twenty Twenty-Threeのデザインツール

Twenty Twenty-Threeテーマは、フルサイト編集（FSE）に対応したブロックテーマであり、従来のWordPressテーマに比べてデザインツールが大幅に強化されています。主なデザインツールは以下の通りです。

1. サイトエディター（フルサイト編集）

Twenty Twenty-Threeは、WordPress 6.1で導入された新しいデザインツールを最大限に活用するように設計されています。サイトエディターを使用すると、サイト全体のデザインを視覚的に編集できます。

• ヘッダー、フッター、ページコンテンツのレイアウト編集: サイト全体の構成要素を自由に配置・編集できます。
• テンプレートのカスタマイズ: 投稿ページや固定ページなど、各ページに使用するテンプレートをカスタマイズできます。
• ナビゲーションメニューの作成: サイトのナビゲーションメニューを視覚的に作成・編集できます。
• ロゴ、サイトタイトル、キャッチフレーズの変更: サイトのアイデンティティとなる要素を簡単に変更できます。
• フォントと色の変更: サイト全体のフォント、文字サイズ、配色などをグローバルスタイルとして設定・変更できます。

2. グローバルスタイル

Twenty Twenty-Threeの大きな特徴の一つは、グローバルスタイルの概念です。サイトエディター内の「スタイル」パネルから、サイト全体のデザインを一括で管理できます。

• スタイルバリエーション: Twenty Twenty-Threeには、デフォルトで10種類の多様なスタイルバリエーションが用意されています。これらのバリエーションを切り替えるだけで、サイト全体の雰囲気（色、フォント、レイアウトなど）をガラッと変えることができます。
• 要素別スタイル: テキスト、リンク、見出し、ボタンなど、各要素の色やタイポグラフィを細かく設定できます。

3. ブロックエディター（Gutenberg）

Twenty Twenty-Threeは、WordPressのブロックエディターと完全に統合されています。

• ブロックの活用: サイトのコンテンツはすべてブロックで構成されており、ブロックの設定サイドバーからスタイル、色、レイアウトなどを変更できます。
• ブロックパターン: あらかじめデザインされたブロックの組み合わせである「ブロックパターン」を利用することで、複雑なレイアウトも簡単に作成できます。Twenty Twenty-Threeには「Call to action」「Default Footer」「Post Meta」などのパターンが用意されています。
• カスタムCSSクラスの追加: ブロックに対してカスタムCSSクラスを追加し、より詳細なデザイン調整を行うことも可能です。

4. theme.json

技術的な知識があるユーザー向けには、theme.jsonファイルを通じてデザインを詳細に制御できます。このファイルは、テーマ全体のスタイル、ブロックの設定、カラーパレット、フォントなど、あらゆるデザイン関連の情報を一元的に管理する役割を果たします。

5. その他のカスタマイズ方法

• 子テーマの作成: 親テーマのソースコードを直接変更せずにカスタマイズを行うために、子テーマを作成することが推奨されます。特にCreate Block Themeプラグインを使用すると、Twenty Twenty-Threeの子テーマを簡単に作成できます。
• CSSの追加: サイトエディターまたはカスタムCSSの機能を使って、より細かいCSSを追加し、デザインを調整することも可能です。

Twenty Twenty-Threeは、初心者でも直感的にデザインをカスタマイズできる一方で、開発者向けには詳細な制御が可能なブロックテーマです。

Twenty Twenty-Threeの注意点

WordPressテーマ「Twenty Twenty-Three」に関する注意点ですね。このテーマは、WordPress 6.1以降にデフォルトで搭載されている、フルサイト編集に対応したブロックテーマです。そのため、従来のテーマとは異なる点が多く、いくつか注意すべき点があります。

主な注意点は以下の通りです。

1. フルサイト編集（FSE）への理解が必要:
   • Twenty Twenty-Threeは、サイトのほぼ全てをブロックエディタで編集する「フルサイト編集」を前提としています。従来の「外観」メニューにあった「カスタマイザー」や「ウィジェット」といった項目はほとんどなくなり、「エディター」という項目でサイト全体のレイアウトやデザインを調整します。
   • もしフルサイト編集の概念に慣れていない場合、最初は戸惑うかもしれません。
2. PHPやCSSの直接編集機会の減少:
   • 従来のテーマでは、functions.phpやstyle.cssなどを直接編集してカスタマイズすることが多かったですが、Twenty Twenty-Threeではブロックエディタとtheme.jsonファイルを通じて多くの設定が行われます。
   • 細かなCSSの調整は「追加CSS」で行うことも可能ですが、基本的にはブロックエディタ上でのスタイル設定が優先されます。
3. ブロックパターンとテンプレートの活用:
   • Twenty Twenty-Threeは、あらかじめ用意された「ブロックパターン」や「テンプレート」を組み合わせてサイトを構築するスタイルが推奨されます。これにより、比較的簡単にプロフェッショナルなデザインを作成できます。
   • これらのパターンやテンプレートを理解し、適切に活用することが重要です。
4. theme.jsonファイルの理解:
   • サイト全体のスタイルや設定はtheme.jsonというファイルで管理されています。このファイルを直接編集することで、色、タイポグラフィ、レイアウトなどのグローバルスタイルを細かく調整できます。
   • ただし、このファイルを誤って編集するとサイトのデザインが崩れる可能性があるので、バックアップを取るなど注意が必要です。
5. プラグインの互換性:
   • フルサイト編集に対応していない古いプラグインの中には、Twenty Twenty-Threeでうまく動作しないものや、意図しない表示になるものがあるかもしれません。
   • プラグインを導入する際は、フルサイト編集環境での動作を確認することをおすすめします。
6. 学習コスト:
   • 従来のWordPressの知識だけでは、Twenty Twenty-Threeを完全に使いこなすには学習コストがかかる可能性があります。
   • WordPress公式のドキュメントや、フルサイト編集に関するチュートリアルなどを参考に学習を進めるのが良いでしょう。
7. カスタマイズの自由度:
   • 「PHPを書いてゴリゴリカスタマイズしたい」という方にとっては、Twenty Twenty-Threeは必ずしも最適な選択肢ではないかもしれません。ブロックエディタの範囲内でできることには限界があります。
   • ただし、theme.jsonやカスタムブロックを使いこなせば、かなりの自由度でカスタマイズすることも可能です。

Twenty Twenty-Threeは、今後のWordPressの主流となるフルサイト編集を体験する上で非常に重要なテーマです。これらの注意点を理解した上で利用することで、よりスムーズにサイト構築を進めることができるでしょう。