Twenty Seventeenをカスタマイザーやcssでカスタマイズ – WordPressテーマ
Twenty Seventeenのカスタマイズ方法
Twenty Seventeen は、ブログやビジネスサイト向けに設計された非常に柔軟なテーマです。標準のカスタマイザー機能を使うだけでも、かなり多くの変更が可能です。
基本的なカスタマイズは、WordPress のカスタマイザーを通じて行います。
- WordPress 管理画面にログインします。
- 左側のメニューから「外観」にカーソルを合わせ、「カスタマイズ」をクリックします。
カスタマイザーが開くと、左側に設定項目、右側にサイトのプレビューが表示されます。変更を加えるとリアルタイムでプレビューに反映されるので、確認しながら進められます。
よくカスタマイズされる項目
Twenty Seventeen テーマで特に変更されることが多い項目をいくつかご紹介します。
- サイト基本情報:
- サイトのタイトルやキャッチフレーズを変更できます。これらはブラウザのタブや検索エンジンの結果に表示される重要な情報です。
- サイトアイコン（ファビコン）もここで設定できます。
- 色:
- 背景色やリンクの色などを変更できます。テーマの全体的な印象を大きく左右します。
- ヘッダーメディア:
- サイト上部に表示される大きな画像や動画を設定できます。インパクトのある画像を設定することで、訪問者の目を引くことができます。
- Twenty Seventeen の特徴的な機能の一つです。
- メニュー:
- グローバルナビゲーションなど、サイト内のメニューを作成・編集できます。
- ヘッダー、フッター、ソーシャルリンクなど、設置できる場所がいくつかあります。
- ウィジェット:
- サイドバーやフッターなど、決められたエリアに様々なコンテンツ（カレンダー、最近の投稿、カテゴリなど）を追加できます。
- ホームページ設定:
- サイトのトップページを「最新の投稿」にするか、「固定ページ」にするかを選択できます。
- ビジネスサイトなどでは、特定の固定ページをトップに表示することが多いです。
- CSS 追加:
- より詳細なデザイン変更を行いたい場合は、追加 CSS の項目でカスタム CSS コードを記述できます。
- 例えば、特定の文字の色を変えたり、要素の間隔を調整したりするのに使います。CSS の知識が必要になります。
より高度なカスタマイズ
カスタマイザーで物足りない場合は、さらに踏み込んだカスタマイズも可能です。
- 子テーマの作成:
- テーマのファイルを直接編集すると、テーマのアップデート時に変更が上書きされてしまいます。これを避けるために子テーマを作成し、子テーマ内でカスタマイズするのがベストプラクティスです。
- 子テーマを作成することで、元の Twenty Seventeen テーマの機能を維持しつつ、独自のカスタマイズを加えることができます。
- プラグインの利用:
- 「Contact Form 7」で問い合わせフォームを追加したり、「All-in-One WP Migration」でサイトのバックアップを取ったりと、WordPress の機能を拡張するためのプラグインは豊富にあります。
- 特定の機能を追加したい場合は、まずプラグインで対応できないか検討すると良いでしょう。
利用数
WordPressテーマ「Twenty Seventeen」の有効インストール数は、40万以上です。
これは、WordPressの公式テーマディレクトリに記載されている数値であり、現在このテーマを実際に使用しているサイトの数を示しています。
また、テーマのシェア率に関する情報では、過去に3.68%というデータもありました。
利用料
WordPressのテーマ「Twenty Seventeen」は、無料で利用できます。
このテーマは、WordPressが毎年リリースしているデフォルトテーマの一つであり、WordPressの公式サイト（WordPress.org）から無料でダウンロードして利用することが可能です。
Twenty Seventeenのカスタマイザー
Twenty Seventeenのカスタマイザーは、WordPressの管理画面からアクセスできるテーマの様々な設定を変更するためのツールです。主な機能とできることを以下にまとめました。
アクセス方法:
- WordPressの管理画面にログインします。
- 左側のメニューから「外観」->「カスタマイズ」をクリックします。
Twenty Seventeenカスタマイザーの主な項目とできること:
Twenty Seventeenのカスタマイザーには、以下の主要なセクションがあります（WordPressのバージョンや導入しているプラグインによっては、項目が若干異なる場合があります）。
- サイト基本情報:
- サイトのタイトル: ウェブサイトのタイトルを設定します。
- キャッチフレーズ: ウェブサイトの簡単な説明（サブタイトル）を設定します。
- サイトアイコン: ブラウザのタブやブックマークなどに表示されるファビコンを設定します。
- 色:
- 配色: テーマ全体の配色を「ライト」「ダーク」「カスタム」から選択できます。「カスタム」を選択すると、独自の背景色を設定できます。
- ヘッダーメディア:
- ヘッダー画像: ウェブサイトのヘッダー部分に表示される画像をアップロード・設定できます。複数の画像をランダム表示させることも可能です。
- ヘッダー動画: ヘッダー部分に動画を表示させることもできます（推奨サイズなどがあります）。
- メニュー:
- ウェブサイトに表示するナビゲーションメニューの作成・編集・配置ができます。プライマリーメニュー（メインナビゲーション）やソーシャルリンクメニューなどを設定できます。
- ウィジェット:
- フッターやサイドバー（サイドバーはTwenty Seventeenではデフォルトで非表示ですが、特定のテンプレートを使用すると表示されます）など、ウェブサイトの特定のエリアに表示するウィジェット（検索バー、最近の投稿、カテゴリなど）を追加・編集・削除できます。
- ホームページ設定:
- 表示設定: フロントページ（トップページ）に「最新の投稿」を表示するか、固定ページを表示するかを選択できます。固定ページを表示する場合は、どのページをフロントページとし、どのページを投稿ページ（ブログ記事一覧）とするかを設定します。
- 追加CSS:
- テーマのデフォルトのスタイルシートを直接編集することなく、カスタムCSSを追加してデザインを微調整できます。
Twenty Seventeenカスタマイザーの特徴:
- ライブプレビュー: 変更を加えると、リアルタイムでサイトのプレビューが更新されるため、視覚的に確認しながら設定できます。
- シンプルで使いやすい: Twenty Seventeenはシンプルなデザインのテーマなので、カスタマイザーも直感的に操作できるように設計されています。
- ブログ向け: ブログや小規模なビジネスサイトに適した設定が中心です。
カスタマイザーでできないこと（注意点）：
- テーマのテンプレートファイル（
header.php、footer.phpなど）の直接編集はできません。より高度なカスタマイズには、子テーマの作成や追加CSSでの対応が必要です。 - レイアウトの劇的な変更（例：サイドバーの位置を大きく変えるなど）は、カスタマイザーだけでは難しい場合があります。
Twenty Seventeenのカスタマイザーを最大限に活用することで、コーディングの知識がなくても、あなたのウェブサイトの見た目や基本的な機能を簡単に調整することができます。
カスタマイズの注意点
Twenty Seventeenはシンプルで使いやすいテーマですが、カスタマイズする際にはいくつかのポイントを押さえておくことで、予期せぬ問題を避け、効率的に作業を進めることができます。
以下に主な注意点をまとめました。
- 子テーマの利用を最優先する
- 重要度：最高
- Twenty Seventeen を直接編集してしまうと、テーマがアップデートされた際に、加えた変更がすべて上書きされて消えてしまいます。これを避けるためにも、必ず子テーマを作成し、子テーマ側でカスタマイズを行うようにしてください。
- 子テーマには、親テーマのスタイルシートやテンプレートファイルを必要に応じて上書きする形で記述していきます。
- 子テーマの作成方法については、WordPress Codex や専門サイトで多数解説されていますので、参考にしてください。
- CSSカスタマイズは「追加CSS」を有効活用する
- 手軽さ・安全性：高
- WordPressのカスタマイザーには「追加CSS」という項目があります。簡単なCSSの変更であれば、ここに入力するだけで手軽に反映できます。
- 子テーマの
style.cssに記述するよりも手軽で、サイト管理画面から直接編集できるため、ちょっとした調整に向いています。ただし、大規模な変更には子テーマが適しています。
- PHPファイルの編集は慎重に
- リスク：高
functions.phpやテンプレートファイル (header.php,footer.php,page.phpなど) を編集する際は、必ずバックアップを取ってから行ってください。- PHPの記述ミスは、サイト全体の表示が崩れる、真っ白になる（Fatal Error）などの重大な問題を引き起こす可能性があります。
- エラーが発生した場合は、すぐにバックアップファイルに戻せるように準備しておきましょう。FTPソフトなどでファイルをダウンロードしておくのが確実です。
- メディアクエリによるレスポンシブデザインの考慮
- Twenty Seventeen はデフォルトでレスポンシブデザインに対応していますが、カスタマイズによってレイアウトを大きく変更する場合、スマートフォンやタブレットなど、様々なデバイスでの表示崩れが発生しないか、必ず確認してください。
- CSSを記述する際は、
@media screen and (max-width: XXXpx)のようにメディアクエリを用いて、デバイスの画面幅に応じたスタイルを定義することが重要です。
- パフォーマンスへの影響を考慮する
- 過度なカスタマイズ（特にJavaScriptの追加や大量の画像、フォントの追加など）は、サイトの表示速度を低下させる可能性があります。
- サイト速度が低下すると、ユーザー体験が悪化するだけでなく、SEOにも悪影響を及ぼす可能性があります。
- 不要なスクリプトは読み込まない、画像を最適化する、キャッシュプラグインを利用するなどの対策も合わせて検討しましょう。
- SEOへの影響を考慮する
- HTML構造を大きく変更するカスタマイズを行う場合、SEOに影響を与える可能性があります。
- 特に、見出しタグ (
<h1>,<h2>など) や、コンテンツの表示順序を変更する際には注意が必要です。 - セマンティックなHTML構造を維持し、検索エンジンがコンテンツを正しく理解できるように心がけましょう。
- アクセシビリティを意識する
- 色覚多様性を持つ方や視覚障がい者の方など、様々なユーザーが利用できるよう、アクセシビリティにも配慮しましょう。
- 特に、背景色と文字色のコントラスト比、リンクの視認性、キーボード操作でのナビゲーションなどを確認すると良いでしょう。
- ブラウザ互換性の確認
- カスタマイズした内容が、主要なブラウザ（Google Chrome, Firefox, Safari, Microsoft Edgeなど）で正しく表示されるか、テストを行いましょう。
- ブラウザによってCSSの解釈が異なる場合があるため、表示が崩れる可能性があります。
- コメントアウトと整理されたコード
- CSSやPHPを記述する際には、後から自分や他の人が見て分かりやすいように、適宜コメントアウトを入れて説明を加えましょう。
- コードのインデントを揃えるなど、整理された記述を心がけることで、メンテナンス性が向上します。
- 問題発生時の切り分けと解決方法
- カスタマイズ後に問題が発生した場合、直前に行った変更が原因である可能性が高いです。
- FTPソフトやファイルマネージャーを使って、問題が発生する前の状態に戻せるように準備しておきましょう。
- WordPressのデバッグモードを有効にすることで、エラーメッセージを確認できる場合があります。
Twenty Seventeen はシンプルなだけに、基本的なカスタマイズは比較的容易ですが、上記の点に注意しながら作業を進めることで、安全かつ効果的にサイトを構築できるはずです。特に子テーマの利用は、カスタマイズの基本中の基本ですので、必ず実践してください。
たくさんのカスタマイズ機能があるので、まずは「デザイン着せ替え機能」でベースを作り、少しずつ自分好みのサイトに仕上げていくと良いでしょう。
カスタマイズに利用したいプラグイン
WordPressの標準テーマであるTwenty Seventeenは、「外観」 → 「カスタマイズ」から、サイトの基本情報、色、ヘッダーメディア、メニュー、ウィジェット、追加CSSなど、多くの項目をプラグインなしでカスタマイズすることができます。
しかし、さらに高度な機能を追加したり、Twenty Seventeen特有のカスタマイズを簡単に行うためのプラグインも存在します。
Twenty Seventeenのカスタマイズを目的としたプラグインには、以下のようなものがあります。
- Twenty Seventeen専用のカスタマイズオプションを追加するプラグイン:
- Options for Twenty Seventeen や Customize Twenty Seventeen のようなプラグインは、Google Fontsの追加、新しいテンプレートの使用、テーマの様々な側面を変更するための強力なカスタムオプションを「カスタマイザー」に追加することがあります。
- 特定のレイアウト要素を追加・変更するプラグイン:
- Page Sidebar for Twenty Seventeen のように、デフォルトではサイドバーがないページにサイドバーを追加する機能を提供するもの。
- QuadMenu – Twenty Seventeen Mega Menu のように、メガメニュー機能を追加するもの。
- フッターのクレジット表示を変更するプラグイン:
- Remove “Powered by WordPress” のように、テーマのフッターにある「Powered by WordPress」の表示を削除したり、独自のウィジェットエリアに置き換えたりするもの。
一般的なカスタマイズに必要なプラグイン (Twenty Seventeenに限らず)
Twenty Seventeenのカスタマイズというより、WordPressサイト全般の機能強化や使いやすさ向上のために一般的に使われるプラグインもあります。
- ページビルダープラグイン (例: Elementor, Beaver Builder): コーディングなしで複雑なレイアウトをドラッグ＆ドロップで作成したい場合。
- SEOプラグイン (例: Yoast SEO, All in One SEO): 検索エンジン最適化(SEO)を強化したい場合。
- お問い合わせフォームプラグイン (例: Contact Form 7, WPForms): お問い合わせフォームを設置したい場合。
- セキュリティプラグイン (例: SiteGuard WP Plugin, Wordfence): サイトのセキュリティを向上させたい場合。
最終的に、どのようなプラグインが必要かは、あなたがTwenty Seventeenをどのようにカスタマイズしたいかによります。
まずは「外観」→「カスタマイズ」でできることを確認し、実現できない機能や、もっと簡単に設定したい部分があれば、上記の例のようなプラグインを探すのが良いでしょう。
口コミ・評判
WordPressテーマ「Twenty Seventeen」は、2017年のデフォルトテーマとしてリリースされ、特にビジネスサイト向けに設計されたシンプルなデザインが特徴です。その評判は、シンプルさ、使いやすさ、安定性を高く評価する声と、カスタマイズ性の低さやデザインの単調さを指摘する声に分かれます。
良い評判
- シンプルで使いやすい: 余計な機能がなく、初心者でも直感的に操作できる点が評価されています。
- ビジネスサイト向けのデザイン: 複数のセクションに分かれたフロントページは、会社概要やサービス紹介などに適しており、プロフェッショナルな印象を与えます。
- ヘッダー画像/動画の活用: ヘッダーに動画や大きな画像を設定でき、視覚的にインパクトのあるサイトを作成できます。
- 安定性と安全性: WordPress公式のデフォルトテーマであるため、コード品質が高く、セキュリティ面でも安心して利用できます。
- リアルタイムでのカスタマイズ: カスタマイザー機能が充実しており、リアルタイムでデザインの変更を確認しながら作業できます。
悪い評判・課題
- カスタマイズ性の低さ: シンプルさがゆえに、細かなデザイン変更や独自のレイアウトを組むには、CSSなどの専門知識が必要になる場合があります。
- デザインの単調さ: 多くのサイトで利用されているため、他のサイトと似たような見た目になりがちです。
- 機能の制限: 多くの機能がプラグインに依存しており、テーマ単体ではできることが限られています。
- ヘッダーの高さ: ヘッダー画像が高すぎると感じるユーザーもいます。
総評
「Twenty Seventeen」は、シンプルで安定したウェブサイトを短期間で構築したいユーザーや、WordPressの基本を学びたい初心者にとって優れた選択肢です。特に、ビジネスサイトやポートフォリオサイトなど、情報をすっきりと見せたい場合に適しています。
一方、高度なデザインや独自の機能を求める場合は、物足りなさを感じるかもしれません。その場合は、CSSをカスタマイズしたり、より多機能なテーマを検討したりする必要があります。
現在でもWordPress公式テーマとして更新が続けられており、安心して利用できるテーマの一つです。WordPressのテーマ選びに迷った際は、まず「Twenty Seventeen」を試してみるのも良いでしょう。
WordPressをカスタマイズする方法
WordPressをカスタマイズする主な方法と、それぞれの概要、難易度をまとめた表を作成しました。WordPressのカスタマイズは、目的や技術的なスキルレベルに応じて様々なアプローチがあります。
| 方法 | 概要 | 主な目的 | 難易度 |
| テーマの変更 | デザインの基本構造、レイアウトを一新します。無料・有料のものが多数あります。 | デザイン、全体的な機能の変更 | 低〜中 |
| テーマカスタマイザー | WordPress標準機能で、テーマの色、フォント、ヘッダー画像などをコードを書かずに変更します。 | 見た目の微調整、ロゴやウィジェットの設定 | 低 |
| プラグインの導入 | 既存のWordPressにない機能（お問い合わせフォーム、SEO対策、セキュリティ強化など）を追加します。 | 機能の追加・拡張 | 低〜中 |
| CSSの追加 | テーマの見た目（色、サイズ、配置など）を細かく調整するために、カスタムCSSを追記します。 | デザインの微調整 | 中 |
| 子テーマの使用と編集 | 親テーマを直接編集せず、子テーマを作成し、その中のファイル（functions.php やテンプレートファイルなど）を編集して機能を変更・追加します。 | 機能やレイアウトの変更（テーマのアップデートに備える） | 中〜高 |
| テーマファイルの直接編集 | 親テーマのファイル（header.php, index.php など）を直接編集します。 | 機能やレイアウトの根本的な変更 | 高 |
| カスタムテーマ・プラグイン開発 | 既存のものを使わず、ゼロから独自のテーマやプラグインをPHPなどを使い開発します。 | 独自のデザインと機能の実装 | 最も高 |
カスタマイズのヒント
- 簡単な変更から始める場合は、「テーマカスタマイザー」や「プラグインの導入」が最も手軽です。
- デザインを少し変えたい場合は、「CSSの追加」が強力です。
- 本格的な機能追加やレイアウト変更を行う際は、テーマのアップデートで変更が消えないように「子テーマの使用と編集」を強くお勧めします。
WordPressテーマ カスタマイズのしやすさ 傾向比較
一般的にWeb上で言われている評判や特徴に基づいて、「コード知識が少ない人が、手軽にデザインを変更できる（＝カスタマイズしやすい）」という視点での傾向をまとめています。
| 順位 (※傾向) | テーマ名 | 主な特徴とカスタマイズの傾向 |
| 1 | THE THOR（ザ・トール） | 専用カスタマイザー機能が非常に豊富で、コードを書かずに細部までデザインを変更できる。多機能ゆえに操作が複雑に感じる場合もあるが、カスタマイズの幅は広い。 |
| 2 | STORK SE（ストークSE） | シンプルな構造で、初心者でも迷いにくい設計。ブログ運営に特化した機能が充実しており、特別な知識がなくても見栄えの良いデザインになりやすい。 |
| 3 | Emanon（エマノン） | マーケティング・ビジネスサイト向け。専用ブロックやウィジェットが用意されており、必要な要素を簡単に配置できる。多機能なPro版などがある。 |
| 4 | LIQUID PRESS（リキッドプレス） | 標準機能は抑えつつも、カスタマイズの拡張性が高い。知識があれば自由に変更しやすいが、THE THORほど専用設定項目は多くない傾向。 |
| 5 | RE:DIVER（リダイバー） | 比較的新しいテーマで、Webサイト制作向けのモダンなデザインが特徴。専用機能でのカスタマイズと、コードカスタマイズのバランスが取れている。 |
| 6 | GOLD MEDIA（ゴールドメディア） / GOLD BLOG（ゴールドブログ） | 開発元が同じで、多機能性を売りにしていることが多い。多機能ゆえに初心者には難しいと感じる部分もあるが、専用のオプションは用意されている。 |
