Twenty Seventeenをカスタマイザーやcssでカスタマイズ – WordPressテーマ

Twenty Seventeenのカスタマイズ方法

Twenty Seventeen は、ブログやビジネスサイト向けに設計された非常に柔軟なテーマです。標準のカスタマイザー機能を使うだけでも、かなり多くの変更が可能です。

基本的なカスタマイズは、WordPress のカスタマイザーを通じて行います。

1. WordPress 管理画面にログインします。
2. 左側のメニューから「外観」にカーソルを合わせ、「カスタマイズ」をクリックします。

カスタマイザーが開くと、左側に設定項目、右側にサイトのプレビューが表示されます。変更を加えるとリアルタイムでプレビューに反映されるので、確認しながら進められます。

よくカスタマイズされる項目

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の管理画面からアクセスできるテーマの様々な設定を変更するためのツールです。主な機能とできることを以下にまとめました。

アクセス方法:

1. WordPressの管理画面にログインします。
2. 左側のメニューから「外観」->「カスタマイズ」をクリックします。

Twenty Seventeenカスタマイザーの主な項目とできること:

Twenty Seventeenのカスタマイザーには、以下の主要なセクションがあります（WordPressのバージョンや導入しているプラグインによっては、項目が若干異なる場合があります）。

• サイト基本情報:
  • サイトのタイトル: ウェブサイトのタイトルを設定します。
  • キャッチフレーズ: ウェブサイトの簡単な説明（サブタイトル）を設定します。
  • サイトアイコン: ブラウザのタブやブックマークなどに表示されるファビコンを設定します。
• 色:
  • 配色: テーマ全体の配色を「ライト」「ダーク」「カスタム」から選択できます。「カスタム」を選択すると、独自の背景色を設定できます。
• ヘッダーメディア:
  • ヘッダー画像: ウェブサイトのヘッダー部分に表示される画像をアップロード・設定できます。複数の画像をランダム表示させることも可能です。
  • ヘッダー動画: ヘッダー部分に動画を表示させることもできます（推奨サイズなどがあります）。
• メニュー:
  • ウェブサイトに表示するナビゲーションメニューの作成・編集・配置ができます。プライマリーメニュー（メインナビゲーション）やソーシャルリンクメニューなどを設定できます。
• ウィジェット:
  • フッターやサイドバー（サイドバーはTwenty Seventeenではデフォルトで非表示ですが、特定のテンプレートを使用すると表示されます）など、ウェブサイトの特定のエリアに表示するウィジェット（検索バー、最近の投稿、カテゴリなど）を追加・編集・削除できます。
• ホームページ設定:
  • 表示設定: フロントページ（トップページ）に「最新の投稿」を表示するか、固定ページを表示するかを選択できます。固定ページを表示する場合は、どのページをフロントページとし、どのページを投稿ページ（ブログ記事一覧）とするかを設定します。
• 追加CSS:
  • テーマのデフォルトのスタイルシートを直接編集することなく、カスタムCSSを追加してデザインを微調整できます。

Twenty Seventeenカスタマイザーの特徴:

• ライブプレビュー: 変更を加えると、リアルタイムでサイトのプレビューが更新されるため、視覚的に確認しながら設定できます。
• シンプルで使いやすい: Twenty Seventeenはシンプルなデザインのテーマなので、カスタマイザーも直感的に操作できるように設計されています。
• ブログ向け: ブログや小規模なビジネスサイトに適した設定が中心です。

カスタマイザーでできないこと（注意点）：

• テーマのテンプレートファイル（header.php、footer.phpなど）の直接編集はできません。より高度なカスタマイズには、子テーマの作成や追加CSSでの対応が必要です。
• レイアウトの劇的な変更（例：サイドバーの位置を大きく変えるなど）は、カスタマイザーだけでは難しい場合があります。

Twenty Seventeenのカスタマイザーを最大限に活用することで、コーディングの知識がなくても、あなたのウェブサイトの見た目や基本的な機能を簡単に調整することができます。

カスタマイズの注意点

Twenty Seventeenはシンプルで使いやすいテーマですが、カスタマイズする際にはいくつかのポイントを押さえておくことで、予期せぬ問題を避け、効率的に作業を進めることができます。

以下に主な注意点をまとめました。

1. 子テーマの利用を最優先する
   • 重要度：最高
   • Twenty Seventeen を直接編集してしまうと、テーマがアップデートされた際に、加えた変更がすべて上書きされて消えてしまいます。これを避けるためにも、必ず子テーマを作成し、子テーマ側でカスタマイズを行うようにしてください。
   • 子テーマには、親テーマのスタイルシートやテンプレートファイルを必要に応じて上書きする形で記述していきます。
   • 子テーマの作成方法については、WordPress Codex や専門サイトで多数解説されていますので、参考にしてください。
2. CSSカスタマイズは「追加CSS」を有効活用する
   • 手軽さ・安全性：高
   • WordPressのカスタマイザーには「追加CSS」という項目があります。簡単なCSSの変更であれば、ここに入力するだけで手軽に反映できます。
   • 子テーマの style.css に記述するよりも手軽で、サイト管理画面から直接編集できるため、ちょっとした調整に向いています。ただし、大規模な変更には子テーマが適しています。
3. PHPファイルの編集は慎重に
   • リスク：高
   • functions.php やテンプレートファイル (header.php, footer.php, page.php など) を編集する際は、必ずバックアップを取ってから行ってください。
   • PHPの記述ミスは、サイト全体の表示が崩れる、真っ白になる（Fatal Error）などの重大な問題を引き起こす可能性があります。
   • エラーが発生した場合は、すぐにバックアップファイルに戻せるように準備しておきましょう。FTPソフトなどでファイルをダウンロードしておくのが確実です。
4. メディアクエリによるレスポンシブデザインの考慮
   • Twenty Seventeen はデフォルトでレスポンシブデザインに対応していますが、カスタマイズによってレイアウトを大きく変更する場合、スマートフォンやタブレットなど、様々なデバイスでの表示崩れが発生しないか、必ず確認してください。
   • CSSを記述する際は、@media screen and (max-width: XXXpx) のようにメディアクエリを用いて、デバイスの画面幅に応じたスタイルを定義することが重要です。
5. パフォーマンスへの影響を考慮する
   • 過度なカスタマイズ（特にJavaScriptの追加や大量の画像、フォントの追加など）は、サイトの表示速度を低下させる可能性があります。
   • サイト速度が低下すると、ユーザー体験が悪化するだけでなく、SEOにも悪影響を及ぼす可能性があります。
   • 不要なスクリプトは読み込まない、画像を最適化する、キャッシュプラグインを利用するなどの対策も合わせて検討しましょう。
6. SEOへの影響を考慮する
   • HTML構造を大きく変更するカスタマイズを行う場合、SEOに影響を与える可能性があります。
   • 特に、見出しタグ (<h1>, <h2> など) や、コンテンツの表示順序を変更する際には注意が必要です。
   • セマンティックなHTML構造を維持し、検索エンジンがコンテンツを正しく理解できるように心がけましょう。
7. アクセシビリティを意識する
   • 色覚多様性を持つ方や視覚障がい者の方など、様々なユーザーが利用できるよう、アクセシビリティにも配慮しましょう。
   • 特に、背景色と文字色のコントラスト比、リンクの視認性、キーボード操作でのナビゲーションなどを確認すると良いでしょう。
8. ブラウザ互換性の確認
   • カスタマイズした内容が、主要なブラウザ（Google Chrome, Firefox, Safari, Microsoft Edgeなど）で正しく表示されるか、テストを行いましょう。
   • ブラウザによってCSSの解釈が異なる場合があるため、表示が崩れる可能性があります。
9. コメントアウトと整理されたコード
   • CSSやPHPを記述する際には、後から自分や他の人が見て分かりやすいように、適宜コメントアウトを入れて説明を加えましょう。
   • コードのインデントを揃えるなど、整理された記述を心がけることで、メンテナンス性が向上します。
10. 問題発生時の切り分けと解決方法
    • カスタマイズ後に問題が発生した場合、直前に行った変更が原因である可能性が高いです。
    • FTPソフトやファイルマネージャーを使って、問題が発生する前の状態に戻せるように準備しておきましょう。
    • WordPressのデバッグモードを有効にすることで、エラーメッセージを確認できる場合があります。

Twenty Seventeen はシンプルなだけに、基本的なカスタマイズは比較的容易ですが、上記の点に注意しながら作業を進めることで、安全かつ効果的にサイトを構築できるはずです。特に子テーマの利用は、カスタマイズの基本中の基本ですので、必ず実践してください。

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

カスタマイズに利用したいプラグイン

WordPressの標準テーマであるTwenty Seventeenは、「外観」 → 「カスタマイズ」から、サイトの基本情報、色、ヘッダーメディア、メニュー、ウィジェット、追加CSSなど、多くの項目をプラグインなしでカスタマイズすることができます。

しかし、さらに高度な機能を追加したり、Twenty Seventeen特有のカスタマイズを簡単に行うためのプラグインも存在します。

Twenty Seventeenのカスタマイズを目的としたプラグインには、以下のようなものがあります。

1. Twenty Seventeen専用のカスタマイズオプションを追加するプラグイン:
   • Options for Twenty Seventeen や Customize Twenty Seventeen のようなプラグインは、Google Fontsの追加、新しいテンプレートの使用、テーマの様々な側面を変更するための強力なカスタムオプションを「カスタマイザー」に追加することがあります。
2. 特定のレイアウト要素を追加・変更するプラグイン:
   • Page Sidebar for Twenty Seventeen のように、デフォルトではサイドバーがないページにサイドバーを追加する機能を提供するもの。
   • QuadMenu – Twenty Seventeen Mega Menu のように、メガメニュー機能を追加するもの。
3. フッターのクレジット表示を変更するプラグイン:
   • 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の公式テーマや無料テーマには、いくつかのデメリットがあります。主な点をまとめると以下のようになります。

無料テーマ（公式ディレクトリ含む）の主なデメリット

1. 機能性やカスタマイズ性の制限
   • 有料テーマに比べて、提供される機能やデザインオプションが限られていることが多く、理想とするウェブサイトを構築するために追加の作業やコーディング知識が必要になる場合があります。
   • デザインのユニークさに欠ける：多くの人が利用するため、他のサイトとデザインが似通ってしまう可能性があります。
2. サポート体制の不足
   • 公式なサポートデスクがない：問題が発生した場合、テーマ開発者からの直接的なサポートは期待できません。公式フォーラムやコミュニティなどの情報に頼る必要があります。
3. アップデートの頻度と保証
   • アップデートが不定期または停止するリスク：開発者のモチベーションやリソースに依存するため、テーマの更新が途絶えがちになることがあります。
   • セキュリティリスク：アップデートがされないテーマは、WordPress本体やプラグインの新しいバージョンとの互換性問題や、セキュリティの脆弱性が放置されるリスクがあります。
4. 全体の完成度や細かい設定の自由度
   • デザインの細かい部分（例：コメント欄、SNSボタンのオン・オフなど）を自由に設定できないなど、痒いところに手が届かないことがあります。
5. 著作権表示や広告
   • テーマによっては、フッターなどに開発者や提供サービスの著作権表示（クレジット）が消せない、または削除が有料となっている場合があります。

公式テーマ（無料で提供されているもの）に関する追加の留意点

公式テーマはWordPressの基準を満たしており、一定の品質やセキュリティは保たれていますが、無料テーマ全般のデメリットに加え、以下の点も考慮されることがあります。

• デザインがシンプルで汎用性が高い：多くの公式テーマは、ユーザーが自由にカスタマイズできることを前提に、あえてシンプルな設計になっています。そのため、そのままではデザイン面で物足りなさを感じる場合があります。
• 海外製が多く日本語情報が少ない：公式ディレクトリには海外製のテーマも多く、日本語に対応していない、または利用情報が少ない場合があります。

まとめ

特に企業サイトや収益化を目指すサイトなど、高い機能性、デザイン性、セキュリティ、手厚いサポートが必要な場合は、有料テーマの検討も視野に入れることが推奨されます。

一方、個人的なブログや小規模なサイトであれば、公式テーマや信頼できる無料テーマでも十分に運用可能です。ただし、その場合、カスタマイズやトラブル解決に必要な知識は自分で調達する必要があります。

WordPressの公式テーマ（無料）と有料テーマを比較すると、主に費用、機能・カスタマイズ性、サポート、デザインなどの点で違いがあります。

以下に主な比較ポイントをまとめます。

あなたの状況	推奨されるテーマ
予算をかけたくない、個人ブログ、シンプルなサイトで十分、自分でカスタマイズできる知識がある	公式テーマ（無料）
ビジネスサイトや本格的なサイトを構築したい、デザインの独自性を出したい、豊富な機能やカスタマイズ性が欲しい、初心者でサポートが必要、時間と労力を節約したい	有料テーマ

最終的には、あなたのサイトの目的、予算、求める機能、そしてウェブサイト構築のスキルレベルに応じて、最適なテーマを選択することが重要です。有料テーマを選ぶ場合は、評判やサポート体制、アップデートの頻度をしっかり確認することをお勧めします。

おすすめ有料テーマ

テーマ名	主な特徴・強み	適したサイト
ザ・トール (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などがあります。