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

Twenty Nineteenのカスタマイズ

WordPressチームによって作成されたTwenty Nineteenは、ブロックエディターの持つ力を引き立たせるよう設計されているテーマです。すべてのデフォルトブロック用カスタムスタイルを含み、エディターでの表示がサイト上の表示と同じになるように作られています。

WordPressテーマ「Twenty Nineteen」は、WordPress 5.0で導入されたデフォルトテーマの一つです。

その特徴は以下の通りです。

ブロックエディター（Gutenberg）を最大限に活用 することを念頭に設計されており、編集画面と実際の表示が近いのが特徴です。
シンプルで洗練されたタイポグラフィ を重視しており、コンテンツの可読性が高いです。
ミニマルなデザイン で、様々な種類のウェブサイト（ブログ、ビジネスサイトなど）に適応しやすいように作られています。
1カラムのレイアウト を採用しており、コンテンツが強調されるデザインです。
カスタムカラー や カスタムロゴ などのカスタマイズ機能も備わっています。
フッターにウィジェットエリアがあります。
ヘッダーにはソーシャルアイコンメニューを追加できます。

「Twenty Nineteen」は、シンプルながらも汎用性が高く、ブロックエディターの機能を試したいユーザーにとって良い選択肢となります。

Twenty Nineteenのテーマカスタマイザー

テーマカスタマイザーは、WordPressの管理画面から外観を簡単に変更できる機能です。Twenty Nineteenでも、ロゴの変更、色の設定、ヘッダー画像の変更など、様々なカスタマイズが可能です。

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

WordPress管理画面にログインします。
左側のメニューから「外観」->「カスタマイズ」をクリックします。

Twenty Nineteenのテーマカスタマイザーで変更できる主な項目（一般的なもの）:

テーマカスタマイザーの項目は、WordPressのバージョンや追加しているプラグインによって多少異なる場合がありますが、Twenty Nineteenでは一般的に以下の項目が利用できます。

サイト基本情報:
- サイトのタイトルとキャッチフレーズの変更
- サイトアイコン（ファビコン）の設定
色:
- テーマの基本色（プライマリーカラー）の変更
ヘッダー画像:
- ヘッダー画像のアップロードと設定
背景画像:
- サイトの背景画像のアップロードと設定
メニュー:
- ナビゲーションメニューの作成と配置
ウィジェット:
- サイドバーやフッターなどのウィジェットエリアにウィジェットを追加・削除・並び替え
ホームページ設定:
- フロントページを最新の投稿にするか、固定ページにするかの設定
- ブログ投稿ページの設定
追加CSS:
- カスタムCSSを記述して、さらに詳細なスタイル調整を行う

テーマカスタマイザー使用時のポイント:

リアルタイムプレビュー: 変更を加えると、右側のプレビュー画面でリアルタイムに反映されます。
公開ボタン: 変更を確定するには、左上にある「公開」ボタンをクリックする必要があります。クリックしないと変更は保存されません。
下書き保存/予約公開: WordPressのバージョンによっては、「下書きとして保存」や「予約公開」のオプションが利用できる場合もあります。
元に戻す: 変更を公開する前であれば、プレビューを閉じるか、設定を元に戻すオプションがある場合もあります。

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

WordPressテーマ「Twenty Nineteen」のカスタマイズに関する注意点ですね。Twenty Nineteenはシンプルで使いやすいテーマですが、カスタマイズを行う際にはいくつか考慮すべき点があります。

以下に主な注意点を挙げます。

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

これはTwenty Nineteenに限らず、WordPressテーマをカスタマイズする際の最も重要な注意点です。

なぜ子テーマが必要か？: WordPressのテーマは頻繁にアップデートされます。親テーマ（Twenty Nineteen本体）を直接編集してしまうと、アップデートの際に変更が上書きされて消えてしまいます。子テーマを使えば、親テーマの機能を継承しつつ、独自のカスタマイズを安全に行うことができます。
子テーマの作り方: wp-content/themes ディレクトリ内に新しいフォルダを作成し、その中にstyle.cssとfunctions.phpを配置するのが基本です。style.cssには親テーマを読み込む記述（Template: twentynineteenなど）が必要です。

2. CSSの優先順位とカスタマイズ範囲の理解

Twenty NineteenのCSS構造: Twenty Nineteenはシンプルながらも、レスポンシブデザインに対応しており、多くのCSSが記述されています。カスタマイズを行う際は、既存のCSSを上書きすることになるため、CSSの優先順位（詳細度、読み込み順序など）を理解しておくことが重要です。
「外観」→「カスタマイズ」の活用: WordPressの管理画面から「外観」→「カスタマイズ」を選択すると、「追加CSS」の項目があります。ここにCSSを記述すると、子テーマのstyle.cssよりも優先されて読み込まれるため、手軽な変更には便利です。しかし、本格的なカスタマイズには子テーマのstyle.cssを利用することをおすすめします。

3. JavaScriptの扱い

既存のJSの理解: Twenty Nineteenは、ナビゲーションの動作や一部の表示にJavaScriptを使用しています。既存のJavaScriptを安易に変更すると、テーマの機能が損なわれる可能性があります。
カスタムJSの追加: 新しいJavaScriptを追加する場合は、子テーマのfunctions.phpを使って、WordPressの推奨する方法（wp_enqueue_script）でスクリプトをキューに入れるようにしましょう。これにより、依存関係や競合の問題を避けることができます。

4. テンプレートファイルの変更

どのファイルを変更するか: 投稿の表示方法 (single.php)、固定ページの表示方法 (page.php)、アーカイブページ (archive.php)、ヘッダー (header.php)、フッター (footer.php) など、Twenty Nineteenの表示を大きく変更したい場合は、親テーマのテンプレートファイルを子テーマにコピーし、それを編集します。
WordPressのテンプレート階層: WordPressにはテンプレート階層というルールがあります。特定の表示（例：特定のカテゴリの投稿）に特化したテンプレートを作成することで、より柔軟なカスタマイズが可能です。

5. パフォーマンスへの影響

CSS/JSの肥大化: カスタマイズを重ねるうちに、CSSやJavaScriptのコードが肥大化し、ページの読み込み速度に影響を与える可能性があります。不要なコードは削除し、最適化を心がけましょう。
画像の最適化: カスタマイズで画像を追加する場合は、Web用に最適化された形式（WebPなど）やサイズを使用し、ページの読み込み速度を損なわないように注意してください。

6. SEOへの配慮

セマンティックなHTML: テーマのHTML構造を大きく変更する際は、HTML5のセマンティックな要素（<header>, <nav>, <main>, <article>, <aside>, <footer>など）を適切に使用し、検索エンジンがコンテンツを理解しやすいように心がけましょう。
アクセシビリティ: カスタマイズによって、視覚障害者やキーボード操作のユーザーがサイトを利用しにくくならないよう、アクセシビリティにも配慮が必要です。例えば、十分なコントラスト比を確保する、キーボードでのナビゲーションを可能にするなどです。

7. 定期的なバックアップ

カスタマイズ前のバックアップ: 大規模なカスタマイズを行う前には、必ずWordPressサイト全体のバックアップを取るようにしましょう。これにより、万が一問題が発生した場合でも、元の状態に戻すことができます。

8. デバッグとテスト

開発環境でのテスト: 本番環境に適用する前に、XAMPPやLocal by Flywheelなどのローカル開発環境でカスタマイズを十分にテストすることをおすすめします。
ブラウザの開発者ツール: ChromeのDevToolsやFirefoxのDeveloper Toolsなど、ブラウザに搭載されている開発者ツールを積極的に活用し、CSSの適用状況やJavaScriptのエラーなどを確認しながら作業を進めましょう。

口コミ・評判

WordPressテーマ「Twenty Nineteen」のカスタマイズの評判は、概して良好です。

良い点

ブロックエディターとの親和性: Twenty Nineteenは、WordPressのブロックエディター（Gutenberg）の力を最大限に引き出すように設計されています。エディターでの表示が実際のサイトの表示とほぼ同じになるため、直感的にコンテンツを作成・編集できます。
シンプルで汎用性が高い: 写真ブログ、ビジネスサイト、非営利団体のウェブサイトなど、幅広い種類のサイトに適応できるシンプルなデザインが特徴です。
カスタマイズの柔軟性: 標準的なカスタマイズ機能（背景色、ヘッダーのテキスト色、ボタンの色など）が充実しており、特別な知識がなくてもある程度のデザイン変更が可能です。ウィジェットやナビゲーションメニューも簡単に設定できます。
視覚的に美しいデザイン: 現代的なサンセリフ体の見出しとクラシックなセリフ体の本文という組み合わせで、あらゆる画面サイズで美しく表示されるように設計されています。

留意点

細かなデザイン変更にはCSSの知識が必要: デフォルトのカスタマイズ機能ではカバーしきれない、より細かなデザイン変更（特定の要素のサイズや余白の調整など）を行うには、CSSの知識が必要になります。
機能が限定的: 高機能な有料テーマと比較すると、あらかじめ用意されている機能はシンプルです。例えば、高度なレイアウト機能や独自のエフェクトなどは含まれていません。

まとめ

WordPressテーマ「Twenty Nineteen」は、ブロックエディターを最大限に活用したい、シンプルで美しいデザインのサイトを作りたいというユーザーに非常に適しています。初心者でも扱いやすく、標準機能で十分なカスタマイズが可能です。ただし、より高度なデザインや機能性を求める場合は、CSSを編集したり、プラグインを追加したりする必要があることを考慮に入れると良いでしょう。

公式テーマと有料テーマを比較

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

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

比較項目	WordPress公式テーマ（無料）	有料テーマ
費用	無料	1万円〜3万円程度の買い切り型、または月額/年額のサブスクリプション型が多い
機能・カスタマイズ性	シンプルで基本的な機能に限定されることが多い。高度な機能はプラグインで補う必要がある。	多機能で、ドラッグ＆ドロップビルダーや豊富なレイアウトオプションなど、高度なカスタマイズ機能が組み込まれていることが多い。
デザイン	シンプルで、他のサイトとデザインが似る可能性がある。	プロフェッショナルで高品質なデザインが多く、独自性を出しやすい。特定の業種に特化したテーマもある。
サポート	公式フォーラムなど、コミュニティベースのサポートが中心で、個別対応は期待できないことが多い。	テーマ開発者による専門的なサポート（メール、チャットなど）が提供されることが多く、初心者には安心。
アップデート	公式ディレクトリに登録されているため、セキュリティや互換性のチェックはされているが、機能追加の頻度はテーマによる。	定期的なアップデートがあり、最新のWordPressやプラグインとの互換性、セキュリティ対策がより迅速に行われる傾向がある。
コードの品質・安全性	公式テーマは厳格な審査基準をクリアしているため、一定の品質・安全性は担保されている。	評判の良いテーマは高品質だが、中にはコードが複雑すぎたり、セキュリティに問題があるものも存在する可能性があるため、選定に注意が必要。
SEO対応	基本的なSEO対策はされているが、高度な最適化はプラグインに依存することが多い。	内部SEOが最適化されているテーマが多い。

まとめと推奨

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

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

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

有料WordPressテーマ

補足情報

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