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のカスタマイズ方法

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テーマ 【THE THOR（ザ・トール）】 は、高度なカスタマイズ性が大きな特徴です。HTMLやCSSの専門知識がなくても、管理画面から多くの設定を変更できるため、初心者でも比較的簡単にオリジナリティのあるサイトを作成できます。

主なカスタマイズ機能

• デザイン着せ替え機能: 公式サイトで公開されているデモサイトのデザインをワンクリックで適用できます。まずはこの機能で好きなデザインを適用し、そこから細かく調整していくのがおすすめです。
• テーマカスタマイザー: WordPressの管理画面にある「外観」→「カスタマイズ」から、サイト全体のレイアウト、配色、フォントなどを細かく設定できます。
• デザインパーツの豊富さ: 見出し、リスト、ボタン、ボックス、会話吹き出しなど、記事を装飾するためのパーツが多数用意されており、色やアイコンも自由に設定できます。
• レスポンシブデザイン: PC、タブレット、スマートフォンなど、さまざまな端末に自動で最適化されるレスポンシブデザインが標準搭載されています。

カスタマイズの注意点

• 設定項目の多さ: カスタマイズの自由度が高い反面、設定項目が非常に多いため、どこに何の設定があるのかを把握するのに時間がかかる場合があります。
• 子テーマの使用: テーマをアップデートした際にカスタマイズ内容が消えないよう、必ず子テーマを有効化してカスタマイズを行いましょう。
• マニュアルサイトの活用: 公式マニュアルサイトや、THE THORのカスタマイズ方法を解説しているブログなどを参考にすると、よりスムーズに設定を進められます。

たくさんのカスタマイズ機能があるので、まずは「デザイン着せ替え機能」でベースを作り、少しずつ自分好みのサイトに仕上げていくと良いでしょう。