Twenty Sixteenをカスタマイズ – WordPressテーマ

Twenty Sixteenのカスタマイズ

WordPressの標準テーマである「Twenty Sixteen」のカスタマイズですね。このテーマはシンプルでブログに適しており、基本的なカスタマイズはWordPressのカスタマイザーから行うことができます。

カスタマイザーでできること

WordPressの管理画面から「外観」→「カスタマイズ」を選択すると、リアルタイムで変更を確認しながら以下の項目をカスタマイズできます。

サイト基本情報: サイトのタイトル、キャッチフレーズ、サイトアイコン（ファビコン）の設定
色: ヘッダーテキストの色、背景色の変更
ヘッダー画像: ヘッダー部分に表示する画像のアップロード、設定
背景画像: サイト全体の背景画像のアップロード、設定
メニュー: グローバルナビゲーションなどのメニュー作成と表示位置の設定
ウィジェット: サイドバーやフッターに表示するウィジェット（最近の投稿、カレンダーなど）の追加、編集
ホームページ設定: フロントページを最新の投稿にするか、固定ページにするかの設定
追加CSS: カスタムCSSコードを追加して、より詳細なデザイン変更

それ以上のカスタマイズ

カスタマイザーでは設定できない部分をカスタマイズしたい場合は、以下の方法を検討する必要があります。

子テーマの作成と編集: Twenty Sixteenテーマファイルを直接編集すると、テーマのアップデート時に変更が上書きされてしまいます。これを避けるために子テーマを作成し、子テーマ内でCSSやPHPファイルを編集するのが一般的な方法です。子テーマを作成すれば、親テーマの機能を継承しつつ、安全にカスタマイズできます。
プラグインの活用: 「SiteOrigin CSS」や「Custom CSS」のようなカスタムCSSを簡単に記述できるプラグインを利用したり、「Elementor」や「Beaver Builder」といったページビルダープラグインを使って、より複雑なレイアウトを構築することも可能です。
PHPコードの編集（上級者向け）: テーマの構造自体を変更したい場合（例: 特定の要素の表示・非表示、新しい機能の追加など）は、子テーマ内のfunctions.phpやその他のテンプレートファイルを直接編集する必要があります。これはPHPの知識が必要となり、誤ったコードはサイトの表示に影響を与える可能性があるため、注意が必要です。

Twenty Sixteenのカスタマイザー

WordPressテーマ「Twenty Sixteen」のカスタマイザーでは、以下の項目を調整できます。これはWordPressの管理画面の「外観」→「カスタマイズ」からアクセスできます。

主なカスタマイザーオプション:

サイト基本情報:
- サイトのタイトルとキャッチフレーズ: ウェブサイトのタイトルと簡単な説明を設定します。
- サイトアイコン: ブラウザのタブやスマートフォンのホーム画面に表示されるサイトのアイコン（ファビコン）を設定します。
色:
- ベース配色: Twenty Sixteenには4種類の「ベース配色」が用意されており、サイト全体の雰囲気を簡単に変更できます。
- 背景色: コンテンツエリアの周りに表示される背景色を設定します。
- ページ背景色: コンテンツが配置されるコンテナの背景色を設定します。
- リンクの色: サイト内のすべてのリンクの色を設定します（ホバー時の色も含む）。
- メインのテキストカラー: 本文のテキストの色を設定します。
- サブのテキストカラー: 引用符やリンクのホバー時などに使用される色です。
ヘッダー画像:
- サイトのトップに表示されるカスタムヘッダー画像をアップロードできます。複数の画像をアップロードしてランダム表示することも可能です。推奨サイズは幅1200px、高さ280pxです。
背景画像:
- 背景色ではなく、カスタム背景画像をアップロードして設定できます。タイル表示や繰り返し表示のオプションもあります。
メニュー:
- メインメニュー: ヘッダーに表示される主要なナビゲーションメニューを設定します。
- ソーシャルリンクメニュー: フッターなどに表示されるソーシャルメディアのリンクメニューを設定します。
ウィジェット:
- サイトのサイドバーやフッターに表示されるウィジェット（最近の投稿、カテゴリー、検索など）を設定します。Twenty Sixteenはデフォルトで右サイドバーを持っています。
ホームページ設定:
- サイトのトップページを最新の投稿にするか、固定ページにするかを選択できます。
追加CSS:
- より詳細なデザイン変更を行いたい場合に、独自のCSSコードを記述できます。

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

シンプルなデザイン: Twenty Sixteenは、水平方向のヘッドラインとオプションの右サイドバーという、WordPressで人気のあるレイアウトを採用しています。ブログやWebサイトに最適です。
モバイルファースト: モバイルデバイスでの表示に最適化されており、様々な画面サイズで美しく表示されます。
リード文（Excerpt）: 投稿のタイトルと本文の間に表示される導入文を設定する機能があります。
子テーマの利用: より複雑なカスタマイズを行う場合や、テーマのアップデート時にカスタマイズ内容が上書きされないようにするためには、子テーマを作成してカスタマイズすることをお勧めします。

これらのカスタマイザーオプションを組み合わせることで、Twenty Sixteenテーマを自分のウェブサイトに合わせて調整することができます。

Twenty Sixteenのカスタマイズ方法

Twenty Sixteenはシンプルでクラシックなデザインが魅力のテーマなので、比較的簡単にカスタマイズできると思います。いくつか方法がありますので、それぞれご紹介します。

1. WordPressのカスタマイザーを使う（最も簡単で推奨される方法）

WordPressには標準で「カスタマイザー」という機能が搭載されており、テーマの基本的な設定やデザインを視覚的に変更できます。

アクセス方法: WordPress管理画面にログインし、左サイドバーの「外観」>「カスタマイズ」をクリックします。
カスタマイズできる主な項目（Twenty Sixteenの場合）:
- サイト基本情報: サイトのタイトル、キャッチフレーズ、サイトアイコン（ファビコン）の設定。
- 色: ヘッダーのテキスト色、背景色、メインカラーなどの変更。
- ヘッダー画像: ヘッダー部分に表示する画像をアップロードして設定。
- 背景画像: サイトの背景に画像を設定。
- メニュー: ナビゲーションメニューの作成と表示位置の設定。
- ウィジェット: サイドバーやフッターに表示するウィジェット（検索、アーカイブなど）の追加・編集。
- ホームページ設定: トップページを「最新の投稿」にするか、「固定ページ」にするかの設定。
- 追加CSS: より詳細なカスタマイズをしたい場合に、直接CSSコードを記述できる項目。

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

カスタマイザーの「追加CSS」機能を使えば、CSSの知識があればより自由にデザインを調整できます。

アクセス方法: カスタマイザー（「外観」>「カスタマイズ」）を開き、「追加CSS」をクリックします。
使い方: 変更したい要素のCSSセレクタとプロパティを記述します。
- 例：投稿のタイトル文字サイズを大きくする

.entry-title {
    font-size: 3em; /* 既存のサイズより大きくする */
}

例：本文の文字色を変更する

body {
    color: #333; /* 濃いグレー */
}

ポイント: ブラウザの開発者ツール（F12キーで開くことが多い）を使うと、変更したい要素のCSSセレクタを特定しやすくなります。

3. 子テーマを作成してカスタマイズする（上級者向け・推奨される方法）

テーマファイルを直接編集すると、テーマのアップデート時に変更内容が失われてしまいます。これを避けるために「子テーマ」を作成し、子テーマ側でカスタマイズするのがベストプラクティスです。

子テーマとは？: 親テーマ（Twenty Sixteen）の機能やデザインを引き継ぎつつ、子テーマ側で独自のカスタマイズを行うためのテーマです。
メリット:
- 親テーマのアップデートの影響を受けない。
- 誤ってファイルを破損しても、親テーマは無事なので復旧が容易。
作成方法（大まかな手順）:
1. WordPressの wp-content/themes ディレクトリ内に新しいフォルダを作成します（例: twentysixteen-child）。
2. 作成したフォルダ内に style.css と functions.php の2つのファイルを作成します。
3. style.css に子テーマの情報を記述し、親テーマを読み込む設定を追加します。

/*
 Theme Name: Twenty Sixteen Child
 Theme URI: https://example.com/twentysixteen-child/
 Description: Twenty Sixteenの子テーマ
 Author: あなたの名前
 Author URI: https://example.com/
 Template: twentysixteen
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: twentysixteen-child
 */

functions.php に親テーマのスタイルシートを読み込む記述を追加します。

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

1. 作成した子テーマをWordPress管理画面の「外観」>「テーマ」から有効化します。
2. 子テーマフォルダ内に、変更したい親テーマのテンプレートファイル（例: header.php, footer.php）をコピーして、コピーしたファイルを編集します。

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

デザインのカスタマイズに特化したプラグインを利用する方法もあります。

CSSカスタマイズプラグイン: 「Simple Custom CSS」や「Custom CSS」などのプラグインを使えば、管理画面からCSSを記述する専用のエリアが用意され、より管理しやすくなります。
ページビルダープラグイン: 「Elementor」や「Gutenberg Blocks」などのページビルダープラグインを使えば、ドラッグ＆ドロップで複雑なレイアウトを作成できます。ただし、Twenty Sixteenのシンプルさを活かしたい場合は、少しオーバースペックかもしれません。

カスタマイズのヒントと注意点

バックアップ: カスタマイズを行う前には、必ずサイト全体のバックアップを取るようにしましょう。特に子テーマの作成やファイルの直接編集を行う場合は重要です。
開発者ツール: ブラウザの開発者ツール（F12キー）を積極的に活用しましょう。要素のCSSプロパティを確認したり、一時的にCSSを変更して表示を確認したりできます。
キャッシュのクリア: カスタマイズが反映されない場合は、ブラウザのキャッシュやWordPressのキャッシュプラグインのキャッシュをクリアしてみてください。
Twenty Sixteenのドキュメント: Twenty Sixteenには公式のドキュメントやサポート情報がある場合があります。そちらも参考にすると良いでしょう。

これらの方法の中から、ご自身のスキルレベルやカスタマイズしたい内容に合わせて最適なものを選んでみてください。まずはカスタマイザーから試して、物足りない部分を「追加CSS」で補うのがおすすめです。より本格的なカスタマイズが必要になったら、子テーマの作成を検討すると良いでしょう。

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

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

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

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

まとめと推奨

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