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

Twenty Twentyのカスタマイズ

Twenty Twentyは、WordPressに標準で搭載されているテーマで、ブロックエディタ（Gutenberg）との連携に優れており、比較的簡単にデザインを変更できます。

Twenty Twentyテーマのカスタマイズ方法

主に以下の方法でカスタマイズを進めることができます。

• WordPressカスタマイザーを使用する: WordPressの管理画面から「外観」→「カスタマイズ」を選択すると、リアルタイムで変更を確認しながら色やフォント、ヘッダー、フッターなどを調整できます。コーディングの知識がなくても手軽にカスタマイズできるのが特徴です。
• 追加CSSを使用する: カスタマイザー内の「追加CSS」セクションにCSSコードを記述することで、より詳細なデザイン変更が可能です。例えば、特定の部分の文字サイズや余白、背景色などを調整できます。
• 子テーマを作成する: テーマファイルを直接編集すると、テーマのアップデート時に変更が上書きされてしまいます。それを避けるために「子テーマ」を作成し、子テーマ内でテンプレートファイルやfunctions.phpなどを編集する方法があります。これはPHPやCSSの知識が必要になりますが、より高度なカスタマイズが可能です。

Twenty Twentyのカスタマイザー

Twenty Twentyテーマは、標準のWordPressテーマとして多くのカスタマイズオプションを「カスタマイザー」で提供しています。カスタマイザーは、サイトに加える変更を公開する前にプレビューできる機能で、WordPressの管理画面から「外観」→「カスタマイズ」でアクセスできます。

Twenty Twentyテーマのカスタマイザーで設定できる主な項目は以下の通りです。

1. サイト基本情報 (Site Identity)

• サイトロゴ: ビジネスのロゴや顔写真を表示できます。推奨サイズは幅240px、高さ180pxです。
• サイトタイトルとキャッチフレーズ: サイトのタイトルと説明文を設定・表示・非表示にできます。
• サイトアイコン (ファビコン): ブラウザのタブやアプリのアイコンとして表示されるアイコンを設定します。正方形で512×512ピクセル以上の画像が推奨されます。

2. 色 (Colors) Twenty Twentyでは、サイト全体の雰囲気を簡単に変更できる3つの色設定があります。

• 背景色: サイトの背景色を設定します（デフォルトはライトベージュ）。
• ヘッダーとフッターの背景色: ヘッダーとフッターの背景色を設定します（デフォルトは白）。
• メインカラー (Primary Color): アクセントカラーとして使用されます（デフォルトはピンク）。

3. テーマオプション (Theme Options)

• カバーテンプレート (Cover Template): カバーテンプレートの背景画像にパララックス効果を追加するオプションや、オーバーレイの色、不透明度などを設定できます。
• コンテンツの横幅: サイトコンテンツの最大幅を変更できます。

4. メニュー (Menus)

• サイトのナビゲーションメニューを作成・管理します。Twenty Twentyは複数のメニュー位置をサポートしています（例：メインナビゲーション、ソーシャルメニューなど）。

5. ウィジェット (Widgets)

• サイトのフッター部分などにウィジェットエリアが用意されており、テキスト、画像、最近の投稿などを追加できます。

6. ホームページ設定 (Homepage Settings)

• フロントページを「最新の投稿」にするか、特定の「固定ページ」にするかを選択できます。

7. 追加CSS (Additional CSS)

• テーマのCSSを直接編集することなく、カスタムCSSを追加してデザインを細かく調整できます。

Twenty Twenty-Fourなどの新しいブロックテーマとの違い 近年リリースされたTwenty Twenty-TwoやTwenty Twenty-Fourのようなブロックテーマでは、カスタマイザーの機能の一部が「サイトエディター」（外観 → エディター）に移行しています。これらの新しいテーマでは、サイト全体のフォント、色、レイアウトなどをブロックエディターを使って視覚的に編集する「フルサイト編集 (FSE)」が主流になっています。

しかし、Twenty Twentyは従来のカスタマイザーを主要なカスタマイズツールとしています。より詳細なカスタマイズを行いたい場合は、Twenty Twenty用のプラグイン（例：「Options for Twenty Twenty」）を利用したり、子テーマを作成してstyle.cssなどを編集したりする方法もあります。

WordPressの「カスタマイズ」機能を使う（推奨）

これが最も簡単で、テーマファイルを直接編集しないため、テーマのアップデート時に変更が上書きされる心配がありません。

1. WordPress管理画面にログインします。
2. 左側のメニューから「外観」>「カスタマイズ」をクリックします。
3. 左側のメニューに表示される項目の中から「追加CSS」を選択します。
4. 変更をプレビューで確認し、「公開」ボタンをクリックして保存します。

Twenty Twentyテーマのよくあるカスタマイズ例

Twenty Twentyはブロックエディター（Gutenberg）に最適化されたシンプルなテーマなので、CSSでデザインを調整しやすいです。

フォントの変更:

body {
    font-family: "メイリオ", Meiryo, sans-serif;
}

ヘッダーの背景色変更:

.site-header {
    background-color: #f0f0f0;
}

コンテンツ幅の調整:

.entry-content > *,
.wp-block-group.has-background,
.wp-block-columns.has-background {
    max-width: 900px; /* お好みの幅に調整 */
    margin-left: auto;
    margin-right: auto;
}

リンクの色変更:

a {
    color: #0088cc;
}
a:hover {
    color: #005588;
}

ボタンのスタイル変更:

.wp-block-button__link {
background-color: #4CAF50; /* 緑色 */
color: white;
padding: 10px 20px;
border-radius: 5px;
}
.wp-block-button__link:hover {
background-color: #45a049;
}

CSSカスタマイズのヒント

• ブラウザのデベロッパーツールを活用する: ChromeのDevToolsやFirefoxのWeb開発ツールなどを使って、変更したい要素のCSSセレクターや現在のスタイルを確認すると効率的です。
• Specificity（詳細度）を理解する: CSSのルールが適用される優先順位を理解しておくと、意図したスタイルが適用されない場合のトラブルシューティングに役立ちます。
• !importantの使用は避ける: 強制的にスタイルを適用する!importantは、後のカスタマイズを困難にする可能性があるため、可能な限り使用を避けてください。