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

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

  • #main_visual
  • #logo_image

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

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

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

 

サンプル表示

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

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使用
 

コンテンツ・メニュー

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
コンテンツ・メニュー・メニュー
メニュー・コンテンツ・メニュー Main_visual未使用/Logo_image未使用 メニュー・メニュー・コンテンツ Main_visual未使用/Logo_image未使用 コンテンツ・メニュー・メニュー Main_visual未使用/Logo_image未使用
 

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

パターンA:メニュー・コンテンツ・メニュー

メニュー・コンテンツ・メニュー
Main_visual表示・中央
メニュー・コンテンツ・メニュー
Main_visual表示・左
メニュー・コンテンツ・メニュー
Main_visual表示・右
メニュー・コンテンツ・メニュー Main_visual・中央/Logo_image未使用 メニュー・コンテンツ・メニュー Main_visual・左/Logo_image未使用 メニュー・コンテンツ・メニュー Main_visual・右/Logo_image未使用
 

パターンB:メニュー2・メニュー1・コンテンツ

メニュー・メニュー・コンテンツ
Main_visual表示・中央
メニュー・メニュー・コンテンツ
Main_visual表示・右
メニュー・メニュー・コンテンツ Main_visual・中央/Logo_image未使用 メニュー・メニュー・コンテンツ Main_visual・右/Logo_image未使用
 

パターンC:コンテンツ・メニュー1・メニュー2

コンテンツ・メニュー・メニュー
Main_visual表示・中央
コンテンツ・メニュー・メニュー
Main_visual表示・左
コンテンツ・メニュー・メニュー Main_visual・中央/Logo_image未使用 コンテンツ・メニュー・メニュー Main_visual・左/Logo_image未使用
 

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

パターンA
メニュー・コンテンツ・メニュー
パターンB
メニュー・メニュー・コンテンツ
パターンC
コンテンツ・メニュー・メニュー
メニュー・コンテンツ・メニュー Main_visual未使用/Logo_image使用 メニュー・メニュー・コンテンツ Main_visual未使用/Logo_image使用 コンテンツ・メニュー・メニュー Main_visual未使用/Logo_image使用
 

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

パターンA:メニュー・コンテンツ・メニュー

メニュー・コンテンツ・メニュー
Main_visual表示・中央
メニュー・コンテンツ・メニュー
Main_visual表示・左
メニュー・コンテンツ・メニュー
Main_visual表示・右
メニュー・コンテンツ・メニュー Main_visual・中央/Logo_image使用 メニュー・コンテンツ・メニュー Main_visual・左/Logo_image使用 メニュー・コンテンツ・メニュー Main_visual・右/Logo_image使用
 

パターンB:メニュー2・メニュー1・コンテンツ

メニュー・メニュー・コンテンツ
Main_visual表示・中央
メニュー・メニュー・コンテンツ
Main_visual表示・右
メニュー・メニュー・コンテンツ Main_visual・中央/Logo_image使用 メニュー・メニュー・コンテンツ Main_visual・右/Logo_image使用
 

パターンC:コンテンツ・メニュー1・メニュー2

コンテンツ・メニュー・メニュー
Main_visual表示・中央
コンテンツ・メニュー・メニュー
Main_visual表示・左
コンテンツ・メニュー・メニュー Main_visual・中央/Logo_image使用 コンテンツ・メニュー・メニュー Main_visual・左/Logo_image使用
 

例えば “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は余白を考慮したサイズ

 

コメントは受け付けていません。