2カラムと3カラムのデザインに、QHMで使用可能な
- #main_visual
- #logo_image
を組み合わせた使用方法をサンプル表示します。
メインビジュアルは2カラムの横のサイズと同じ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は余白を考慮したサイズ