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

Twenty Twentyのカスタマイズ方法

1. WordPress標準のカスタマイザーを使う

WordPressのダッシュボードから 「外観」 rightarrow 「カスタマイズ」 を選択すると、テーマカスタマイザーが開きます。ここからリアルタイムで変更を確認しながら、以下の項目などをカスタマイズできます。

• サイト基本情報: サイトのタイトル、キャッチフレーズ、サイトアイコン（ファビコン）の設定
• 色: ヘッダーとフッターの背景色、プライマリーカラー（リンクやボタンの色など）の設定
• テーマオプション: 投稿の抜粋表示、ヘッダーに検索アイコンを表示するかどうかなどの設定
• 背景画像: サイトの背景画像の設定
• メニュー: グローバルナビゲーションなどのメニュー設定
• ウィジェット: サイドバーやフッターに表示するウィジェットの設定
• ホームページ設定: フロントページに固定ページを表示するか、最新の投稿を表示するか

2. 追加CSSでカスタマイズする

カスタマイザーの「追加CSS」セクションにCSSコードを記述することで、より詳細なデザイン変更が可能です。例えば、フォントサイズや行間、要素の配置などを調整できます。

/* サイトのタイトル色を変更 */
.site-title a {
    color: #ff0000;
}

/* 記事の段落のフォントサイズを大きくする */
.entry-content p {
    font-size: 1.1em;
    line-height: 1.8;
}

3. 子テーマを作成してカスタマイズする

Twenty Twentyテーマのファイルを直接編集すると、テーマのアップデート時に変更が上書きされてしまいます。これを避けるためには子テーマを作成するのがベストです。子テーマを作成すれば、オリジナルのTwenty Twentyテーマの機能を継承しつつ、functions.phpやstyle.cssなどを編集して、安全にカスタマイズできます。

子テーマの作成方法については、WordPress Codexや多くのウェブサイトで詳しく解説されています。少し手間はかかりますが、長期的に見れば非常に有効な方法です。

4. プラグインを利用する

デザインのカスタマイズに特化したプラグインを利用する方法もあります。例えば、フォントの変更プラグインや、CSSを視覚的に編集できるプラグインなどがあります。ただし、プラグインの導入はサイトの動作に影響を与える可能性もあるため、信頼できるプラグインを選び、バックアップを取ってから試すようにしましょう。

Twenty Twentyとは

Twenty Twenty（トゥエンティ・トゥエンティ）は、WordPress（ワードプレス）のデフォルトテーマの一つです。

2019年後半にリリースされたテーマで、その最大の特徴はブロックエディター（Gutenberg）の柔軟性を最大限に活かすように設計されている点です。

主な特徴

• ブロックエディターへの最適化
  • ブロックエディター（Gutenberg）での編集を前提としており、全幅エディタースタイルが含まれています。これにより、エディターでの見た目が実際のサイトの表示に非常に近くなります。
• デザイン
  • 1カラムを基調としたミニマリスト（最小限主義）なデザインです。
  • カスタマイズによって、企業やビジネスのサイト、個人ブログなど、様々な用途に利用できるように意図されています。
• カスタマイズ性
  • 「外観」メニューの「カスタマイズ」から、アクセントカラーや背景色などを簡単に変更できます。
  • サイトロゴのサポートや、アイキャッチ画像の表示にも対応しています。
  • Cover Template（カバテンプレート）や Full Width Template（全幅テンプレート）など、特定のページレイアウト用のテンプレートも用意されています。
• 用途
  • シンプルなレイアウトでコンテンツを際立たせたい場合や、ブロックエディターの機能を積極的に使ってダイナミックなレイアウトを構築したい場合に適しています。

WordPressでは、毎年リリースされるバージョンに合わせて新しいデフォルトテーマが導入されており、「Twenty Twenty」はその年号を冠したテーマの一つです。（例: Twenty Twenty-Four、Twenty Twenty-Threeなど）。

利用数

WordPress.orgのテーマページによると、「Twenty Twenty」の有効インストール数は200,000+と表示されています（最終更新日などの情報と併せて）。

ただし、別の情報源では「Twenty Twenty: 700k+ installations.」と記載されているものもあり、時期や集計方法によって数値が異なる可能性があります。

正確なリアルタイムの利用数は把握が難しいですが、公式の情報源では20万件以上ということが確認できます。

利用料

ordPressのデフォルトテーマである「Twenty Twenty」は、無料で利用できます。

「Twenty Twenty」を含む「Twenty Year」シリーズのテーマ（例: Twenty Twenty-Four、Twenty Twenty-Fiveなど）は、WordPressをインストールすると標準で含まれており、追加の費用はかかりません。

Twenty Twentyのカスタマイザー

WordPressテーマ「Twenty Twenty」のカスタマイザーについてですね。

「Twenty Twenty」は、WordPressのデフォルトテーマの一つで、カスタマイザーを使って様々な設定変更が可能です。

カスタマイザーへのアクセス方法:

WordPressの管理画面から、「外観」→「カスタマイズ」をクリックすることで、カスタマイザーを開くことができます。

Twenty Twentyのカスタマイザーで設定できる主な項目:

• サイト基本情報:
  • サイトのタイトル
  • キャッチフレーズ
  • サイトアイコン（ファビコン）
  • サイトロゴ (推奨サイズ：幅240px、高さ180px)
  • Retinaディスプレイ対応ロゴ (240x180pxの2倍のサイズ)
• 色:
  • アクセントカラー
  • 背景色 (デフォルト: ライトベージュ)
  • ヘッダーとフッターの背景色 (デフォルト: 白)
  • ダークモードの有効/無効
• テーマオプション:
  • 検索アイコンの表示/非表示 (ヘッダー内)
  • ソーシャルメニューの表示位置 (フッターの右側など)
  • カバーテンプレートに関する設定（背景画像、ロゴ、メニューリンクの色など）
  • 投稿やページのタイトル、メタ情報の表示設定
  • フッターのウィジェットエリアや著作権表示の変更
• 背景画像:
  • コンテンツエリアの背景画像の設定
• メニュー:
  • ヘッダーメニュー、フッターメニュー、ソーシャルメニューなどの設定
• ウィジェット:
  • フッターに設定できるウィジェットエリアへのウィジェット追加
• ホームページ設定:
  • 最新の投稿を表示するか、固定ページをフロントページにするかを選択

Twenty Twentyの特徴とカスタマイザーのポイント:

• シンプルさ: Twenty Twentyは非常にシンプルなデザインなので、カスタマイザーで色などを変更するだけでも、サイトの雰囲気を大きく変えられます。
• アクセントカラー: ユーザーがカスタマイザー上でアクセントカラーを設定すると、エディタのカラーパレットもそれに合わせて有効になります。
• スターターコンテンツ: まだページや投稿を作成していない新しいサイトの場合、カスタマイザーで「公開」をクリックすることで、テーマのデモページと同じ内容のスターターコンテンツを有効にできます。
• ブロックエディタとの連携: Twenty Twentyは、WordPressのブロックエディタ (Gutenberg) との連携を考慮して設計されています。コンテンツの作成は主にブロックエディタで行い、サイト全体のデザインやレイアウトの調整をカスタマイザーで行うイメージです。

補足:

Twenty Twenty-Twoなど、より新しいデフォルトテーマでは、「サイトエディター」という機能が導入され、ヘッダーやフッターなども含めたサイト全体の編集がブロックベースで行えるようになっています。Twenty Twentyは、まだ従来のカスタマイザーが主要な設定ツールとなっています。

もし、より詳細なカスタマイズを考えている場合は、Twenty Twenty用のカスタマイザー拡張プラグイン「Options for Twenty Twenty」なども存在しますので、検討してみるのも良いでしょう。

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

Twenty Twentyはブロックエディターに最適化されており、WordPress 5.3以降の新しい機能との相性が良いテーマです。カスタマイズを行う際には、以下の点に注意すると良いでしょう。

1. 子テーマの利用を強く推奨

これが最も重要です。Twenty Twentyを直接編集すると、テーマのアップデートがあった際に、行っ​​た変更がすべて上書きされて消えてしまいます。子テーマを作成し、子テーマ内でカスタマイズを行うことで、この問題を回避できます。

• 子テーマの作り方:
  1. wp-content/themes ディレクトリ内に新しいフォルダ（例: twentytwenty-child）を作成します。
  2. そのフォルダ内に style.css ファイルを作成し、以下の内容を記述します。

/*
 Theme Name: Twenty Twenty Child
 Template: twentytwenty
 */

必要に応じて functions.php ファイルも作成し、親テーマのスタイルシートを読み込む記述を追加します。

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

• 1. WordPressの管理画面の「外観」→「テーマ」から、作成した子テーマを有効化します。

2. ブロックエディター (Gutenberg) の理解

Twenty Twentyはブロックエディターでの使用を前提として設計されています。

• ブロックのスタイリング: カスタムCSSを追加する際、特定のブロックにのみスタイルを適用したい場合は、ブロックエディターが生成するHTML構造やCSSクラスを理解することが役立ちます。開発者ツール（検証）を使用して、目的のブロックのクラス名を確認しましょう。
• パターンと再利用可能なブロック: Twenty Twentyは、ブロックパターンや再利用可能なブロックを活用することで、より効率的にレイアウトを作成できます。カスタマイズの際には、これらの機能を壊さないように注意したり、逆にそれらを活用してカスタマイズの幅を広げることができます。

3. カスタムCSSの活用

デザインの変更のほとんどは、カスタムCSSで対応できます。

• 管理画面のカスタマイザー: 「外観」→「カスタマイズ」→「追加CSS」からCSSを記述するのが最も手軽です。リアルタイムでプレビューを確認しながら編集できます。
• 子テーマの style.css: より複雑なCSSや、ファイル管理をしたい場合は、子テーマの style.css に記述します。

4. functions.php の編集

機能の追加や変更を行う場合は、子テーマの functions.php を使用します。

• フックの利用: WordPressにはアクションフックとフィルターフックという仕組みがあります。これらを利用することで、既存のWordPressの動作を変更したり、新しい機能を追加したりできます。Twenty Twentyもこれらのフックを活用して構築されています。
• コードの慎重な追加: functions.php に誤ったコードを記述すると、サイトが動作しなくなる（真っ白になる）可能性があります。必ずバックアップを取ってから作業し、追加するコードの意味を理解してから行いましょう。エラーが発生した場合は、FTPなどで functions.php を元の状態に戻す必要があります。

5. テンプレートファイルの編集

より大規模なレイアウトの変更や、特定のページの構造を変更したい場合は、テンプレートファイルを編集することになります。

• 子テーマへのコピー: 変更したいTwenty Twentyのテンプレートファイル（例: index.php, header.php, footer.php, page.php など）を、親テーマから子テーマの同じ階層にコピーします。
• コピーしたファイルを編集: 子テーマにコピーしたファイルを編集することで、親テーマのファイルは変更されずに、子テーマのファイルが優先的に読み込まれます。これにより、親テーマのアップデートの影響を受けません。

6. パフォーマンスへの配慮

カスタマイズによってサイトの表示速度が低下しないように注意しましょう。

• CSS/JSの最適化: 不要なCSSやJavaScriptは読み込まないようにする、ファイルを結合・圧縮するなどの対策が有効です。
• 画像の最適化: カスタムで画像を追加する場合は、WebP形式の利用や適切な圧縮を行うなど、サイズを小さく保つようにします。

7. バックアップの重要性

カスタマイズを行う前には、必ずサイト全体のバックアップを取るようにしましょう。予期せぬ問題が発生した場合でも、すぐに元の状態に戻すことができます。

8. Twenty Twentyの設計思想の理解

Twenty Twentyは、WordPressのデフォルトテーマとして、汎用性とシンプルさを追求しています。

• シンプルなデザイン: 複雑な機能やデザイン要素は最小限に抑えられています。もし非常に凝ったデザインを目指すのであれば、Twenty Twentyをベースにするよりも、別のテーマを検討するか、より高度な開発スキルが必要になる可能性があります。
• アクセシビリティ: アクセシビリティにも配慮して設計されています。カスタマイズによってアクセシビリティを損なわないように注意しましょう。

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

WordPressの公式デフォルトテーマであるTwenty Twentyは、シンプルでモダンなデザインが特徴で、特に初心者の方やブログを始めたばかりの方には扱いやすいテーマです。そのカスタマイズ性についての評価は、ユーザーの目的やスキルレベルによって大きく分かれます。

Twenty Twentyのカスタマイズの利点

• シンプルでわかりやすい
  • カスタマイズ項目が少なく、直感的に操作できるのが最大の魅力です。初めてWordPressを触る方でも、迷うことなくロゴや背景色、ヘッダーなどを設定できます。
• 軽量で表示速度が速い
  • 余計な機能が削ぎ落とされているため、ページの読み込みが速く、ユーザーエクスペリエンス（UX）の向上につながります。これはSEO（検索エンジン最適化）にも好影響を与えます。
• ブロックエディタ（Gutenberg）に最適化
  • WordPressの新しいエディタであるブロックエディタに完全に最適化されており、コンテンツ作成が非常にスムーズです。ブロックを組み合わせて、柔軟なレイアウトを作成できます。

Twenty Twentyのカスタマイズの欠点

• 機能が限定的
  • 有料テーマのような高度な機能（カスタム投稿タイプ、EC機能、複雑なレイアウトオプションなど）は備わっていません。本格的なビジネスサイトやアフィリエイトサイトを構築するには、物足りなさを感じるかもしれません。
• デザインの自由度が低い
  • カスタマイズできる範囲が限られているため、他のサイトと差別化を図るのは難しいです。テンプレートに近い感覚で、個性を出すにはCSS（カスケーディング・スタイル・シート）を自分で記述するなどの知識が必要になります。

結論：どんな人におすすめか？

Twenty Twentyのカスタマイズは、以下のような方におすすめです。

1. WordPressの初心者：まずWordPressの仕組みを理解し、シンプルなブログを始めたい方。
2. 趣味でブログを始める方：デザインにこだわりすぎず、コンテンツ作成に集中したい方。
3. とにかくシンプルなサイトを作りたい方：余計な装飾を排除し、コンテンツを際立たせたい方。

本格的なアフィリエイトやビジネス目的で、より高度な機能やデザインのカスタマイズを求める場合は、有料テーマの利用を検討する方が良いでしょう。シンプルさを求めるならTwenty Twentyは素晴らしい選択肢ですが、将来的にサイトを大きく拡張する可能性があるなら、最初から多機能なテーマを選ぶのも一つの手です。

公式テーマや無料テーマのデメリット

WordPressの公式テーマや無料テーマには、いくつかのデメリットがあります。主な点をまとめると以下のようになります。

無料テーマ（公式ディレクトリ含む）の主なデメリット

1. 機能性やカスタマイズ性の制限
   • 有料テーマに比べて、提供される機能やデザインオプションが限られていることが多く、理想とするウェブサイトを構築するために追加の作業やコーディング知識が必要になる場合があります。
   • デザインのユニークさに欠ける：多くの人が利用するため、他のサイトとデザインが似通ってしまう可能性があります。
2. サポート体制の不足
   • 公式なサポートデスクがない：問題が発生した場合、テーマ開発者からの直接的なサポートは期待できません。公式フォーラムやコミュニティなどの情報に頼る必要があります。
3. アップデートの頻度と保証
   • アップデートが不定期または停止するリスク：開発者のモチベーションやリソースに依存するため、テーマの更新が途絶えがちになることがあります。
   • セキュリティリスク：アップデートがされないテーマは、WordPress本体やプラグインの新しいバージョンとの互換性問題や、セキュリティの脆弱性が放置されるリスクがあります。
4. 全体の完成度や細かい設定の自由度
   • デザインの細かい部分（例：コメント欄、SNSボタンのオン・オフなど）を自由に設定できないなど、痒いところに手が届かないことがあります。
5. 著作権表示や広告
   • テーマによっては、フッターなどに開発者や提供サービスの著作権表示（クレジット）が消せない、または削除が有料となっている場合があります。

公式テーマ（無料で提供されているもの）に関する追加の留意点

公式テーマはWordPressの基準を満たしており、一定の品質やセキュリティは保たれていますが、無料テーマ全般のデメリットに加え、以下の点も考慮されることがあります。

• デザインがシンプルで汎用性が高い：多くの公式テーマは、ユーザーが自由にカスタマイズできることを前提に、あえてシンプルな設計になっています。そのため、そのままではデザイン面で物足りなさを感じる場合があります。
• 海外製が多く日本語情報が少ない：公式ディレクトリには海外製のテーマも多く、日本語に対応していない、または利用情報が少ない場合があります。

まとめ

特に企業サイトや収益化を目指すサイトなど、高い機能性、デザイン性、セキュリティ、手厚いサポートが必要な場合は、有料テーマの検討も視野に入れることが推奨されます。

一方、個人的なブログや小規模なサイトであれば、公式テーマや信頼できる無料テーマでも十分に運用可能です。ただし、その場合、カスタマイズやトラブル解決に必要な知識は自分で調達する必要があります。

WordPressの公式テーマ（無料）と有料テーマを比較すると、主に費用、機能・カスタマイズ性、サポート、デザインなどの点で違いがあります。

以下に主な比較ポイントをまとめます。

あなたの状況	推奨されるテーマ
予算をかけたくない、個人ブログ、シンプルなサイトで十分、自分でカスタマイズできる知識がある	公式テーマ（無料）
ビジネスサイトや本格的なサイトを構築したい、デザインの独自性を出したい、豊富な機能やカスタマイズ性が欲しい、初心者でサポートが必要、時間と労力を節約したい	有料テーマ

最終的には、あなたのサイトの目的、予算、求める機能、そしてウェブサイト構築のスキルレベルに応じて、最適なテーマを選択することが重要です。有料テーマを選ぶ場合は、評判やサポート体制、アップデートの頻度をしっかり確認することをお勧めします。

おすすめ有料テーマ

テーマ名	主な特徴・強み	適したサイト
ザ・トール (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などがあります。