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はカスタマイズしやすい

一般的に、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などがあります。