WordPressサイト(ホームページ)のレイアウト


WordPressサイト(ホームページ)のレイアウトとして、「基本的なサイトレイアウト」は、上下にヘッダーエリア、フッターエリアを設置し、中央部は、1カラムレイアウト、2カラムレイアウト、3カラムレイアウトに分割されたレイアウトとなります。

WordPressで制作されたホームページだけでなく、一般的なHTMLのホームページでもこうした概ねこうしたレイアウトパターンで構成されています。

ホームページのレイアウト

一般的にホームページのレイアウトの構造は、ヘッダーエリア、フッターエリアといった全ページ共通の部分のほか、中央部分に各ページ固有のコンテンツ部分が配置されています。

この中央部分にあたる部分に個別のコンテンツを掲載する部分を設置しますが、中央部レイアウト構造が左サイドバー、右サイドバーといったサイドバーを持っている場合、2分割されている場合は2カラムレイアウトとなり、左右のサイドバー、もしくは左に2つ、右に2つなど3分割されている場合は3カラムレイアウトとなります。

この中央部分のレイアウト構造におけるサイドバーが無い純粋なコンテンツ部分のみが設置されたレイアウトは1カラムレイアウトと呼ばれます。

ヘッダーエリア

WordPressホームページヘッダー部

一般的にホームページのヘッダー部には、サイトロゴや主要ページなどへのリンク群(グローバルメニュー)が設置されます。

このヘッダーエリアは、ホームページ全体のレイアウト構造の中では概ね最上部に設置されますが、特殊なホームページやWordPressテーマでは、ヘッダーエリアとしての機能を左端や右端、時にページ下部に設けてある場合があります。

基本的には「ヘッダー」の名の通り、ホームページの頭の方にあります。

フッターエリア

WordPressホームページフッター部

一般的にホームページのフッター部には、主要ページなどへのリンク群(フッターメニュー)や、社名、住所、連絡先電話番号等が設置されます。

基本的には「フッター」の名の通り、ホームページの底の方にあります。

ホームページのヘッダーが下部にある場合は、下部の中でグローバルメニューなどが設置されたものをヘッダーとして扱い、ホームページクレジットや連絡先情報などが記載された部分をフッターと呼ぶ場合があります。

中央部のカラム分割

ホームページのレイアウトとして、上下にヘッダー部、フッター部が設置され、それを挟む形で中央部に本文カラムやサイドバーカラムが設置されます。本文カラムには各ページ固有の情報が掲載されます。

本文カラムが分割されないものを「1カラムレイアウト」、2つに分割されたものを「2カラムレイアウト」、左右にサイドバーを持つなど3つに分割されたものを「3カラムレイアウト」と表現します。

またこうしたレイアウトパターンの他に、複雑なレイアウト構造を持つものがありますが、ここではこうした中央部(本文カラム)においてカラム分割されたホームページレイアウトについてご紹介します。

1カラムレイアウト

WordPressサイト 1カラムレイアウト

WordPressサイト 1カラムレイアウト

1カラムレイアウトは、サイドバーの無いシンプルなレイアウトです。

ホームページの中の各ページのコンテンツ部分が際立つため、本文を強調して表示したい場合に適しているホームページレイアウトです。

カラム分割がされていないため、スマートフォン表示の際のレイアウトに関するレスポンシブ対応の必要がないといったメリットもあります。

2カラムレイアウト

WordPressサイト 2カラムレイアウト

WordPressサイト 2カラムレイアウト

2カラムレイアウト(画像は右サイドバータイプ)は、本文カラムの横に他ページヘのリンクや紹介文を設置するタイプのレイアウトです。

本文部分に当たるコンテンツ部分の幅を取ってしまいますが、他のページへの移動が楽になるため、ユーザーのページ移動、操作性を高めたり、複数ページをくまなく見てもらいたい場合にはメリットのあるホームページレイアウトです。

3カラムレイアウト

3カラムレイアウトは左右と中央に3つにカラム分割されたホームページレイアウトです。

「左サイドバー、本文、右サイドバー」といったレイアウトや、「本文、右サイドバー1、右サイドバー2」といったレイアウトで実装されます。

カテゴリー分類や新着記事表示など、サイドバーに表示したい項目の多いホームページではこうした3カラムレイアウトが利用されます。

なお、一般的な企業ホームページよりも、ブログテンプレートなどでよく用いられる傾向にあります。

ホームページ制作にあたり、こうした左右と中央に分割された3カラムレイアウトも対応可能です。

以上の標準的なサイトレイアウトの場合は、別途費用はかかりませんが、特殊な構造のサイトレイアウトの場合は、別途お見積りさせていただいております。

なお、本文カラム内で要素を分割するタイプの場合は、仕様により別途費用を申し受ける場合がありますことを予めご了承ください。

WordPress(ワードプレス)でのホームページ制作・ウェブサイト制作

ホームページ制作 京都のWeb制作会社
株式会社ファンフェアファンファーレ
ホームページ制作、サイトカスタマイズなど、ファンフェアファンファーレへのお問い合わせ・Web制作のご依頼はこちら