WordPressレイアウト用語解説（クイックリファレンス）

WordPressでサイトをデザインし始めた当初、私たちは “ヘッダー”、”フッター”、”ウィジェット “といった新しいキーワードに振り回された。簡単なサイトを作るために、まったく新しい言語を学ぶような気分だった。

過去16年以上にわたって何百万人ものWordPressユーザーをサポートしてきた私たちは、これらのキーワードをマスターしただけでなく、初心者に説明する最も簡単な方法も発見しました。

これらのレイアウト用語が何を意味するのか（そして、それらがどのように作用するのか）、まだよくわからないという方もご安心ください。あなたは一人ではありません。

このわかりやすいガイドでは、WordPressのレイアウトに欠かせないキーワードをすべて、いつでも参照できるように、シンプルでわかりやすい説明に分解します。

WordPressのレイアウトについてのメモ

WordPressのレイアウトについて学ぶとき、サイトを構築する方法によって異なるキーワードに出会うでしょう。これは、完全なサイトエディターをサポートするテーマを使用しているか、クラシックテーマのカスタマイザーを使用しているか、WordPressページビルダープラグインを使用しているかによって異なります。

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

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

こんな感じだ：

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

また、コンテンツに追加するための追加ブロックや高度なブロックなど、初期設定のWordPressツールにはない機能がついているのが一般的です。

これらのツールは異なるキーワードやインターフェースを使用しているかもしれませんが、基本的なレイアウトのコンセプトは変わりません。これらの核となるキーワードを理解することで、どのツールを使用していても、より良いWordPressデザインやカスタマイザーレイアウトを作成することができます。

WordPressのレイアウトに欠かせないキーワードを紹介し、異なるプラットフォームでどのように機能するかを見ていきましょう。以下がその内容です：

WordPressの典型的なレイアウトを理解する

ほとんどのサイトは、非常に馴染みのあるレイアウトを使っている。こんな感じだ：

サイトの一番上のエリアはヘッダーと呼ばれ、次にコンテンツエリア、そしてページ下部のフッターと続く。

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

例えば、WordPressのブログページには、コンテンツエリアの隣にサイドバーがある場合がある。

この基本的なレイアウトは、この投稿の後半で説明する他の要素で埋め尽くされている。

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

ヘッダーエリア

WordPressレイアウトのヘッダーは、どのページでも一番上の部分です。ヘッダーには通常、サイトのロゴ、タイトル、ナビゲーションメニュー、検索フォーム、その他ユーザーに最初に見てもらいたい重要な要素が含まれています。

WPBeginnerのヘッダーセクションはこんな感じです。

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

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

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

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

カスタムヘッダー設定はクラシックテーマの「ヘッダーオプション」タブで見つけることができます。

WordPressのテーマによっては、ヘッダーにキャッチフレーズやコールトゥアクションボタンと一緒に全幅の画像を追加できるかもしれません。

WordPressテーマによっては、ロゴの位置やナビゲーションメニュー、ヘッダー画像を変更できるものもあります。

背景イメージ/カラー

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

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

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

その後、「背景」をクリックしてサイトの背景色を選ぶことができる。

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

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

多くの場合、これらのオプション設定は他のタブに埋もれており、探し回る必要がある。

詳しくは、WordPressで背景画像を追加する、またはWordPressで背景色を変更する関連ガイドをご覧ください。

コンテンツエリア

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

カスタマイザーのホームページレイアウトの場合、コンテンツセクションには、コールトゥアクションに続いて、サービスや製品、お客様の声、その他の重要な情報を掲載することができます。

オンラインショップは通常、このエリアを使って、開催中のセールや目玉商品、売れ筋項目などを宣伝する。

一方、ブログや雑誌サイトのようなコンテンツが豊富なサイトでは、コンテンツ偏重のレイアウトを採用することもある。

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

WPBeginnerのブログページのレイアウトはこんな感じです。

最も人気のあるコンテンツを紹介し、ユーザーにメールリストへの参加を呼びかけます。(参照：メールリストを増やすためのその他の方法）

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でアイキャッチ画像を追加する方法をご覧ください。

表紙画像

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

Coverブロックを使って投稿やページに追加できます。カバーブロックでは、画像の代わりに背景色を使用することもできます。

さらに詳しく知りたい方は、カバー画像とアイキャッチ画像の違いについての詳しいガイドをご覧ください。

ブロックパターン

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

パターンを使ってコンテンツを書いたり、投稿やページを編集することができる。

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

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

各パターンは、よく使われるレイアウトのために特定の順序で並べられたブロックの集まりである。

WordPressテーマにはいくつかのパターンが付属している場合があります。また、WordPress Patterns Libraryでより多くのパターンを見つけることができます。

デザインセクションを保存したいですか？自分のブロックアレンジをパターンとして保存し、後で再利用することができます。

比較的新しい機能なので、利用できるパターンは限られています。しかし、より多くのWordPressテーマやプラグインがブロックエディターにパターンを追加するにつれて、より多くのオプションが利用できるようになるでしょう。

さらに詳しく知りたい方は、WordPressでブロックパターンを使うガイドをご覧ください。

ボタン

ボタンは、モダンなウェブサイトのデザインやレイアウトにおいて重要な役割を果たします。ユーザーに明確な行動を促し、ビジネスとコンバージョンの拡大に貢献します。

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

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

プラグインを使えば、WordPressにクリック・ツー・コール・ボタンを追加することもできる。

詳しくは、WordPressでコールトゥアクションボタンを追加する方法をご覧ください。

カスタムCSS

CSSは、ウェブサイトを作成するために使用されるスタイリング言語です。WordPressのテーマやプラグインには独自のCSSルールが用意されていますが、時折、テキストの色やフォントサイズ、背景色など、ちょっとしたことを変更したくなることがあるかもしれません。

そこでカスタムCSSの出番です。WordPressでは、独自のカスタムCSSルールを簡単に保存することができます。

サイトエディターをサポートしているテーマを使用している場合は、外観 ” エディター ページでサイトエディターを起動するだけです。

任意のテンプレートをクリックして編集を開始し、画面右上の「スタイル」ボタンをクリックします。

すると、右カラムに「スタイル」パネルが表示されます。ここから下にスクロールし、「追加CSS」タブをクリックします。

テキストボックスが表示されますので、そこにCSSコードを追加してください。

終了したら「保存」ボタンをクリックして変更を保存することをお忘れなく。

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

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

ここから、カスタマイザー・ルールを追加することができ、ライブ・プレビューで適用されたものを見ることができます。

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

通常、初期設定の方法を使用している場合、カスタムCSSコードはテーマ設定と一緒に保存されます。テーマを変更すると、カスタムCSSコードは無効化されます。

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

まず、WPCodeプラグインをインストールし、有効化する必要があります。詳しくは、WordPressプラグインのインストール方法をご覧ください。

有効化したら、WordPressの管理ダッシュボードからCode Snippets ” + Add Newにアクセスします。

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

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

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

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

特定のページや投稿日: にのみコードを実行したい場合は、’ショートコード’ メソッドを選択することができます。

最後にページのトップに戻り、スイッチを「有効化」に切り替え、「スニペットを保存」ボタンをクリックする。

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

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

WordPressページビルダーにおけるレイアウトのキーワード

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

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

他のページビルダーは、共通のツールや機能に対して同じようなキーワードを使っています。

WordPressページビルダーでテンプレートを使う

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

例えば、SeedProdには、ランディングページ、セールスページ、404ページ、coming soonページなど、様々なページタイプのテンプレートがあります。

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

WordPress初期設定のエディターのブロックのように、ページビルダープラグインもブロックを使用します。

ページビルダーによってはモジュールやエレメントと呼ぶ場合もありますが、本質的には同じものです。

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

ブロックを使って独自のレイアウトを作成したり、レイアウトを移動させたり、あなたのビジネスに最適なレイアウトを試行錯誤することができます。

WordPressページビルダーでセクションを使う

初期設定エディターの「パターン」機能と同様に、セクションはウェブサイトの共通エリアを即座に作成するためにグループ化されたブロックのセットです。

例えば、ヘッダーセクション、ヒーロー画像、価格テーブルなどを使用することができます。

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

ボーナス・リソース

以下は、WordPressデザインの基本をより詳しく説明した、初心者向けの追加リソースです：

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

この投稿が、WordPressのレイアウトで使われるキーワードを知る一助となれば幸いです。また、1週間でWordPressを無料で学ぶガイドをチェックしたり、初心者向けのWordPress用語辞典をブックマークしたりするのもよいでしょう。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.