Twenty TwentyはGutenbergに特化してデザインされたWordPressテーマ

Twenty Twentyとは

WordPressテーマ「Twenty Twenty」は、WordPress 5.3のデフォルトテーマとして2019年11月12日にリリースされました。

このテーマは、ブロックエディター(Gutenberg)の柔軟性を最大限に活用するように設計されています。特に、ビジネスや組織のウェブサイトで、サービスや製品を魅力的に見せるための動的なレイアウトを簡単に作成できる点が特徴です。

Twenty Twentyの主な特徴

  • ブロックエディターへの完全対応: ブロックエディターの全幅エディタースタイルに対応しており、エディターでの見た目が実際のサイトとほとんど変わらないため、コンテンツ作成が直感的に行えます。
  • シンプルなデザイン: 無駄を省いたミニマルなデザインで、コンテンツそのものを際立たせます。
  • カスタマイズ性:
    • サイトロゴ: ビジネスロゴやアバターとして表示できるサイトロゴ設定があります。
    • カラーオプション: 背景色やアクセントカラーを変更できます。選択した色に基づいて、サイト上のすべての要素の色が自動的に調整され、高いコントラストが保たれるよう設計されています。
    • メニューオプション: デスクトップ向けに、常に表示される伝統的な横並びのメニューと、メニューボタンに隠れる拡張可能なメニューの2種類を選べます。
  • カバーテンプレート: アイキャッチ画像上に投稿のタイトルを表示する「カバーテンプレート」と呼ばれるページテンプレートが含まれています。
  • 多言語対応: WordPressコミュニティからのフィードバックにより、多くの言語で最適なスタイルが含まれています。

Twenty Twentyは、WordPressがブロックエディターを主要な編集ツールとして推進していく中で、その能力を示すための基盤となるテーマとして開発されました。現在もメンテナンスされており、最新のWordPress環境でも問題なく利用できます。

Twenty Twentyの使い方

「Twenty Twenty」は、WordPress 5.3以降に標準搭載されている公式テーマです。ブロックエディタ(Gutenberg)に最適化されており、シンプルながらもカスタマイズ性の高いデザインが特徴です。

Twenty Twentyの基本的な使い方とカスタマイズ方法について説明します。

Twenty Twentyの有効化

  1. WordPress管理画面にログインします。
  2. 「外観」>「テーマ」に移動します。
  3. 「Twenty Twenty」テーマを見つけ、「有効化」をクリックします。

Twenty Twentyの主な特徴と使い方

Twenty Twentyは、以下の主要な要素で構成されています。

  1. サイトタイトルとキャッチフレーズ:
    • 「カスタマイズ」>「サイト基本情報」で設定できます。サイトの顔となる部分なので、分かりやすく設定しましょう。
  2. ヘッダー:
    • Twenty Twentyのヘッダーは、サイトタイトル、キャッチフレーズ、そして必要に応じてロゴ画像を表示できます。「カスタマイズ」>「ヘッダー」から設定可能です。
  3. ナビゲーションメニュー:
    • メインメニューは、ヘッダーの下に表示されます。「外観」>「メニュー」でメニューを作成し、「メニュー設定」の「ヘッダー」に割り当てることで表示されます。必要に応じてフッターメニューなども設定できます。
  4. コンテンツエリア:
    • 投稿や固定ページの内容が表示されるメインの部分です。Twenty Twentyはブロックエディタに最適化されているため、ブロックを効果的に活用することで、柔軟なレイアウトが可能です。
  5. サイドバー:
    • Twenty Twentyにはデフォルトでサイドバーがありません。ウィジェットを表示したい場合は、フッターに表示される「フッター1」と「フッター2」のウィジェットエリアを使用します。「外観」>「ウィジェット」から設定できます。
  6. フッター:
    • 著作権情報や、先述のウィジェットエリアが表示されます。「カスタマイズ」>「フッター」から調整できます。

Twenty Twentyのカスタマイズ

Twenty Twentyは、WordPressのカスタマイザー(「外観」>「カスタマイズ」)から、多くの設定を変更できます。

  1. サイト基本情報:
    • サイトのタイトル、キャッチフレーズ、サイトアイコンの設定。
  2. 色:
    • 背景色、リンクの色、プライマリ色など、サイト全体の配色を変更できます。特にプライマリ色は、見出しやボタンの色に影響します。
  3. メディアヘッダー:
    • ヘッダー部分に画像や動画を表示できます。
  4. メニュー:
    • グローバルナビゲーション(ヘッダーメニュー)、フッターメニューなどの設定。
  5. ウィジェット:
    • フッターのウィジェットエリアに表示するコンテンツ(テキスト、最近の投稿、カテゴリなど)を設定。
  6. ホームページ設定:
    • トップページを「最新の投稿」にするか、固定ページにするかの設定。
  7. CSSを追加:
    • 独自のCSSコードを追加して、さらに細かくデザインを調整できます。

ブロックエディタ(Gutenberg)の活用

Twenty Twentyはブロックエディタに最適化されているため、ブロックを最大限に活用することが重要です。

  • グループブロック: 複数のブロックをまとめることで、レイアウトの調整がしやすくなります。
  • カラムブロック: 記事内で複数のカラムを作成し、情報を整理して表示できます。
  • メディアとテキストブロック: 画像とテキストを並べて表示するのに便利です。
  • カバーブロック: 全幅の背景画像の上にテキストを重ねて表示するなど、インパクトのあるセクションを作成できます。
  • 再利用ブロック: よく使うブロックの組み合わせを登録しておき、簡単に再利用できます。

その他のヒント

  • 子テーマの利用: Twenty Twentyを大きくカスタマイズしたい場合は、直接テーマファイルを編集するのではなく、子テーマを作成してカスタマイズすることをお勧めします。これにより、テーマのアップデート時にカスタマイズ内容が失われるのを防げます。
  • プラグインの活用: Twenty Twentyはシンプルであるため、機能を追加したい場合は、WordPressプラグインを活用します。例えば、お問い合わせフォーム、SEO対策、画像最適化など、様々なプラグインがあります。
  • デモサイトの確認: Twenty Twentyの公式デモサイトや、他のTwenty Twentyを利用しているサイトを参考にすると、カスタマイズのヒントが得られます。

Twenty Twentyは、シンプルであるがゆえに、使い方次第で多様なサイトを構築できる柔軟性を持っています。ブロックエディタの機能を理解し、カスタマイザーを使いこなすことで、目的に合ったウェブサイトを作成できるでしょう。

Twenty Twentyの注意点

WordPress のデフォルトテーマである Twenty Twenty は、シンプルでミニマリストなデザインが特徴で、ブロックエディタの機能を最大限に活用できるように設計されています。しかし、利用にあたっていくつか注意点があります。

Twenty Twenty の主な注意点

  1. カスタマイズ性の低さ(初期状態):
    • Twenty Twenty は、WordPress のデフォルトテーマとして、基本的な機能に絞られています。そのため、テーマ単体でのカスタマイズ項目は非常に少ないです。
    • 思い通りのデザインやレイアウトを実現するためには、CSSを記述したり、WordPress のブロックエディタやブロックテーマに関する知識が必要になります。
    • WordPress のカスタマイズに慣れていない初心者の方には、少しハードルが高く感じられるかもしれません。
  2. 子テーマの利用が推奨される:
    • Twenty Twenty をカスタマイズする場合、直接テーマファイルを編集すると、テーマのアップデート時に変更内容が上書きされてしまいます。
    • そのため、カスタマイズを行う場合は必ず「子テーマ」を作成し、子テーマ側で変更を加えることが強く推奨されます。
  3. デフォルトテーマとしての役割:
    • Twenty Twenty は、WordPress のインストール時に最初から入っている「デフォルトテーマ」の一つです。
    • サイトで現在使用しているテーマに何らかの問題が発生した場合、WordPress は自動的にデフォルトテーマ(Twenty Twenty など)に切り替わることがあります。そのため、万が一に備えて Twenty Twenty は削除せずに残しておくことが推奨されます。
  4. 特定のページテンプレートの挙動:
    • template-canvas.php のような特定のページテンプレートを使用する場合、サイトヘッダーやモーダルメニューが取り入れられないなど、通常の挙動と異なる場合があります。
  5. パフォーマンスに関する懸念(Font Awesome):
    • 一部の情報源では、Twenty Twenty に含まれる Font Awesome がパフォーマンスに影響を与える可能性があると指摘されています。サイトの表示速度を重視する場合は、この点に留意し、最適化を検討する必要があるかもしれません。

まとめ

Twenty Twenty は、WordPress の進化に合わせてブロックエディタの機能を最大限に引き出すように設計された、シンプルで強力なテーマです。しかし、そのシンプルさゆえに、自由なカスタマイズにはある程度の知識や技術が必要になります。

  • WordPress やブロックエディタの学習を深めたい方や、ノーコードでのサイト構築に関心がある方にとっては、良い学習材料となるでしょう。
  • デザインの自由度を重視する方や、手軽にデザインを変更したい方は、Twenty Twenty をベースにするのではなく、より多くのカスタマイズオプションを持つ他のテーマを検討する方が良いかもしれません。

ご自身のWordPressの習熟度や、サイトの目的に合わせて、Twenty Twenty の利用を検討してみてください。

Information

ココナラにはSEO(検索エンジン最適化)関連のサービスが多数あります。具体的なサービス内容は多岐にわたり、以下のようなものが見られます。

SEOコンサルティング・アドバイス: サイトの現状を分析し、改善点を提案してくれるサービス。キーワード選定や内部対策、コンテンツ改善など、多岐にわたるアドバイスが受けられます。

SEO内部対策代行: ウェブサイトの内部構造を、検索エンジンが理解しやすいように最適化する作業を代行してくれるサービス。HTMLの修正やサイト構造の改善などが含まれます。

コンテンツ(記事)作成: SEOに強いキーワードを選定し、上位表示を狙えるような高品質な記事を作成してくれるサービス。

被リンク構築: 外部サイトからの被リンクを増やし、ドメインパワーを向上させるためのサービス。

ローカルSEO(MEO)対策: 店舗などの実店舗ビジネスにおいて、Googleマップでの上位表示を狙うためのサービス。

サイト診断・分析: サイトのSEO状況を分析し、レポートとしてまとめてくれるサービス。

ココナラの検索窓で「SEO」「SEO対策」などのキーワードで検索すると、さまざまなサービスが出品されています。サービスの料金や実績、評価などを比較して、自分のニーズに合ったサービスを見つけることができます。

Information

WordPressテーマ「THE THOR(ザ・トール)」は、AI検索時代においてもSEOに強いテーマとして評価されています。

その理由は、以下の点が挙げられます。

  • 究極のSEO最適化テーマ: THE THORは、HTML5+CSS3による最新のコーディングや、検索エンジンに優しい構造化マークアップに対応しており、検索エンジンから評価されやすい内部構造を徹底的に追求しています。
  • 高速表示技術: サイトの表示速度は、ユーザー体験だけでなく、検索エンジンの評価にも大きく影響します。THE THORは、AMP、PWA、画像遅延読み込み、CSS非同期読み込みなど、高速表示を実現する革新的な技術を多数搭載しており、国内最高水準の速さを誇ります。
  • SEOプラグインが不要: テーマ自体に十分なSEO対策が施されているため、All in One SEO PackなどのSEO対策用プラグインを別途導入する必要がありません。これにより、プラグイン同士の競合による不具合を防ぐことができます。
  • きめ細かなSEO設定: トップページやカテゴリーページ、個別記事ごとに、タイトルタグやメタディスクリプションなどを細かく設定できる機能が備わっています。

これらの機能は、従来の検索エンジンだけでなく、AI検索においても重要な要素となります。AI検索は、ユーザーの意図をより深く理解し、関連性の高い情報を提示しようとします。そのため、ページの内部構造が整理され、表示速度が速く、ユーザーにとって価値のある情報が明確に提示されているサイトは、AI検索でも評価されやすいと考えられます。結論として、THE THORは、AI検索時代においてもSEOに強いテーマであり、適切にコンテンツを作成し運用することで、検索上位表示を目指すことは十分に可能です。

ザ・トールは、内部構造の最適化(HTML5+CSS3)、高速表示技術:(AMP・PWA、Gzip圧縮・ブラウザキャッシュ、画像遅延読み込み・CSS非同期読)、SEO設定機能、SEO系プラグインが不要とSEOに必要な機能が実装されています。

Information

レンタルサーバーのロリポップは、SEOに有利なサイト運営をサポートする機能を備えています。

ロリポップには、SEOに間接的に役立つ以下の特徴があります。

  • 高速サーバー: 高速化技術により、ページの表示速度を改善します。
  • 無料独自SSL: サイトのSSL化を簡単に実現でき、セキュリティと信頼性を向上させます。
  • WordPress簡単インストール: 多くのウェブサイトで使われているWordPressを、初心者でも簡単に導入できます。WordPressは、SEOに有利なテーマやプラグインが豊富にあります。

ロリポップは、SEOに重要な要素である表示速度、安定性、セキュリティをサポートする機能を備えているため、SEO対策の一環として有効に活用できます。