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のレイアウトで使われるキーワードを学ぶのに役立てば幸いです。また、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.