Web制作全般ホームページ制作・Web制作

WordPressサイトのレイアウト 中央部のカラム分割

WordPressサイトのレイアウト 中央部のカラム分割

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

メインカラム分割無しのホームページレイアウト 1カラムレイアウト
メインカラム2分割のホームページレイアウト 2カラムレイアウト
メインカラム3分割のホームページレイアウト 3カラムレイアウト

3分割レイアウト 左サイドバー、メインカラム、右サイドバー
3分割レイアウト 左サイドバー①、左サイドバー②、メインカラム
3分割レイアウト メインカラム、右サイドバー①、右サイドバー②

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

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

1カラムレイアウト

1カラムレイアウトは、サイドバーの無いシンプルなレイアウトです。メインカラムの分割がなく横幅いっぱいにコンテンツを表示するタイプのホームページレイアウトです。

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

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

2カラムレイアウト

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

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

この2分割タイプのホームページレイアウトは、ホームページ制作において古くから一般的なレイアウトであり、WordPressサイトでもこの2カラムレイアウトのテーマが多く存在します。

特殊な2分割レイアウト

通常の2分割レイアウトである2カラムレイアウトは、ヘッダーやフッターといった上下の部分は別に存在し、合計で4つのセクションでレイアウトを構成している形になります。しかし特殊な2分割レイアウトとして、上下のヘッダーやフッターが存在せず完全に左右に2分割したレイアウトなどもあります。

WordPressテーマであれば、WordPress純正テーマのひとつである、「Twenty Fifteen」などが代表例でしょう。

WordPress銃声テーマのの中には、左サイドバーがヘッダーとしての役割を兼任し、フッターはコンテンツ部分のフッターエリアに配置されているという特殊な構造を持っているものがあります。

こうしたヘッダーやフッターを統合したような左右2分割レイアウトなど面白い構造の2カラムレイアウトも存在します。

3カラムレイアウト

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

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

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

なお、一般的な企業ホームページよりも、ブログテンプレートなどでよく用いられる傾向にあります。この3分割タイプのホームページレイアウトは、通常のホームページ制作よりも、記事の配信を行うことが多くなったブログの登場以後に多くなったレイアウトと言えるでしょう。

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

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

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

WordPressサイト制作