QHM 3カラムデザイン 使用例

2カラムと3カラムのデザインに、QHMで使用可能な

• #main_visual
• #logo_image

を組み合わせた使用方法をサンプル表示します。

メインビジュアルは２カラムの横のサイズと同じ1000px幅のもの、
ヘッダーロゴイメージも同じものを表示しています。

使用デザインはこのサイトで初期に使用していたものです。

---

サンプル表示

タイトルクリックでページへジャンプ、画像クリックでポップアップ表示します。

2カラムデザイン

メニュー･コンテンツ

Main_visual未使用 Logo_image未使用	Main_visual使用 Logo_image未使用	Main_visual未使用 Logo_image使用	Main_visual使用 Logo_image使用

コンテンツ･メニュー

Main_visual未使用 Logo_image未使用	Main_visual使用 Logo_image未使用	Main_visual未使用 Logo_image使用	Main_visual使用 Logo_image使用

---

3カラムデザイン Main_visual未使用/Logo_image未使用[両方未使用]>

パターンA メニュー･コンテンツ･メニュー	パターンB メニュー･メニュー･コンテンツ	パターンC コンテンツ･メニュー･メニュー

3カラムデザイン Main_visual使用/Logo_image未使用

パターンA：メニュー･コンテンツ･メニュー

メニュー･コンテンツ･メニュー Main_visual表示･中央	メニュー･コンテンツ･メニュー Main_visual表示･左	メニュー･コンテンツ･メニュー Main_visual表示･右

パターンB：メニュー2･メニュー1･コンテンツ

メニュー･メニュー･コンテンツ Main_visual表示･中央	メニュー･メニュー･コンテンツ Main_visual表示･右

パターンC：コンテンツ･メニュー1･メニュー2

コンテンツ･メニュー･メニュー Main_visual表示･中央	コンテンツ･メニュー･メニュー Main_visual表示･左

3カラムデザイン Main_visual未使用/Logo_image使用

パターンA メニュー･コンテンツ･メニュー	パターンB メニュー･メニュー･コンテンツ	パターンC コンテンツ･メニュー･メニュー

3カラムデザイン Main_visual使用/Logo_image使用[両方使用]

パターンA：メニュー･コンテンツ･メニュー

メニュー･コンテンツ･メニュー Main_visual表示･中央	メニュー･コンテンツ･メニュー Main_visual表示･左	メニュー･コンテンツ･メニュー Main_visual表示･右

パターンB：メニュー2･メニュー1･コンテンツ

メニュー･メニュー･コンテンツ Main_visual表示･中央	メニュー･メニュー･コンテンツ Main_visual表示･右

パターンC：コンテンツ･メニュー1･メニュー2

コンテンツ･メニュー･メニュー Main_visual表示･中央	コンテンツ･メニュー･メニュー Main_visual表示･左

---

例えば “g_wcool01” をカスタマイズする場合

仕様比較 Original : 3カラムカスタマイズ

なるべくオリジナルデザインのサイズをそのまま活かし、オリジナルと同サイズの「メニュー2」を追加したつもりです。
さらにバックグランドを追加しました。

部位名	オリジナル仕様			カスタマイズ仕様
	width指定	% or PX	(Pixcel)	width指定	% or PX	(Pixcel)
#body	%指定	100%	(画面Size)	%指定	100%	(画面Size)
#headcopy	px指定	1000px	(1000px)	px指定	1200px	(1200px)
#wrapper	px指定	1000px	(1000px)	px指定	1200px	(1200px)
#header	px指定	1000px	(1000px)	px指定	1200px	(1200px)
#navigator	指定無	指定無	(1000px)	指定無	指定無	(1200px)
#wrap_main				px指定	1200px	(1200px)
#main	px指定	1000px	(1000px)	px指定	1000px	(1000px)
#wrap_content	%指定	80%	(800px)	px指定	800px	(800px)
#wrap_sidebar	%指定	20%	(200px)	px指定	200px	(200px)
#wrap_sidebar2				px指定	200px	(200px)
#menubar2				書式設定
#navigator2	%指定	100%	(1000px)	%指定	100%	(1200px)
#footer	%指定	100%	(1000px)	%指定	100%	(1200px)

全体のwidth及び#wrap_sidebar2は余白を考慮したサイズ

---