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

Twenty Sixteenのカスタマイズ

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

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

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

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

それ以上のカスタマイズ

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

1. 子テーマの作成と編集: Twenty Sixteenテーマファイルを直接編集すると、テーマのアップデート時に変更が上書きされてしまいます。これを避けるために子テーマを作成し、子テーマ内でCSSやPHPファイルを編集するのが一般的な方法です。子テーマを作成すれば、親テーマの機能を継承しつつ、安全にカスタマイズできます。
2. プラグインの活用: 「SiteOrigin CSS」や「Custom CSS」のようなカスタムCSSを簡単に記述できるプラグインを利用したり、「Elementor」や「Beaver Builder」といったページビルダープラグインを使って、より複雑なレイアウトを構築することも可能です。
3. 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はシンプルでクラシックなデザインが魅力のテーマなので、比較的簡単にカスタマイズできると思います。いくつか方法がありますので、それぞれご紹介します。

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

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

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

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

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

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

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

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

body {
    color: #333; /* 濃いグレー */
}Code language: CSS (css)

• ポイント: ブラウザの開発者ツール（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
 */Code language: JSON / JSON with Comments (json)

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' );
}
?>Code language: HTML, XML (xml)

• 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テーマ「Twenty Sixteen」をカスタマイズする際の主な注意点は、テーマのアップデートで変更が消えないようにすることと、予期せぬエラーを防ぐために慎重に作業を進めることです。

具体的には、以下の点に注意してください。

1. 必ず「子テーマ」を使用する

これが最も重要な注意点です。テーマファイルを直接編集すると、Twenty Sixteenのテーマがアップデートされた際に、加えたカスタマイズ内容がすべて上書きされて消えてしまいます。

• **子テーマ（Child Theme）**を作成し、カスタマイズはその子テーマ内で行うようにしましょう。
• 子テーマを使用することで、親テーマ（Twenty Sixteen）の機能やデザインを継承しつつ、カスタマイズした部分のみを安全に上書きできます。
• もしCSSやPHPの編集に慣れていない場合は、バックアップを取るか、テーマ編集専用のプラグインを利用することも検討してください。

2. CSS/PHP編集時の注意点

コードを直接編集する場合は、細心の注意が必要です。

• 編集前のコードを必ずコピーして保存する：万が一記述ミスがあった場合、すぐに元に戻せるようにしておきましょう。
• 記述ミスに注意する：特にPHPファイル（functions.phpなど）で記述ミスをすると、サイト全体が表示されなくなるリスクがあります。慣れないうちは、小さな変更から試すようにしましょう。

3. キャッシュの削除

カスタマイズを適用しても、ブラウザやサーバー側のキャッシュが原因で、変更がすぐに反映されないことがあります。

• カスタマイズ後は、ブラウザのキャッシュを削除するか、スーパーリロード（強制再読み込み）を試みてください。
• プラグインやサーバー側でキャッシュ設定をしている場合は、そちらのキャッシュもクリアする必要がある場合があります。

4. デザインのシンプルさ

Twenty Sixteenは非常にシンプルなテーマです。

• 囲い枠や装飾といったデザイン要素は基本的に含まれていないため、凝ったデザインにしたい場合は、自分でCSSを追加して装飾する必要があります。
• 色やヘッダー画像などは「外観」→「カスタマイズ」から設定できますが、より詳細なデザイン調整はCSSの知識が求められます。

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などがあります。