WordPressサイト（ホームページ）のレイアウトとして、「基本的なサイトレイアウト」は、上下にヘッダーエリア、フッターエリアを設置し、中央部は、1カラムレイアウト、2カラムレイアウト、3カラムレイアウトに分割されたレイアウトとなります。
WordPressで制作されたホームページだけでなく、一般的なHTMLのホームページでも概ねこうしたレイアウトパターンで構成されています。
一般的には、サイトロゴやメインメニュー（グローバルメニュー）が設置されたヘッダーエリアが最上部に設置され、次に本文部分にあたるコンテンツエリアが設置されます。このコンテンツエリアが分割され、サイドバーが設置されている仕様のものもあります。そして最下部にリンク群や問い合わせ先が掲載されたフッターエリアが設置されます。
ホームページのレイアウト
一般的にホームページのレイアウトの構造は、ヘッダーエリア、フッターエリアといった全ページ共通の部分のほか、中央部分に各ページ固有のコンテンツ部分が配置されています。
この中央部分にあたる部分に個別のコンテンツを掲載する部分を設置しますが、中央部レイアウト構造が左サイドバー、右サイドバーといったサイドバーを持っている場合、2分割されている場合は2カラムレイアウトとなり、左右のサイドバー、もしくは左に2つ、右に2つなど3分割されている場合は3カラムレイアウトとなります。
この中央部分のレイアウト構造におけるサイドバーが無い純粋なコンテンツ部分のみが設置されたレイアウトは1カラムレイアウトと呼ばれます。
- 1カラムレイアウト 中央分割無し
- 2カラムレイアウト 中央2分割レイアウト 左サイドバーとメインカラム
- 2カラムレイアウト 中央2分割レイアウト メインカラムと右サイドバー
- 3カラムレイアウト 中央3分割レイアウト 左サイドバー、メインカラム、右サイドバー
ヘッダーエリア
一般的にホームページのヘッダー部には、サイトロゴや主要ページなどへのリンク群（グローバルメニュー）が設置されます。
このヘッダーエリアは、ホームページ全体のレイアウト構造の中では概ね最上部に設置されますが、特殊なホームページやWordPressテーマでは、ヘッダーエリアとしての機能を左端や右端、時にページ下部に設けてある場合があります。
基本的には「ヘッダー」の名の通り、ホームページの頭の方（上部）にあります。
固定的なHTMLホームページ制作でも概ねヘッダーエリアにメニューボタンが設置され、WordPressサイトでも「メニュー機能」などがテーマに組み込まれていることがほとんどです。
フッターエリア
一般的にホームページのフッター部には、主要ページなどへのリンク群（フッターメニュー）や、社名、住所、連絡先電話番号等が設置されます。
基本的には「フッター」の名の通り、ホームページの底の方にあります。
ホームページのヘッダーが下部にある場合は、下部の中でグローバルメニューなどが設置されたものをヘッダーとして扱い、ホームページクレジットや連絡先情報などが記載された部分をフッターと呼ぶ場合があります。
固定的なHTMLホームページ制作でも概ねフッターエリアにはメニューボタンに準ずる主要ページへのテキストリンクなどが設置され、WordPressサイトではフッターウィジェット機能によって、主要ページへのリンクやテキスト項目、クレジットなどを設定できるようになっていることがほとんどです。
中央部のカラム分割
ホームページのレイアウトとして、上下にヘッダー部、フッター部が設置され、それを挟む形で中央部に本文カラムやサイドバーカラムが設置されます。本文カラムには各ページ固有の情報が掲載されます。
本文カラムが分割されないものを「1カラムレイアウト」、2つに分割されたものを「2カラムレイアウト」、左右にサイドバーを持つなど3つに分割されたものを「3カラムレイアウト」と表現します。
- メインカラム分割無しのホームページレイアウト 1カラムレイアウト
- メインカラム2分割のホームページレイアウト 2カラムレイアウト
- メインカラム3分割のホームページレイアウト 3カラムレイアウト
またホームページ制作においたこうしたレイアウトパターンの他に、複雑なレイアウト構造を持つものがありますが、ここではこうした中央部（本文カラム）においてカラム分割されたホームページレイアウトについてご紹介します。
1カラムレイアウト
WordPressサイト 1カラムレイアウト
1カラムレイアウトは、サイドバーの無いシンプルなレイアウトです。メインカラムの分割がなく横幅いっぱいにコンテンツを表示するタイプのホームページレイアウトです。
ホームページの中の各ページのコンテンツ部分が際立つため、本文を強調して表示したい場合に適しているホームページレイアウトです。
カラム分割がされていないため、スマートフォン表示の際のレイアウトに関するレスポンシブ対応の必要がないといったメリットもあります。
1カラムレイアウトの基本構造
2カラムレイアウト
WordPressサイト 2カラムレイアウト
2カラムレイアウト（画像は右サイドバータイプ）は、本文カラムの横に他ページヘのリンクや紹介文を設置するタイプのレイアウトです。
本文部分に当たるコンテンツ部分の幅を取ってしまいますが、他のページへの移動が楽になるため、ユーザーのページ移動、操作性を高めたり、複数ページをくまなく見てもらいたい場合にはメリットのあるホームページレイアウトです。
この2分割タイプのホームページレイアウトは、ホームページ制作において古くから一般的なレイアウトであり、WordPressサイトでもこの2カラムレイアウトのテーマが多く存在します。
2カラムレイアウト 左サイドメニューの基本構造
2カラムレイアウト 右サイドメニューの基本構造
特殊な2分割レイアウト
通常の2分割レイアウトである2カラムレイアウトは、ヘッダーやフッターといった上下の部分は別に存在し、合計で4つのセクションでレイアウトを構成している形になりますが、特殊な2分割レイアウトとして、上下のヘッダーやフッターが存在せず完全に左右に2分割したレイアウトなどもあります。
WordPressテーマであれば、WordPress純正テーマのひとつである、「Twenty Fifteen」などが代表例でしょう。
Twenty Fifteenテーマは、左サイドバーがヘッダーとしての役割を兼任し、フッターはコンテンツ部分のフッターエリアに配置されているという特殊な構造を持っています。
こうしたヘッダーやフッターを統合したような左右2分割レイアウトなど面白い構造の2カラムレイアウトも存在します。
3カラムレイアウト
3カラムレイアウトは左右と中央に3つにカラム分割されたホームページレイアウトです。
「左サイドバー、本文、右サイドバー」といったレイアウトや、「本文、右サイドバー1、右サイドバー2」といったレイアウトで実装されます。
- 3分割レイアウト 左サイドバー、メインカラム、右サイドバー
- 3分割レイアウト 左サイドバー①、左サイドバー②、メインカラム
- 3分割レイアウト メインカラム、右サイドバー①、右サイドバー②
カテゴリー分類や新着記事表示など、サイドバーに表示したい項目の多いホームページではこうした3カラムレイアウトが利用されます。
なお、一般的な企業ホームページよりも、ブログテンプレートなどでよく用いられる傾向にあります。この3分割タイプのホームページレイアウトは、通常のホームページ制作よりも、記事の配信を行うことが多くなったブログの登場以後に多くなったレイアウトと言えるでしょう。
ホームページ制作にあたり、こうした左右と中央に分割された3カラムレイアウトも対応可能です。
以上の標準的なサイトレイアウトの場合は、別途費用はかかりませんが、特殊な構造のサイトレイアウトの場合は、別途お見積りさせていただいております。
なお、本文カラム内で要素を分割するタイプの場合は、仕様により別途費用を申し受ける場合がありますことを予めご了承ください。
WordPress（ワードプレス）でのホームページ制作・ウェブサイト制作
