2024年2月5日 / 最終更新日時 : 2025年11月28日 エス・ティ・セブン カスタマイズ

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をカスタマイズする主な方法と、それぞれの概要、難易度をまとめた表を作成しました。WordPressのカスタマイズは、目的や技術的なスキルレベルに応じて様々なアプローチがあります。

方法概要主な目的難易度
テーマの変更デザインの基本構造、レイアウトを一新します。無料・有料のものが多数あります。デザイン、全体的な機能の変更低〜中
テーマカスタマイザーWordPress標準機能で、テーマの色、フォント、ヘッダー画像などをコードを書かずに変更します。見た目の微調整、ロゴやウィジェットの設定低
プラグインの導入既存のWordPressにない機能（お問い合わせフォーム、SEO対策、セキュリティ強化など）を追加します。機能の追加・拡張低〜中
CSSの追加テーマの見た目（色、サイズ、配置など）を細かく調整するために、カスタムCSSを追記します。デザインの微調整中
子テーマの使用と編集親テーマを直接編集せず、子テーマを作成し、その中のファイル（functions.php やテンプレートファイルなど）を編集して機能を変更・追加します。機能やレイアウトの変更（テーマのアップデートに備える）中〜高
テーマファイルの直接編集親テーマのファイル（header.php, index.php など）を直接編集します。機能やレイアウトの根本的な変更高
カスタムテーマ・プラグイン開発既存のものを使わず、ゼロから独自のテーマやプラグインをPHPなどを使い開発します。独自のデザインと機能の実装最も高

カスタマイズのヒント

  • 簡単な変更から始める場合は、「テーマカスタマイザー」や「プラグインの導入」が最も手軽です。
  • デザインを少し変えたい場合は、「CSSの追加」が強力です。
  • 本格的な機能追加やレイアウト変更を行う際は、テーマのアップデートで変更が消えないように「子テーマの使用と編集」を強くお勧めします。

WordPressテーマ カスタマイズのしやすさ 傾向比較

一般的にWeb上で言われている評判や特徴に基づいて、「コード知識が少ない人が、手軽にデザインを変更できる（＝カスタマイズしやすい）」という視点での傾向をまとめています。

順位 (※傾向)テーマ名主な特徴とカスタマイズの傾向
1THE THOR（ザ・トール）専用カスタマイザー機能が非常に豊富で、コードを書かずに細部までデザインを変更できる。多機能ゆえに操作が複雑に感じる場合もあるが、カスタマイズの幅は広い。
2STORK SE（ストークSE）シンプルな構造で、初心者でも迷いにくい設計。ブログ運営に特化した機能が充実しており、特別な知識がなくても見栄えの良いデザインになりやすい。
3Emanon（エマノン）マーケティング・ビジネスサイト向け。専用ブロックやウィジェットが用意されており、必要な要素を簡単に配置できる。多機能なPro版などがある。
4LIQUID PRESS（リキッドプレス）標準機能は抑えつつも、カスタマイズの拡張性が高い。知識があれば自由に変更しやすいが、THE THORほど専用設定項目は多くない傾向。
5RE:DIVER（リダイバー）比較的新しいテーマで、Webサイト制作向けのモダンなデザインが特徴。専用機能でのカスタマイズと、コードカスタマイズのバランスが取れている。
6GOLD MEDIA（ゴールドメディア） / GOLD BLOG（ゴールドブログ）開発元が同じで、多機能性を売りにしていることが多い。多機能ゆえに初心者には難しいと感じる部分もあるが、専用のオプションは用意されている。

一括.jpは「BtoB（企業間取引）を中心に、様々なサービスの業者をまとめて比較検討・一括問い合わせできる無料のビジネスマッチングプラットフォーム」です。

ココナラは、個人の持つ知識・スキル・経験をオンラインで気軽に売り買いできる、日本最大級のスキルマーケットです。

関連投稿:

  1. Twenty Elevenのカスタマイズ – WordPressテーマ
  2. WordPressで関連記事を表示するコード
  3. WordPressのカスタマイズ（デザイン・レイアウト・機能）+AI
カテゴリー
カスタマイズ
使い方

前の記事

【Seesaa】をWordPressのブログに乗り換える
2024年2月1日
アフィリエイト

次の記事

【Tumblr】をWordPressのブログに乗り換えてアフィリエイト
2024年2月5日