Twenty Twenty-Threeのカスタマイズ – WordPressテーマ

Twenty Twenty-Threeのカスタマイズ：基本から応用まで

WordPressの公式テーマ「Twenty Twenty-Three」は、ブロックエディタ（Gutenberg）を最大限に活用することに特化した、シンプルで柔軟性の高いテーマです。このテーマのカスタマイズは、従来のWordPressテーマとは異なり、主にサイトエディタ（フルサイト編集）を通じて行います。

サイトエディタ（フルサイト編集）を活用する

Twenty Twenty-Threeのカスタマイズは、WordPress管理画面の「外観」 > 「エディター」 からアクセスできるサイトエディタで行います。

サイトエディタでは、以下の要素を自由に編集できます。

• テンプレート: トップページ、投稿ページ、固定ページなどのレイアウトを構成するテンプレートを編集できます。
• テンプレートパーツ: ヘッダー、フッター、サイドバーなど、複数のテンプレートで使い回される共通パーツを編集できます。
• スタイル: サイト全体の配色、タイポグラフィ（フォントの種類、サイズ）、ブロックごとのスタイルなどをグローバルに設定できます。

具体的なカスタマイズ項目

Twenty Twenty-Threeでよく行われるカスタマイズの例をいくつかご紹介します。

1. 配色とタイポグラフィの変更

サイトエディタの右側にある「スタイル」アイコン（円形の中に半分だけ色が塗られているアイコン）をクリックすると、サイト全体のスタイルを編集できます。

• パレット: グローバルカラーパレットを変更することで、サイト全体の配色を一括で変更できます。
• タイポグラフィ: 見出しや本文のフォント、サイズ、行間などを設定できます。
• レイアウト: サイトのコンテンツ幅などを調整できます。

2. ヘッダーとフッターの編集

ヘッダーやフッターは「テンプレートパーツ」として管理されています。サイトエディタで、ヘッダーまたはフッターのブロックを選択し、内容を編集したり、ブロックを追加・削除したりできます。例えば、サイトのタイトル、ロゴ画像、ナビゲーションメニューなどを変更できます。

3. テンプレートの編集（ページレイアウトの変更）

例えば、投稿ページのレイアウトを変更したい場合、サイトエディタで「テンプレート」を選択し、「単一投稿」などの該当するテンプレートを選択して編集します。ブロックの追加、削除、並べ替えを行い、表示する情報やその配置を自由に変更できます。

4. ブロックパターンの活用

Twenty Twenty-Threeには、あらかじめデザインされた様々な「ブロックパターン」が用意されています。これらを活用することで、美しいレイアウトを簡単に作成できます。サイトエディタで「+」アイコンをクリックし、「パターン」タブから好きなパターンを選択して挿入できます。

より高度なカスタマイズ

子テーマの利用

Twenty Twenty-Threeのコアファイルを直接編集することは推奨されません。テーマのアップデート時に変更が上書きされてしまうためです。より詳細なカスタマイズを行いたい場合は、子テーマを作成し、子テーマ内でCSSを追加したり、テンプレートファイルを上書きしたりする方法が一般的です。

追加CSSによる調整

サイトエディタではカバーできない細かなデザイン調整が必要な場合は、追加CSSを利用します。これは従来のWordPressカスタマイズと同様に、サイトエディタの「スタイル」パネル内にある「追加CSS」セクション、または「外観」 > 「カスタマイズ」 > 「追加CSS」から記述できます。

カスタマイズのヒント

• プレビューを頻繁に確認する: サイトエディタでの変更はリアルタイムでプレビューされますが、常に公開されているサイトでどのように見えるかを確認しましょう。
• 元に戻す機能を活用する: サイトエディタには元に戻す機能がありますので、安心して様々な変更を試せます。
• WordPress公式ドキュメントを参照する: Twenty Twenty-Threeやフルサイト編集に関する最新かつ詳細な情報は、WordPressの公式ドキュメントで確認できます。

Twenty Twenty-Threeとフルサイト編集は、これまでのWordPressのテーマカスタマイズの常識を覆す新しいアプローチです。最初は戸惑うかもしれませんが、慣れてくるとその自由度の高さと柔軟性に魅力を感じるでしょう。

Twenty Twenty-Threeのカスタマイザー

WordPressのTwenty Twenty-Threeテーマは、従来のカスタマイザー（外観 ＞ カスタマイズ）とは異なるアプローチでサイトの編集を行います。

Twenty Twenty-Threeは、WordPress 6.1で導入されたフルサイト編集（Full Site Editing; FSE）の機能を最大限に活用するように設計されたブロックテーマです。そのため、従来のカスタマイザーの代わりにサイトエディター（外観 ＞ エディター）を使用して、サイト全体のデザインやレイアウトを編集します。

Twenty Twenty-Threeのカスタマイズのポイント

Twenty Twenty-Threeテーマでの主なカスタマイズ方法は以下の通りです。

• サイトエディター（外観 ＞ エディター）:
  • サイト全体: ヘッダー、フッター、サイドバーなどのサイト全体のレイアウトを編集できます。
  • テンプレート: 投稿ページ、固定ページ、アーカイブページなどの様々なテンプレートをカスタマイズできます。
  • テンプレートパーツ: ヘッダーやフッターなど、複数のテンプレートで使い回す部分を編集できます。
  • スタイル: サイト全体の配色、タイポグラフィ（フォント、文字サイズ）、ブロックのスタイルなどを変更できます。特に、Twenty Twenty-Threeにはコミュニティから提供された10種類以上のスタイルバリエーションが用意されており、ワンクリックでサイトの見た目を大きく変えることができます。
• グローバルスタイル: サイトエディター内の「スタイル」パネルで、サイト全体のタイポグラフィ、色、レイアウトなどを一元的に管理できます。Fluid Typography（流動的なタイポグラフィ）やFluid Spacing（流動的な間隔）にも対応しており、様々な画面サイズに自動で最適化されます。
• ブロックパターン: Twenty Twenty-Threeは、あらかじめデザインされたブロックの組み合わせである「ブロックパターン」を豊富に提供しています。これらを活用することで、ページや投稿のレイアウトを素早く作成できます。

従来のカスタマイザーとの違い

Twenty Twenty-Threeのようなブロックテーマでは、従来のカスタマイザーはデフォルトで非表示になっています。これは、カスタマイザーで設定できた多くの項目が、サイトエディターの機能でカバーされるためです。

もし、利用しているプラグインがカスタマイザーを必要とする場合、カスタマイザーが自動的に再有効化されることがあります。しかし、Twenty Twenty-Threeの機能性を最大限に活用するには、サイトエディターに慣れることが重要です。

まとめ

Twenty Twenty-Threeテーマのカスタマイズは、従来のカスタマイザーではなく、主にサイトエディターを通じて行います。サイトエディターでは、サイト全体のレイアウト、テンプレート、スタイル、ブロックパターンなどを柔軟に編集できます。これにより、より直感的で視覚的なサイト構築が可能になっています。

Twenty Twenty-Threeでサイトを構築する際は、まず「外観 ＞ エディター」にアクセスして、その機能を試してみることをお勧めします。

「Twenty Twenty-Three」のカスタマイズ方法

WordPressの「Twenty Twenty-Three」テーマは、サイトエディターをメインに使用してカスタマイズを行います。以前のWordPressテーマのように「カスタマイザー」で設定する項目はほとんどありません。

ここでは、Twenty Twenty-Threeの主なカスタマイズ方法をいくつかご紹介します。

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

Twenty Twenty-Threeは、WordPress 5.9以降で導入された**フルサイト編集（FSE）に対応したテーマです。これにより、サイト全体のデザインやレイアウトをビジュアルに編集できます。

1. WordPress管理画面にログインします。
2. 「外観」 ＞ 「エディター」 をクリックします。
3. サイトエディターが起動し、左側に設定パネル、中央にサイトのプレビューが表示されます。

サイトエディターでできることの例

• テンプレートの編集: ヘッダー、フッター、投稿ページ、固定ページなど、サイトの各部分のテンプレートを編集できます。
• ブロックの追加・編集: テキスト、画像、ボタン、カラムなど、さまざまなブロックをドラッグ＆ドロップで追加し、設定を変更できます。
• スタイルの変更: グローバルスタイルとして、サイト全体のフォント、色、レイアウトなどを一括で変更できます。
• パターン（Patterns）の利用: 事前にデザインされたブロックの組み合わせ（パターン）を挿入して、簡単に魅力的なセクションを作成できます。

2. グローバルスタイルを変更する

サイト全体のデザインを統一的に変更したい場合は、グローバルスタイルを活用します。

1. サイトエディターを開きます。
2. 右上の「スタイル」アイコン（丸いアイコン）をクリックします。
3. 「タイポグラフィ」「色」「レイアウト」「ブロック」などの項目が表示されるので、それぞれの設定を変更します。
   • タイポグラフィ: テキストのフォントファミリー、サイズ、行の高さなどを設定します。
   • 色: テキスト、背景、リンクなどの色パレットを調整します。
   • レイアウト: サイト全体の幅、パディングなどを設定します。
   • ブロック: 特定のブロック（例: 画像ブロック、見出しブロック）のデフォルトスタイルを設定します。

3. テーマファイルを編集する（上級者向け）

より詳細なカスタマイズや、サイトエディターでは対応できない部分を変更したい場合は、テーマファイルを直接編集する方法もあります。ただし、この方法は子テーマを作成し、そちらで変更することを強くお勧めします。テーマ本体を直接編集すると、テーマのアップデート時に変更が上書きされてしまうためです。

子テーマでのカスタマイズの例

• CSSの追加: style.cssファイルにカスタムCSSを追加して、細かいデザイン調整を行います。
• PHP関数の追加・変更: functions.phpファイルに独自の関数を追加したり、テーマの既存の機能を変更したりします。

子テーマの作成方法の概要:

1. WordPressのテーマディレクトリ (wp-content/themes/) に新しいフォルダを作成します。
2. そのフォルダ内に最低限必要な style.css と functions.php ファイルを作成します。
3. style.css の冒頭に親テーマの情報を記述します。

カスタマイズのヒント

• こまめに保存する: サイトエディターでの作業中は、こまめに「保存」ボタンをクリックして変更を保存しましょう。
• プレビューを確認する: 変更がどのように表示されるか、常にプレビューで確認するようにしましょう。
• 困ったらドキュメントを参照する: WordPressの公式ドキュメントやTwenty Twenty-Threeテーマの関連情報を参照すると、より詳しい情報が得られます。
• バックアップを取る: 大きな変更を加える前には、必ずサイト全体のバックアップを取ることをお勧めします。

Twenty Twenty-Threeは、ブロックエディターの機能を最大限に活用するように設計されているため、慣れるまで少し時間がかかるかもしれませんが、慣れてしまえば直感的で柔軟なカスタマイズが可能です。

Twenty Twenty-Threeのカスタマイズの注意点

WordPress のデフォルトテーマである Twenty Twenty-Three は、WordPress 6.1 以降で導入された「フルサイト編集（FSE）」に特化したブロックテーマです。従来のテーマとは大きく異なるため、カスタマイズする際にはいくつかの注意点があります。

Twenty Twenty-Three カスタマイズの主な注意点

1. フルサイト編集（FSE）への理解:
   • Twenty Twenty-Three は、テーマ全体をブロックで構成し、サイトエディター（外観 > エディター）からヘッダー、フッター、投稿テンプレート、固定ページテンプレートなど、サイトのあらゆる部分を視覚的に編集できます。
   • 従来の「カスタマイザー」や「ウィジェット」「メニュー」といった項目は、フルサイト編集では統合され、エディター内で完結するようになっています。
   • 従来のテーマに慣れていると、この編集方法の違いに戸惑うことがあります。ブロックの概念とフルサイト編集の仕組みを理解することが重要です。
2. style.css の役割の変化:
   • Twenty Twenty-Three の style.css には、ほとんどCSSコードが記述されていません。
   • WordPress コアのブロックの CSS と theme.json ファイルに設定されている CSS でデザインが表現されています。
   • CSS を直接記述してカスタマイズしたい場合は、theme.json の設定を理解するか、別途カスタム CSS を追加する方法を検討する必要があります。
3. functions.php の扱い:
   • Twenty Twenty-Three は、初期状態では functions.php が存在しません。
   • ただし、独自に functions.php を作成して配置すれば、正しく読み込まれます。必要な機能を追加したい場合は、この方法を利用できます。
4. theme.json の重要性:
   • theme.json は、WordPress 5.9 から導入されたテーマ設定ファイルで、ブロックエディターのスタイルや設定を定義します。
   • カラーパレット、フォント、タイポグラフィ、レイアウト、ブロックごとのデフォルトスタイルなど、Twenty Twenty-Three の多くのデザイン要素は theme.json で制御されています。
   • これらの設定を変更することで、コードを書かずに多くのカスタマイズが可能です。
5. テンプレートとテンプレートパーツ:
   • Twenty Twenty-Three は、従来のテーマよりも多くのテンプレートとテンプレートパーツを使用しています。これらもブロックで構成されており、エディターで編集できます。
   • 特定のページのレイアウトを変更したい場合は、対応するテンプレートをエディターで編集することになります。
6. グローバルスタイル:
   • Twenty Twenty-Three には、複数のグローバルスタイル（テーマバリエーション）が用意されています。これらを切り替えることで、サイト全体のデザインを簡単に変更できます。
   • 独自のスタイルを作成することも可能です。
7. 子テーマの推奨:
   • WordPress テーマをカスタマイズする際の鉄則ですが、Twenty Twenty-Three の場合も、直接テーマファイルを編集するのではなく、子テーマを作成してカスタマイズすることを強く推奨します。
   • これにより、テーマのアップデート時にカスタマイズ内容が上書きされるのを防ぐことができます。
8. ブロックエディターの限界と高度なカスタマイズ:
   • ブロックエディターとフルサイト編集は非常に強力ですが、複雑なレイアウトや特殊な機能を実現するには、まだ限界がある場合もあります。
   • 特に、特定のHTML構造を必要とするようなデザイン（例：親要素にリンクを持たせるようなカードレイアウト）は、デフォルトのブロックでは実現が難しいことがあります。
   • より高度なカスタマイズには、カスタムブロックの作成や、部分的にPHPやCSSの知識が必要になる場合があります。

これらの注意点を理解し、フルサイト編集の概念に慣れることで、Twenty Twenty-Three を効果的にカスタマイズできるでしょう。

カスタマイズの口コミ・評判

WordPressのデフォルトテーマTwenty Twenty-Threeは、フルサイト編集（Full Site Editing, FSE）機能を最大限に活用するために作られた、非常にミニマルなブロックテーマです。これまでのテーマとは全く異なるカスタマイズ体験を提供します。

Twenty Twenty-Threeのカスタマイズ評価

Twenty Twenty-Threeは、カスタマイズ性という点で非常に高い評価を受けています。その理由は以下の通りです。

1. フルサイト編集（FSE）への完全対応

このテーマは、従来の「カスタマイザー」ではなく、WordPress 6.x以降のサイトエディターでの編集を前提としています。サイトエディターでは、ヘッダー、フッター、投稿テンプレートなど、サイト全体のあらゆる要素をブロックとして編集できます。これにより、専門的な知識がなくてもドラッグ＆ドロップ感覚でレイアウトを自由に構築できます。

2. 豊富なスタイルバリエーション

デフォルトで10種類以上のスタイルバリエーションが用意されています。これらは、WordPressコミュニティのデザイナーによって作成されたもので、配色やフォントの組み合わせをワンクリックで変更できます。サイトの雰囲気を瞬時にガラッと変えることができるため、デザインのアイデアがない初心者でも安心して始められます。

3. シンプルで軽量な設計

Twenty Twenty-Threeは、あえて余計な機能や装飾を排除した「空白のキャンバス」のようなテーマです。これにより、読み込み速度が速く、パフォーマンスが高いというメリットがあります。また、不要なコードがないため、必要なブロックやパターンを組み合わせて、自分の思い通りのサイトをゼロから作り上げることができます。

注意点と検討事項

カスタマイズ性に優れている一方で、以下の点には注意が必要です。

• 従来のカスタマイズとは異なる操作性 従来のテーマに慣れているユーザーは、サイトエディターの操作に戸惑うかもしれません。「ウィジェット」や「メニュー」といった項目は「エディター」内に統合されています。
• ゼロから構築する手間 シンプルなテーマであるため、ブログ記事のスタイルやテンプレートなど、多くの部分を自分でデザインする必要があります。既存の美しいデザインをすぐに使いたい人にとっては、少し物足りなく感じるかもしれません。
• デザインの自由度と引き換えに発生する複雑さ サイト全体を自由に編集できる反面、ブロックの組み合わせやレイアウトを細かく調整していく作業は、ある程度の学習時間が必要です。

まとめ

WordPress Twenty Twenty-Threeは、フルサイト編集の可能性を最大限に引き出したい人にとって、最高のテーマの一つです。 特に以下のようなユーザーにおすすめします。

• サイトエディターを本格的に試したい人
• デザインの細部にまでこだわりたい人
• 軽量でパフォーマンスの高いサイトを構築したい人

一方で、既存のデザインテンプレートをベースに手軽にカスタマイズしたい人や、複雑な操作を避けたい人は、別のテーマを検討するのも良いでしょう。

WordPressはカスタマイズしやすい

一般的に、WordPressはカスタマイズがしやすいと言える要素が多いです。

カスタマイズしやすい点

• テーマの豊富さ:
  • デザインや機能があらかじめ組み込まれた「テーマ」が非常に多く、テーマを選ぶだけでサイトの見た目や基本的な機能を簡単に変更できます。
  • カスタマイズ性に優れていることを売りにしているテーマ（例：SWELL, AFFINGER, Snow Monkeyなど）も多く、これらのテーマを使えばコードを触らずに設定画面から多くの調整が可能です。
  • 最近はフルサイト編集（FSE）に対応したテーマもあり、より直感的にサイト全体を編集できます。
• プラグインによる機能追加:
  • Webサイトに必要な様々な機能（問い合わせフォーム、セキュリティ対策、SEO対策、表示速度の改善など）を、プログラムの知識なしにプラグインを導入するだけで追加できます。
• CSSなどの知識があればさらに自由度が高い:
  • HTMLやCSS、PHPといったウェブ制作の知識があれば、テーマファイルを直接編集したり、子テーマを作成したりすることで、さらに細部にわたる自由なカスタマイズが可能です。

注意点

• テーマ選びが重要:
  • デザインを大きく変えたい場合や、特定の機能を追加したい場合、選んだテーマのカスタマイズの自由度が低いと、実現が難しかったり、余計な手間がかかったりすることがあります。
  • 初心者の方は、直感的な操作や豊富な設定オプションがある「カスタマイズしやすい」と評判のテーマを選ぶと良いでしょう。
• 複雑な機能の実装には知識が必要:
  • 非常に高度で特殊な機能や、テーマの標準設定にない大きな構造変更を行うには、やはりPHPなどのプログラミング知識が必要になります。
  • この場合、専門の制作会社に依頼したり、自分でコードを編集するために学習したりする必要があります。

結論として、多くのカスタマイズは知識がなくても比較的簡単に行えますが、どこまで深く、細かくこだわるかによって難易度は変わってきます。

有料WordPressテーマはカスタマイズに有利

有料のWordPressテーマは一般的にカスタマイズに有利だと言えます。

主な理由としては、以下のような点があります。

1. 豊富な機能と設定オプション:
   • 有料テーマには、デザインやレイアウトを細かく調整するための専用機能や設定項目が豊富に用意されていることが多いです。
   • プラグインをあまり使わなくても、枠線、吹き出し、装飾文字などの実用的な機能が使えるようになっていることが多く、初心者でも簡単にカスタマイズできます。
2. デザインの自由度の高さ:
   • 最初からプロが作成した洗練されたデザインテンプレートが用意されており、それをベースに色やレイアウトを比較的自由に調整できるテーマが多いです。
   • 多くのテーマがブロックエディタ（Gutenberg）に完全対応し、より直感的にカスタマイズできるようになっています。
3. サポートとマニュアルの充実:
   • カスタマイズ方法やトラブルシューティングに関する詳細なマニュアルが整備されていたり、購入者向けのサポート（メールやフォーラムなど）が付いていることが多いため、困ったときに解決しやすいです。
4. 技術的な優位性:
   • SEO対策や高速表示など、サイト運営に重要な技術的要素が考慮されて設計されていることが多く、その上でカスタマイズも容易にできるように作られています。

無料テーマでも素晴らしいものはありますが、カスタマイズの自由度を上げようとすると、自分でCSSやHTMLなどの専門知識が必要になるケースや、利用できる機能に限界を感じることが少なくありません。

時間を節約し、効率的かつ高品質なサイトを構築したい場合は、初期投資として有料テーマを導入することが、結果的に大きなメリットとなることが多いです。

テーマ名	主な特徴・強み	適したサイト
ザ・トール (THE THOR)	国内最高クラスのSEO最適化と高速表示 プロ仕様の美しいデザインを簡単に実現（着せ替え機能あり） アフィリエイトに役立つランキング作成機能やCTAが充実<記事装飾機能が豊富で、読みやすいコンテンツ作成を支援	アフィリエイトブログ、本格的なメディアサイト、集客を重視するビジネスサイト
エマノン (Emanon)	Web集客・ビジネス利用に特化した機能が豊富 CTA（行動喚起）、LP（ランディングページ）、メルマガ専用ページなどを簡単に作成 企業サイト、オウンドメディアに適したデザイン WooCommerce対応でネットショップにも利用可能（Premium）	コーポレートサイト、企業ブログ、オウンドメディア、リード獲得を目的としたビジネスサイト
ストークSE (STORK SE)	「誰が使っても美しいデザイン」を追求したモバイルファースト設計 シングルカラム（1カラム）レイアウトに特化し、コンテンツへの集中度が高い ブロックエディタに最適化され、直感的な操作が可能 シンプルかつ洗練されたデザインで、汎用性が高い	商品・サービスのブランディングサイト、ミニマルな企業サイト、シンプルで美しいブログ
リキッドプレス (LIQUID PRESS)	用途別に豊富なテーマ（マガジン、コーポレートなど）が用意されている 高いSEO対策と構造化データ対応 多言語対応機能（LIQUID CORPORATEなど） カスタマイザーでの直感的な編集が可能	メディアサイト（ブログ）、多言語対応が必要な企業サイト、目的に合わせたテーマを選びたいサイト

補足情報

• ザ・トール: SEOと収益化を最重視する設計で、アフィリエイターやブロガーに人気が高いテーマです。
• エマノン: 特にBtoBやサービス業など、Webからの顧客獲得（リードジェネレーション）を重視するビジネスサイト構築に適しています。
• ストークSE: モバイルでの見やすさに徹底的にこだわり、余計な装飾を排したデザインが特徴です。商品の魅力を際立たせたいサイトにも向いています。
• リキッドプレス: 豊富なラインナップの中から目的特化型のテーマを選べるのが大きなメリットです。例えば、ニュースサイトならLIQUID MAGAZINE、企業サイトならLIQUID CORPORATEなどがあります。