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

WordPressのレイアウト用語を理解することは、初心者にとって難しいことです。サイトを制作していると、デザイナーや開発者が使うキーワードに出くわすことがあります。

私たちは、多くのWordPressユーザーがこれらの専門用語に苦労しているのを見てきましたが、一度意味を理解すれば、WordPressサイトをナビゲーションするのがとても簡単になります。正しいキーワードを知っていれば、開発者やデザイナーとのコミュニケーションもより効果的になります。

このガイドでは、WordPressでよく使われるレイアウトのキーワードを解説します。このクイックリファレンスがあれば、プロのようにサイトのレイアウトを管理する自信がつきます。

なぜWordPressのレイアウト用語を学ぶのか？

WordPressテーマは、サイトの外観やレイアウトをコントロールします。テーマによっては、複数の方法でカスタマイズすることができます。

フルサイトエディターをサポートしているテーマは、外観 ” エディターページでカスタマイズできます。

クラシックテーマ（現在フルサイトエディターをサポートしていないテーマ）を使用している場合は、外観 ” カスタマイズページでカスタマイズできます。

テーマ・カスタマイザーが起動します：

すべてのトップWordPressテーマには、テーマカスタマイザーまたはフルサイトエディターを使ってウェブサイトのデザインを変更するオプションがありますが、テーマによってはオプションが制限されます。

SeedProdのようなWordPressページビルダー・プラグインを使えば、さらに柔軟性が増す。

SeedProdでは、コードを書くことなく、簡単なドラッグ＆ドロップツールでカスタマイザーを簡単に作成することができます。

SeedProdはまた、あなたが出発点として使用することができますテンプレートの数十を持っています。WooCommerceをサポートしているので、オンラインストアのレイアウトを作成するのに役立ちます。

しかし、サイトのレイアウトを作成していると、聞き慣れないウェブデザイン用語に出会うことがあります。

これらのウェブサイトレイアウトのキーワードを学ぶことで、WordPressウェブサイトデザインの構成ブロックを理解することができ、想像できるあらゆるデザインをさらに簡単に作成できるようになります。

WordPressでよく使われるレイアウトのキーワードについて、その意味や使い方を紐解いていきましょう。この投稿で説明する概念とキーワードの簡単なリストです：

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

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

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

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

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

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

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

WordPressレイアウトのヘッダー

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

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

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

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

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

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

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

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

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

WordPressのカスタム背景

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

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

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

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

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

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

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

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

WordPressのコンテンツエリア

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

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

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

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

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

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

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

WordPressの初期設定では、サイトのフロントページとして最新のブログ投稿を表示するブログレイアウトを使用しています。

しかし、この設定を変更すれば、どのページでもサイトのトップページとして使用することができる。

設定 ” 読書ページに移動し、“あなたのホームページの表示 “オプションで “静的ページ “を選択します。

その後、ホームページとして使うページと、ブログページとして使うページを選ぶことができる。

詳しくは、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の投稿やページの美しいレイアウトを作成できるように設計されています。

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

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

WordPressレイアウトのアイキャッチ画像

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

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

さらに詳しく知りたい方は、WordPressでアイキャッチ画像を追加する方法をご覧ください。

WordPressのカバー画像

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

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

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

WordPressエディターでパターンを使う

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

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

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

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

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

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

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

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

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

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.