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

WordPressでウェブサイトのデザインを始めたばかりの頃は、「ヘッダー」「フッター」「ウィジェット」といった新しい用語に戸惑うかもしれません。

単純なウェブサイトを構築するためだけに、全く新しい言語を学んでいるように感じるかもしれません。

良いニュースは？これらの用語は、聞こえるよりもずっとシンプルです。そして、一度理解すれば、ウェブサイトの構築がずっと楽になります。

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

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

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

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

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

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

このようになります：

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

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

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

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

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

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

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

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

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

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

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

ヘッダーエリア

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

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

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

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

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

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

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

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

クラシックテーマの場合、通常これらの設定はテーマカスタマイザーで見つけることができます。

レイアウトとスタイルを変更するには、「ヘッダー」または「ヘッダーオプション」というセクションを探してください。ロゴをアップロードしたり、サイトのタイトルを変更したりするには、「サイトアイデンティティ」タブを探してください。

WordPressテーマによっては、ヘッダーにタグラインやコールトゥアクションボタン付きの全幅画像を追加できる場合があります。

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

背景画像/色

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

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

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

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

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

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

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

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

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

詳細については、WordPressでの背景画像の追加やWordPressでの背景色の変更に関する関連ガイドを参照してください。

コンテンツエリア

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

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

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

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

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

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

最も人気のあるコンテンツを、ユーザーがメールリストに参加するためのコールトゥアクションとともに紹介します。（参照：メールリストを成長させるために使用するその他の方法）

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

ただし、その設定を変更して、任意の個別のページをウェブサイトのフロントページとして使用することもできます。まず、WordPressで2つの新しいページを作成する必要があります（例：「ホーム」と「ブログ」）。

これらのページが作成されたら、設定 » 表示設定ページに移動し、「ホームページの表示」オプションの下にある「固定ページ」を選択します。

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

詳細については、WordPressでブログ投稿用の別のページを作成する方法に関するガイドを参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

サイドバーの使用に関する詳細については、WordPressサイドバートリックに関する究極のガイドを確認してください。

フッターエリア

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

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

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

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

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

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

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

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

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

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

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

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

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

ナビゲーションメニュー

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

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

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

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

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

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

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

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

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

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

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

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

ブロック

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

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

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

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

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

アイキャッチ画像

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

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

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

カバー画像

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

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

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

ブロックパターン

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

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

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

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

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

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

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

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

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

詳細については、WordPressでブロックパターンを使用する方法に関するガイドをご覧ください。

ボタン

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

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

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

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

詳細については、WordPressでCTAボタンを追加する方法に関するガイドをご覧ください。

カスタム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ページビルダーのレイアウト用語

ランディングページ用のカスタム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でも私たちを見つけることができます。