WordPressのレイアウト用語を解明する（クイックリファレンス）

WordPressでウェブサイトのデザインを始めた当初、私たちは「ヘッダー」「フッター」「ウィジェット」のような新しい用語に圧倒されました。簡単なウェブサイトを構築するためだけに、全く新しい言語を学んでいるような気分でした。

現在、16年以上にわたり何百万人ものWordPressユーザーを支援してきた私たちは、これらの用語をマスターしただけでなく、初心者にも最も簡単に説明する方法を発見しました。

これらのレイアウト用語の意味（およびそれらがどのように連携するか）についてまだ混乱している場合は、心配しないでください。あなたは一人ではなく、正しい場所にいます。

このわかりやすいガイドでは、WordPressのレイアウトに関するすべての重要な用語を、いつでも参照できるシンプルで理解しやすい説明に分解します。

WordPressのレイアウトに関する簡単な注意点

WordPressのレイアウトについて学ぶ際、サイトの構築方法によってさまざまな用語に遭遇します。これは、フルサイトエディターをサポートするテーマを使用しているか、クラシックテーマのカスタマイザーを使用しているか、WordPressのページビルダープラグインを使用しているかによって異なります。

例えば、フルサイトエディターでは、レイアウトオプションは外観 » エディターの下にあります。

クラシックテーマでは、外観 » カスタマイズの下にあるテーマカスタマイザーを使用します。

このようになります：

より多くのデザインの柔軟性を得るために、多くのユーザーは、ドラッグアンドドロップインターフェイスを提供するSeedProdのようなページビルダーを選択します。

これらは通常、WordPressの標準ツールにはない、コンテンツに追加できる追加および高度なブロックのような機能も備えています。

これらのツールは異なる用語やインターフェースを使用するかもしれませんが、基本的なレイアウトの概念は同じです。これらのコア用語を理解することで、どのツールを使用している場合でも、より良いWordPressデザイン、さらにはカスタムレイアウトを作成するのに役立ちます。

これらのWordPressのレイアウトに関する重要な用語を探り、さまざまなプラットフォームでどのように機能するかを見てみましょう。以下にカバーする内容を示します。

• WordPressにおける一般的なレイアウトの理解
• Header Area
• 背景画像/色
• コンテンツエリア
• サイドバーエリア（オプション）
• フッターエリア
• WordPressレイアウトのその他のコンポーネント
• ナビゲーションメニュー
• ウィジェット（クラシックテーマ）
• ブロック
• アイキャッチ画像
• カバー画像
• ブロックパターン
• ボタン
• カスタムCSS
• WordPressページビルダーのレイアウト用語
• WordPressページビルダーでのテンプレートの使用
• WordPressページビルダーのモジュールとブロック
• WordPressページビルダーでのセクションの使用方法
• よくある質問
• ボーナスリソース

WordPressにおける一般的なレイアウトの理解

ウェブサイトのレイアウトは、親しみやすい手紙のようなものだと考えてください。手紙には、上部に挨拶（ヘッダー）、中央に本文（コンテンツエリア）、下部に署名（フッター）があります。

ほとんどのウェブサイトはこの同じシンプルな構造に従っています。それは次のようなものです。

ユーザーが表示するページによって、レイアウトが異なる場合があります。

例えば、WordPressのブログページでは、コンテンツエリアの横にサイドバーが含まれる場合があります。

この基本的なレイアウトには、後ほどこの記事で説明する他の要素が含まれています。

まず、これらの主要なセクションのそれぞれについて詳しく説明しましょう。

ヘッダーエリア

WordPressのレイアウトにおけるヘッダーは、どのページの上部セクションです。通常、ここにウェブサイトのロゴ、タイトル、ナビゲーションメニュー、検索フォーム、その他ユーザーに最初に見てほしい重要な要素が含まれます。

WPBeginnerでのヘッダーセクションの外観は次のとおりです。

WordPressテーマのカスタムヘッダー

多くの人気のあるWordPressテーマには、WordPressレイアウトのヘッダーエリアをカスタマイズするための追加機能が含まれており、これはカスタムヘッダーと呼ばれることもあります。

ブロックテーマでのヘッダーのカスタマイズ

サイトエディターのサポートがあるブロックテーマを使用している場合は、サイトエディターでヘッダーエリアをクリックしてヘッダーを変更できます。

ここから、ヘッダーをお好みに合わせてカスタマイズできます。色を変更したり、ナビゲーションメニューを調整したり、検索、サイトロゴ、ボタンなどのブロックを追加したりできます。

クラシックテーマでのヘッダーのカスタマイズ

クラシックテーマの場合、通常これらの設定はテーマカスタマイザーで見つけることができます。「ヘッダー」、「ヘッダーオプション」、「サイトID」という名前のセクションを探してください。

WordPressテーマによっては、タグライン付きの全幅画像をヘッダーに追加したり、行動喚起ボタンを追加したりできる場合があります。

一部のWordPressテーマでは、ロゴの位置、ナビゲーションメニュー、ヘッダー画像を変更できる場合があります。

背景画像/色

一部のWordPressテーマでは、ウェブサイトの背景色を簡単に変更したり、背景画像を使用したりすることもできます。

ブロックテーマの背景を変更する

サイトエディター対応のテーマを使用している場合は、フルサイトエディターの「スタイル」に移動して背景色を変更できます。

スタイルパネルから「色」オプションを選択するだけです。

その後、「背景」をクリックしてウェブサイトの背景色を選択できます。

クラシックテーマでの背景の変更

クラシックテーマの場合、設定はテーマの機能によって異なります。

多くのクラシックテーマには、カスタム背景サポートが付属しています。これらの設定は、テーマカスタマイザーの「色」または「背景画像」オプションで見つけることができます。

多くの場合、これらのオプションは他のタブの中に隠されており、見つけるために探す必要があります。

詳細については、WordPressに背景画像を追加する方法またはWordPressの背景色を変更する方法に関するこれらの関連ガイドをご覧ください。

コンテンツエリア

コンテンツエリアは、サイトのレイアウトでヘッダーのすぐ後に配置されます。ページのメインコンテンツが表示される場所です。

カスタムホームページレイアウトの場合、コンテンツセクションには、行動喚起、それに続くサービスまたは製品、お客様の声、その他の重要な情報が含まれる場合があります。

オンラインストアでは、通常、この領域を使用して、進行中のセール、注目の商品、ベストセラー商品などを宣伝します。

一方、ブログや雑誌サイトのようなコンテンツが豊富なサイトでは、コンテンツ重視のレイアウトが使用されることがあります。

最新の記事を抜粋と画像で表示したり、ニュースレター登録フォームを表示してメールリストを構築したり、コンテンツ発見エリアを使用してユーザーがサイトでより多くの時間を過ごす方法を見つけられるようにしたりできます。

WPBeginnerのブログページのレイアウトは以下のようになっています。

メールリストへの登録を促す行動喚起とともに、最も人気のあるコンテンツを紹介します。（参照：メールリストを成長させるためにWPBeginnerで使用している他の方法）

デフォルトでは、WordPressは、ウェブサイトのフロントページとして最新のブログ投稿を表示するブログレイアウトを使用します。

ただし、その設定を変更して、個々のページをウェブサイトのフロントページとして使用することができます。

「設定 » 表示設定」ページに移動し、「ホームページの表示」オプションの下にある「固定ページ」を選択してください。

その後、ホームページとして使用するページとブログページとして使用するページを選択できます。

WordPressでブログ投稿用の独立したページを作成する方法については、ガイドをご覧ください。WordPressでブログ投稿用の独立したページを作成する方法。

設定を保存するには、「変更を保存」ボタンをクリックすることを忘れないでください。

これで、ホームページとして選択したページを編集し、カスタムホームページレイアウトを作成できます。

サイドバーエリア（オプション）

従来、サイドバーはコンテンツエリアの右側または左側に表示されます。

ただし、多くの最新ウェブサイトでは、特にビジネスページやランディングページでは、よりクリーンでサイドバーのないレイアウトを選択するようになっています。

クラシックテーマのサイドバー

クラシックWordPressテーマでは、サイドバーはウィジェット対応エリアであり、アーカイブ、ニュースレターサインアップフォーム、カテゴリ、人気コンテンツなどのウィジェットを追加できます。

これらのオプションは、外観 » ウィジェットページで見つけることができます。

ブロックテーマのサイドバー

ブロックテーマでは、サイドバーの動作が異なります。これらのテーマにはサイドバーエリアを含めることができますが、従来のウィジェットではなくブロックを使用します。

これらはサイトエディターを通じて直接カスタマイズでき、より柔軟なデザインオプションを提供します。

一部の最新のWordPressテーマにはサイドバー領域が全く含まれておらず、代わりにフル幅でコンテンツ中心のレイアウトに焦点を当てている場合があることに注意してください。

サイドバーの使用方法の詳細については、WordPressサイドバーのヒントに関する究極のガイドをご覧ください。

フッターエリア

フッター領域は、ページレイアウトの下部にあるコンテンツ領域の下に表示されます。

サイトエディターに対応したWordPressテーマを使用している場合、フッターエリアをクリックして編集できます。

ここでテンプレートパーツを操作します。テンプレートパーツは、ヘッダーやフッターのようなセクションの再利用可能なブロックと考えてください。

最も良い点は、一度編集すればサイトのどこでも更新されることです。

フッターを編集するには、外観 » エディターに移動してサイトエディターを起動します。そこから、左側のメニューで「パターン」を選択し、「テンプレートパーツ」セクションまでスクロールしてフッターを見つけてクリックします。

サイトエディターでフッターエリアを編集している間、さまざまな要素を表示するために任意のブロックを追加できます。

例えば、最も重要なページのリストを追加したり、ナビゲーションメニューを表示したり、お問い合わせフォームを追加したりできます。

クラシックテーマを使用している場合、フッターウィジェット領域が付属している可能性が高いです。

単純に 外観 » ウィジェットページに移動し、フッターウィジェットエリアを探してください。

サイトエディターと同様に、ブロックを使用してテーマのフッターウィジェットにさまざまな要素を追加できます。

サイトのフッターに何を入れるべきか迷っていますか？WordPressサイトのフッターに追加することのチェックリストをご覧ください。

WordPressレイアウトのその他のコンポーネント

次に、ヘッダー、コンテンツ、サイドバー、またはフッターセクションに追加できるWordPressレイアウトのコンポーネントのいくつかを見ていきます。これらは、機能的なレイアウトを作成するのに役立つビルディングブロックです。

ナビゲーションメニュー

ナビゲーションメニューまたはメニューは、リンクの水平または垂直リストです。ほとんどのウェブサイトには、ヘッダー領域に少なくとも1つのプライマリナビゲーションメニューがあります。

ただし、一部のウェブサイトではヘッダー領域に複数のナビゲーションメニューを使用しています。

WordPressでは、ナビゲーションメニューをウィジェットとして表示することもできます。これらのメニューはリンクの垂直リストとして表示され、サイドバーまたはフッターウィジェットエリアに配置できます。

WordPressでナビゲーションメニューを追加する方法（初心者ガイド）やWordPressナビゲーションメニューのスタイル設定方法に関するガイドで、詳細を確認してください。

ウィジェット（クラシックテーマ）

WordPressテーマがウィジェットに対応している場合、それらを使用してウェブサイトのレイアウトを再配置できます。さらに、ブロックウィジェットを使用すると、テーマはウィジェットエリアでもブロックを使用できるようになりました。

WordPressウェブサイトのウィジェット対応エリアまたはサイドバーにウィジェットを追加できます。一部のWordPressテーマには、ウィジェットまたはブロックを追加するための複数のウィジェット対応エリアが用意されています。

WordPressには、使用できるいくつかの組み込みウィジェットとブロックが用意されています。多くの人気のWordPressプラグインも、独自のウィジェットとブロックを提供しています。

例えば、ウィジェット/ブロックを使用して、人気の投稿リスト、お問い合わせフォーム、バナー広告、ソーシャルメディアフィードなどを追加できます。

これらのウィジェットはすべて、WordPress管理画面の外観 » ウィジェットページにアクセスすると確認できます。

注意: テーマにウィジェットエリアがない場合、WordPress管理画面に「ウィジェット」ページが表示されないことがあります。

詳細については、WordPressでウィジェットを追加して使用する方法に関するガイドをご覧ください。

ブロック

WordPressでは、コンテンツの作成、ウィジェットエリアの管理、ウェブサイトの編集にブロックエディターを使用します。一般的なウェブ要素はすべてブロックとして扱われるため、ブロックエディターと呼ばれています。

このエディターは、ブロックを使用してWordPressの投稿やページに美しいレイアウトを作成できるように設計されています。

あらゆる種類のコンテンツの最も一般的な要素には、さまざまな種類のブロックがあります。たとえば、段落、見出し、画像、ギャラリー、動画の埋め込み、列、テーブルなどを追加できます。

これにより、プラグインをインストールしたりテーマを変更したりすることなく、WordPressウェブサイトの各投稿またはページに異なるレイアウトを作成できます。

ブロックテーマでは、これらの同じブロックを使用して、サイドバー、ヘッダー、フッターなどの領域で従来のウィジェットを置き換えることもできます。

アイキャッチ画像

WPBeginnerのホームページにアクセスすると、各記事タイトルの横にサムネイル画像が表示されていることに気づくでしょう。これらはアイキャッチ画像と呼ばれます。

WordPressでは、投稿やページにアイキャッチ画像を設定できます。WordPressテーマは、これらの画像をウェブサイトのさまざまな領域で使用します。

詳細については、WordPressでアイキャッチ画像を追加する方法に関するガイドをご覧ください。WordPressでアイキャッチ画像を追加する方法。

カバー画像

カバー画像は通常、ブログ投稿やページの新しいセクションのカバー写真として使用される幅広の画像です。

カバーブロックを使用して、投稿やページに追加できます。カバーブロックでは、画像ではなく背景色を使用することもできます。

詳細については、カバー画像とアイキャッチ画像の違いに関する詳細ガイドをご覧ください。

ブロックパターン

パターンは、さまざまなセクションをレイアウトにすばやく追加するために使用できる、事前に配置されたブロックのコレクションです。

パターンを使用してコンテンツを作成し、投稿やページを編集できます。

同様に、WordPressのブロックテーマとウェブサイトのレイアウトでは、フルサイトエディターでパターンを使用できます。

サイトエディターを起動するだけで、「デザイン」オプションにパターンが表示されます。

各パターンは、一般的に使用されるレイアウトのために特定の順序で配置されたブロックのコレクションです。

WordPressテーマにはいくつかのパターンが用意されている場合があります。WordPressパターンライブラリでさらに多くのパターンを見つけることもできます。

デザインセクションを保存したいですか？ブロックの配置をパターンとして保存し、後で再利用できます。

ブロックパターンはWordPressの強力な機能であり、公式のWordPressパターンディレクトリで何千もの無料オプションを見つけることができます。

より多くのWordPressテーマやプラグインが独自のパターンを追加するにつれて、このライブラリは成長し続けています。

WordPressでのブロックパターンの使い方については、こちらのガイドをご覧ください。

ボタン

ボタンは、現代のウェブサイトのデザインやレイアウトにおいて重要な役割を果たします。ユーザーに明確な行動喚起を提供し、ビジネスの成長とコンバージョン率の向上に役立ちます。

デフォルトのブロックエディターには、WordPressの投稿やページ、またはサイトエディター内で使用できるボタンブロックが付属しています。

WordPressテーマには、テーマカスタマイザーにコールトゥアクションボタンの設定が含まれている場合もあります。最も人気のあるWordPressページビルダープラグインも、さまざまなスタイルのボタンを含んでいます。

プラグインを使用すると、WordPressでクリックして電話をかけるボタンを追加することさえできます。

WordPressでコールトゥアクションボタンを追加する方法については、ガイドをご覧ください。WordPressでコールトゥアクションボタンを追加する方法。

カスタムCSS

ウェブサイトのペイントや装飾としてCSS（Cascading Style Sheets）を考えてください。これは、色、フォント、スペーシングなどの視覚的な詳細を制御するコードです。

WordPressのテーマやプラグインには独自のCSSルールがありますが、テキストの色やフォントサイズのような小さなものを変更したい場合があります。ここでカスタムCSSが登場します。

WordPressでは、独自のカスタムCSSルールを簡単に保存できます。

ブロックテーマにカスタムCSSを追加する

サイトエディターをサポートするブロックテーマを使用している場合は、外観 » エディターページに移動してください。

メインエディターダッシュボードから、右上隅にある「スタイル」アイコンをクリックするだけです。これにより、右側の列に「スタイル」パネルが開きます。

ここから下にスクロールし、「追加CSS」タブをクリックします。これにより、CSSコードを追加できるテキストボックスが表示されます。

完了したら、変更を保存するために「保存」ボタンをクリックすることを忘れないでください。

クラシックテーマでのカスタムCSSの追加

クラシックWordPressテーマを使用している場合は、テーマカスタマイザーにカスタムCSSを追加できます。

外観 » カスタマイズページに移動し、「追加CSS」タブをクリックするだけです。

ここからカスタムCSSルールを追加でき、ライブプレビューで適用されているのを確認できます。

プラグインを使用してWordPressにカスタムCSSを追加する

通常、デフォルトの方法を使用すると、カスタムCSSコードはテーマ設定とともに保存されます。テーマを変更すると、カスタムCSSコードが無効になります。

WordPressでカスタムCSSを保存するより良い方法は、WPCodeプラグインを使用することです。これは最高のWordPressコードスニペットプラグインであり、サイトを壊すことなくカスタムコードスニペットを簡単に追加できます。

まず、WPCodeプラグインをインストールして有効化する必要があります。詳細については、初心者向けのWordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化したら、WordPress管理ダッシュボードから コードスニペット » +新規追加に移動します。

次に、コードスニペットライブラリの「カスタムコードを追加（新規スニペット）」オプションにカーソルを合わせ、「スニペットを使用」ボタンをクリックします。

次に、ページの上部で、カスタムCSSスニペットのタイトルを追加します。これは、コードを識別するのに役立つものであれば何でも構いません。

その後、「コードプレビュー」ボックスにカスタムCSSを書き込むか貼り付け、「コードタイプ」をドロップダウンメニューから「CSSスニペット」オプションを選択して設定します。

次に、「挿入」セクションまでスクロールし、コードをWordPressウェブサイト全体で実行したい場合は、「自動挿入」メソッドを選択します。

コードを特定のページまたは投稿でのみ実行したい場合は、「ショートコード」メソッドを選択できます。

最後に、ページの上部に戻り、スイッチを「アクティブ」に切り替え、「スニペットの保存」ボタンをクリックします。

これにより、カスタムCSSコードスニペットが保存されます。

このトピックの詳細については、WordPressでカスタムCSSを追加する方法に関する完全なガイドをご覧ください。WordPressでカスタムCSSを追加する方法。

WordPressページビルダーのレイアウト用語

ランディングページ用のカスタムWordPressレイアウトを構築する最も簡単な方法は、WordPressページビルダーを使用することです。

SeedProdの使用をお勧めします。これは市場で最も初心者向けのWordPressページビルダープラグインです。

他のページビルダーも、一般的なツールや機能に類似した用語を使用しています。

WordPressページビルダーでのテンプレートの使用

テンプレートは、ウェブページレイアウトを作成する最も簡単な方法です。すべての人気のあるページビルダープラグインには、開始点として使用できる多くのすぐに使えるテンプレートが付属しています。

例えば、SeedProdにはテンプレートがあります。ランディングページ、セールスページ、404ページ、近日公開ページなど、さまざまなページタイプに対応しています。

WordPressページビルダーのモジュールとブロック

デフォルトのWordPressエディターのブロックと同様に、ページビルダープラグインもブロックを使用します。

一部のページビルダーでは、これらをモジュールまたは要素と呼ぶ場合がありますが、本質的には同じものです。

ただし、ページビルダープラグインには、デフォルトのエディターよりも多くのブロックが付属しています。たとえば、SeedProdには、お客様の声、WooCommerceブロック、Googleマップ、お問い合わせフォーム、Facebook埋め込みなどのブロックが含まれています。

ブロックを使用して独自のレイアウトを作成し、それらを移動させ、ビジネスに最適なものを判断するために実験することができます。

WordPressページビルダーでのセクションの使用方法

デフォルトエディターの「パターン」機能と同様に、セクションは、ウェブサイトの一般的な領域を瞬時に作成するためにグループ化されたブロックのセットです。

例えば、通常はヘッダーセクション、ヒーロー画像、価格表などを使用できます。

WordPressのページビルダープラグインによって、これらの用語は異なる場合があります。例えば、SeedProdではセクションと呼び、Beaver Builderでは保存された行と列と呼びます。

よくある質問

WordPressのレイアウトに関して、読者からよく寄せられる質問をいくつかご紹介します。

WordPressにおけるブロックとウィジェットの違いは何ですか？

ブロックは、WordPressエディターで段落、画像、ボタンなどのコンテンツを作成するために使用する基本的な構成要素です。

ウィジェットは、従来、サイドバーやフッターなど、メインのページコンテンツ以外のエリアに特定のコンテンツモジュールを追加するために使用されていました。

最新のブロックベースのテーマでは、ブロックを任意のウィジェット対応エリアで使用できるようになり、柔軟性が大幅に向上し、従来のウィジェットシステムはあまり一般的ではなくなりました。

ページごとに異なるレイアウトを持つことはできますか？

はい、絶対に可能です。WordPressのブロックエディターを使用すると、投稿やページごとにユニークなレイアウトを作成できます。列を配置したり、さまざまなブロックを追加したり、ページごとに好きなようにコンテンツを構成したりできます。

さらに高度な制御のために、SeedProd のようなページビルダープラグインを使用すると、テーマのデフォルトレイアウトとは完全に独立した、カスタムページをゼロから完全にデザインできます。

すべてのWordPressテーマにはサイドバーがありますか？

いいえ、すべてのテーマにサイドバーが含まれているわけではありません。

多くのモダンなデザインは、特にランディングページやビジネスサイトで、より集中したユーザーエクスペリエンスのために、クリーンでフル幅のレイアウトに焦点を当てています。

ただし、ほとんどの多目的テーマでは、テーマカスタマイザーまたはサイトエディターを通じて有効または無効にできるオプションとしてサイドバーが引き続き提供されています。

ボーナスリソース

以下は、WordPressのデザインの基本についてさらに詳しく説明している初心者向けの追加リソースです。

• WordPressのテーマ開発のためにダミーコンテンツを追加する方法
• 初心者向けWordPressテーマチートシート
• WordPressテーマで編集するファイルを見つける方法
• WordPressテンプレート階層の初心者向けガイド（チートシート）
• コードなしでカスタムWordPressテーマを簡単に作成する方法

この記事がWordPressレイアウトで使用される用語を学ぶのに役立ったことを願っています。また、1週間でWordPressを無料で学ぶ方法に関するガイドを確認したり、初心者向けのWordPress用語集であるWordPress用語集をブックマークすることもできます。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。