2023年9月30日 / 最終更新日時 : 2025年10月20日 エス・ティ・セブン カスタマイズ

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

Twenty Twelveのカスタマイズ

WordPressテーマ「Twenty Twelve」のカスタマイズ方法ですね。Twenty Twelveはシンプルで使いやすいテーマなので、比較的簡単に自分好みに変更できます。

主に以下の方法でカスタマイズを進めることができます。

1. WordPressのカスタマイザーを使用する

WordPressには標準で「カスタマイザー」という機能が備わっており、視覚的にテーマの変更を行えます。

  1. WordPressの管理画面にログインします。
  2. 「外観」>「カスタマイズ」をクリックします。
  3. 左側に表示されるメニューから、サイトのタイトルやキャッチフレーズ、色、背景画像、ヘッダー画像などを変更できます。変更はリアルタイムでプレビューに反映されます。

2. 子テーマを作成する（推奨）

テーマファイルを直接編集すると、テーマのアップデート時に変更が上書きされてしまいます。これを避けるため、子テーマを作成してカスタマイズすることを強くお勧めします。

子テーマを作成すれば、親テーマ（Twenty Twelve）のアップデートに影響されずに、独自の変更を保持できます。

子テーマの基本的な作成手順:

  1. wp-content/themesフォルダ内に新しくフォルダを作成します（例: twentytwelve-child）。
  2. 作成したフォルダ内にstyle.cssファイルを作成し、以下の内容を記述します。
/*
 Theme Name: Twenty Twelve Child
 Template: twentytwelve
 */Code language: JSON / JSON with Comments (json)

必要に応じてfunctions.phpファイルを作成し、親テーマのスタイルシートを読み込む記述を追加します。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>Code language: HTML, XML (xml)
  1. WordPress管理画面の「外観」>「テーマ」から、作成した子テーマを有効化します。

子テーマを有効化した後は、この子テーマのstyle.cssやfunctions.php、あるいは新しく作成するテンプレートファイルにコードを追加していくことでカスタマイズできます。

3. CSSを編集する

デザインを変更したい場合は、CSSを編集するのが最も一般的な方法です。

  • 子テーマのstyle.cssに記述する: 子テーマを作成している場合、このファイルに独自のCSSを追加していきます。
  • カスタマイザーの「追加CSS」を使用する: WordPressのカスタマイザーには「追加CSS」という項目があり、ここにCSSを直接書き込むこともできます。手軽に試したい場合に便利ですが、量が多くなる場合は子テーマの方が管理しやすいです。

4. テンプレートファイルを編集する

Twenty Twelveの外観やレイアウトを大きく変更したい場合は、テンプレートファイルを編集する必要があります。例えば、投稿の表示形式、ヘッダー・フッターの構造などを変更できます。

  • 子テーマ内にコピーして編集する: 親テーマ（Twenty Twelve）から変更したいテンプレートファイル（例: header.php, footer.php, content.phpなど）を子テーマのフォルダにコピーし、そのファイルを編集します。これにより、親テーマのファイルを直接変更することなくカスタマイズが可能です。

具体的なカスタマイズ例

  • 色の変更: CSSでbodyやaタグ、各種要素のcolorやbackground-colorプロパティを変更します。
  • フォントの変更: CSSでfont-family、font-size、line-heightプロパティを変更します。
  • レイアウトの変更: CSSのdisplay, float, margin, paddingプロパティなどを調整します。また、テンプレートファイルを編集して要素の並び順などを変更することも可能です。
  • ヘッダー/フッターの変更: header.phpやfooter.phpを子テーマにコピーし、HTML構造を直接編集します。
  • 記事表示の変更: content.phpやsingle.php、archive.phpなどを子テーマにコピーし、記事のタイトル、投稿日、著者情報などの表示形式を変更します。

Twenty Twelveはシンプルだからこそ、CSSやテンプレートファイルの知識があれば柔軟なカスタマイズが可能です。まずはカスタマイザーで試してみて、より深くカスタマイズしたい場合は子テーマの作成に挑戦してみてください。

Twenty Twelveのカスタマイザー

WordPressのTwenty Twelveテーマのカスタマイザーは、他の多くのWordPressテーマと同様に、WordPressの管理画面からアクセスできます。

一般的に、以下の手順でカスタマイザーにアクセスできます。

  1. WordPress管理画面にログインする: あなたのWordPressサイトのURLの末尾に /wp-admin を付けてアクセスし、ユーザー名とパスワードでログインします。
  2. 「外観」メニューから「カスタマイズ」を選択する: 管理画面の左側のメニューバーに「外観」という項目があります。その下にある「カスタマイズ」をクリックします。

これでWordPressのカスタマイザー画面が開きます。Twenty Twelveテーマの場合、カスタマイザーで変更できる項目は以下のようなものが一般的です。

  • サイト基本情報: サイトのタイトルやキャッチフレーズを設定できます。
  • 色: 背景色などを変更できる場合があります。Twenty Twelveの場合、背景色の設定が可能です。
  • ヘッダー画像: ヘッダーに画像を設定できます。
  • 背景画像: サイト全体の背景に画像を設定できます。
  • メニュー: ナビゲーションメニューを作成・管理できます。
  • ウィジェット: サイドバーやフッターなどのウィジェットエリアに、様々な機能を追加できます。
  • ホームページ設定: トップページを最新の投稿にするか、固定ページにするかを設定できます。
  • 追加CSS: テーマのCSSを直接編集して、さらに詳細なデザイン調整を行うことができます。

Twenty Twelveテーマのカスタマイズに関する注意点:

  • 子テーマの使用を推奨: Twenty Twelveは公式テーマであり、WordPressのアップデートによってファイルが上書きされる可能性があります。カスタマイザーでできないような、より深いカスタマイズ（ファイルの編集など）を行う場合は、**必ず子テーマを作成して使用することをお勧めします。**子テーマを使用すれば、親テーマのアップデートの影響を受けずにカスタマイズを維持できます。
  • カスタマイザーでできることは限られている: Twenty Twelveはシンプルなテーマなので、他の高機能なテーマに比べてカスタマイザーで変更できる項目は少ないかもしれません。より複雑なデザイン変更を行いたい場合は、子テーマを作成してCSSやPHPファイルを直接編集する必要があるでしょう。

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

  1. 子テーマの利用を最優先する
    • 理由: Twenty Twelve本体のファイルを直接編集すると、テーマのアップデートがあった際にカスタマイズ内容が上書きされ、消えてしまいます。子テーマを利用することで、親テーマの機能を継承しつつ、独自のカスタマイズを安全に追加・管理できます。
    • 方法:
      1. wp-content/themes ディレクトリ内に新しいフォルダ（例: twentytwelve-child）を作成します。
      2. そのフォルダ内に style.css ファイルを作成し、以下の内容を記述します。
/*
Theme Name: Twenty Twelve Child
Template: twentytwelve
*/
@import url("../twentytwelve/style.css");Code language: CSS (css)
    1. 必要に応じて functions.php ファイルも作成し、カスタマイズしたい関数などを記述します。
    2. WordPressの管理画面から「外観」→「テーマ」で子テーマを有効化します。

CSSの管理

  • 直接編集は避ける: style.css 以外のファイルを直接編集すると、複雑になったり、他のスタイルに影響を与えたりする可能性があります。
  • 子テーマの style.css を利用: カスタムCSSはすべて子テーマの style.css に記述するようにしましょう。既存のスタイルを上書きする場合は、詳細度（Specificity）に注意が必要です。必要であれば !important を使用することもできますが、乱用は避けるべきです。

テンプレートファイルの編集

  • 必要なファイルのみコピー: ヘッダー、フッター、サイドバーなどのテンプレートファイルを変更したい場合は、親テーマから必要なファイル（例: header.php, footer.php, sidebar.php, page.php, single.php など）を子テーマのディレクトリにコピーし、そこで編集します。
  • 構造の理解: Twenty Twelveのテンプレート構造は比較的シンプルですが、どのファイルがどの部分を担当しているかを理解してから編集に取り掛かることが重要です。

JavaScriptの追加

  • 適切な方法で読み込む: JavaScriptを追加したい場合は、直接HTMLに記述するのではなく、子テーマの functions.php を使用して適切にエンキュー（enqueue）することが推奨されます。これにより、WordPressの標準的な読み込みプロセスに従い、依存関係や競合の問題を避けることができます。
  • 例（functions.php内）:
<?php
function twentytwelve_child_scripts() {
    wp_enqueue_script( 'my-custom-script', get_stylesheet_directory_uri() . '/js/my-custom-script.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_child_scripts' );
?>Code language: HTML, XML (xml)

レスポンシブデザインの考慮

  • Twenty Twelveは元々レスポンシブ対応していますが、大幅なレイアウト変更を行う場合は、様々なデバイス（PC、タブレット、スマートフォン）で表示を確認し、適切に表示されるようにメディアクエリ（Media Queries）を使用してCSSを調整する必要があります。

パフォーマンスの最適化

  • カスタマイズによって不要なCSSやJavaScriptが追加されたり、画像の読み込みが遅くなったりする可能性があります。
  • ツールを利用: PageSpeed Insights や GTmetrix などのツールを利用して、サイトのパフォーマンスを定期的にチェックし、最適化を図りましょう。

バックアップの習慣化

  • カスタマイズを行う前には、必ずサイト全体のバックアップを取るようにしましょう。予期せぬエラーや問題が発生した場合でも、以前の状態に戻すことができます。WordPressのバックアッププラグイン（UpdraftPlusなど）の利用が便利です。

テーマユニットテストデータを利用する

  • カスタマイズ中に様々なコンテンツタイプでの表示を確認するため、WordPress.orgが提供しているテーマユニットテストデータ（Theme Unit Test Data）をインポートしてテストを行うと効率的です。

コメントアウトや整理

  • 追加したCSSやPHPコードには、後から見て内容がわかるようにコメントアウトを記述しておきましょう。また、コードは整理し、不要なものは削除することで、メンテナンス性を高めることができます。

カスタマイズの口コミ・評判

このテーマは、シンプルで柔軟性が高く、初心者にも扱いやすいという特徴があります。カスタマイズの評価は、以下の観点から行うことができます。

1. シンプルさ

Twenty Twelve は、余計な装飾がなく、非常にシンプルです。そのため、デザインの自由度が高く、ゼロからオリジナルのサイトを作りやすいという利点があります。

2. レスポンシブデザイン

このテーマは、スマートフォンやタブレットなど、さまざまなデバイスで適切に表示される レスポンシブデザイン に対応しています。特別な設定をしなくても、自動的に画面サイズに合わせてレイアウトが調整されるため、モバイルフレンドリーなサイトを簡単に構築できます。

3. カスタマイザーの利用

Twenty Twelve は、WordPressの カスタマイザー 機能を最大限に活用できます。リアルタイムで変更を確認しながら、以下のような設定が可能です。

  • サイトのタイトルとキャッチフレーズの変更
  • ヘッダー画像の設定
  • 背景色の変更
  • ウィジェットの追加・削除

4. テーマの拡張性

このテーマは、子テーマ を作成することで、元のテーマを直接編集することなくカスタマイズできます。これにより、WordPressのバージョンアップ時でも、カスタマイズ内容が失われる心配がありません。

5. SEOへの配慮

Twenty Twelve は、SEO（検索エンジン最適化）に配慮した設計がなされています。セマンティックなHTML構造を採用しており、検索エンジンがコンテンツを理解しやすいようになっています。

まとめ

WordPressテーマ Twenty Twelve は、初心者から中級者まで幅広く利用できる、優れたカスタマイズ性を持つテーマです。シンプルさを活かして、オリジナリティのあるウェブサイトを構築したい方におすすめです。

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など）
カスタマイザーでの直感的な編集が可能		メディアサイト（ブログ）、多言語対応が必要な企業サイト、目的に合わせたテーマを選びたいサイト
有料WordPressテーマ

補足情報

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

関連投稿:

  1. Twenty Elevenのカスタマイズ – WordPressテーマ
  2. WordPressの基本操作（ダッシュボードや外観のカスタマイズ）
  3. WordPressの基本操作の概要（新規投稿からカスタマイズ）
  4. 有料WordPressテーマLIQUID PRESS（リキッドプレス）のカスタマイズ
  5. 有料WordPressテーマ「Emanon（エマノン）」を企業サイトにカスタマイズする
カテゴリー
カスタマイズ
カスタマイズ

前の記事

SiteOrigin Unwindのカスタマイズ – WordPressテーマ
2023年9月27日
SEO

次の記事

CustomifyのSEO – WordPressテーマ
2023年10月6日