更新休止のお知らせ
現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。
ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。
- 2011⁄03⁄02(Wed)
- 01:02
3カラム幅固定レイアウト
当テンプレートのVer2で有効なレイアウト変更のカスタマイズ方法です。
yahooのトップページみたいに、ひと目でいろんな情報を表示させたい方向け。
yahooのトップページみたいに、ひと目でいろんな情報を表示させたい方向け。
ダウンロードして頂いたテンプレートのスタイルシート編集から、段組の設定に関する部分を見つけ出し、次のソースのように変更してください。
【解説】
#mainAreaは真ん中の記事部分
#pluginFirstAreaは左サイドのプラグイン1
#pluginSecondAreaは右サイドのプラグイン2
#allAreaは上記三つを梱包した外枠のdivとなります。
デフォルトでは
記事部分の横幅 500px
記事部分の左の余白 10px
記事部分の右の余白 10px
左サイドの横幅 200px
右サイドの横幅 280px
それらを梱包した#allAreaの横幅が 1000px
となっています。#allAreaは全ての和になりますね。
(1000 = 500 + 10 + 10 + 200 + 280)
横幅を変更するにはこれらの数字を変更していくのですが、SEOを考慮して記事部分をHTML構造の上部に持ってくる為にネガティブマージンを利用しているので、margin(マージン)の項目も変更する必要があります。
少し複雑なので順番に設定していきましょう。
①各エリアのwidth(横幅)pading(余白)を設定する
プレビューはこちら→3column_01.html
各エリアの幅を決めただけなので、設定した幅の通りに縦に表示されただけですね。
なお、灰色の部分は#allAreaとなります。
②フロートを設定する
プレビューはこちら→3column_02.html
フロートを付け足したので左にずれ、メインエリアとプラグインエリア1と2のが、横一列に並ぶようになりました。
これはこれで1つのデザインになるのですが、今回はメインエリアとプラグインエリア1の場所を入れ替えます。
③メインエリアにマージンを設定する
プレビューはこちら→3column_03.html
メインエリアにmargin-leftを付け足しました。大きさはプラグインエリア1のwidth(横幅)にしてください。
これでプラグインエリア1を配置するスペースを確保します。
④プラグインエリア1にネガティブマージンを設定する。
プレビューはこちら→3column_04.html
空いていたスペースに、プラグインエリア1がうまくはいりました!
⑤IE6対策を施す
プレビューはこちら→3column_05.html
IE6ではフロートした方向のマージンが2倍に適用されるため、インライン要素にしてそれを回避します。
IE6だけに適用させるためアンダースコアハック"_"を使っています。
IE6の閲覧なんか想定していない!方や、CSSが汚くなって嫌!と思う方は消してしまって構いません。
IE6の閲覧環境がある方はハック後と前で見比べてみてください。
以上となります。
/***************************************************************
/* 段組の設定 ------------------------------------------------*/
#allArea {
width: 1000px;
}
#headerArea {
}
#mainArea {
width: 500px;
padding-left: 10px;
padding-right: 10px;
float: left;
margin-left: 200px;
_display:inline;
}
#pluginFirstArea {
width: 200px;
float: left;
margin-left: -720px;
}
#pluginSecondArea {
width: 280px;
float: left;
}
#footerArea {
clear: both;
}
【解説】
#mainAreaは真ん中の記事部分
#pluginFirstAreaは左サイドのプラグイン1
#pluginSecondAreaは右サイドのプラグイン2
#allAreaは上記三つを梱包した外枠のdivとなります。
デフォルトでは
記事部分の横幅 500px
記事部分の左の余白 10px
記事部分の右の余白 10px
左サイドの横幅 200px
右サイドの横幅 280px
それらを梱包した#allAreaの横幅が 1000px
となっています。#allAreaは全ての和になりますね。
(1000 = 500 + 10 + 10 + 200 + 280)
横幅を変更するにはこれらの数字を変更していくのですが、SEOを考慮して記事部分をHTML構造の上部に持ってくる為にネガティブマージンを利用しているので、margin(マージン)の項目も変更する必要があります。
少し複雑なので順番に設定していきましょう。
①各エリアのwidth(横幅)pading(余白)を設定する
/***************************************************************
/* 段組の設定 ------------------------------------------------*/
#allArea {
width: 1000px;
}
#headerArea {
}
#mainArea {
width: 500px;
padding-left: 10px;
padding-right: 10px;
}
#pluginFirstArea {
width: 200px;
}
#pluginSecondArea {
width: 280px;
}
#footerArea {
clear: both;
}
プレビューはこちら→3column_01.html
各エリアの幅を決めただけなので、設定した幅の通りに縦に表示されただけですね。
なお、灰色の部分は#allAreaとなります。
②フロートを設定する
#mainArea {
width: 500px;
padding-left: 10px;
padding-right: 10px;
float: left;
}
#pluginFirstArea {
width: 200px;
float: left;
}
#pluginSecondArea {
width: 280px;
float: left;
}
#allArea {
width: 1000px;
}
プレビューはこちら→3column_02.html
フロートを付け足したので左にずれ、メインエリアとプラグインエリア1と2のが、横一列に並ぶようになりました。
これはこれで1つのデザインになるのですが、今回はメインエリアとプラグインエリア1の場所を入れ替えます。
③メインエリアにマージンを設定する
#allArea {
width: 1000px;
}
#headerArea {
}
#mainArea {
width: 500px;
padding-left: 10px;
padding-right: 10px;
float: left;
margin-left: 200px;
}
#pluginFirstArea {
width: 200px;
float: left;
}
#pluginSecondArea {
width: 280px;
float: left;
}
#footerArea {
clear: both;
}
プレビューはこちら→3column_03.html
メインエリアにmargin-leftを付け足しました。大きさはプラグインエリア1のwidth(横幅)にしてください。
これでプラグインエリア1を配置するスペースを確保します。
④プラグインエリア1にネガティブマージンを設定する。
#allArea {
width: 1000px;
}
#headerArea {
}
#mainArea {
width: 500px;
padding-left: 10px;
padding-right: 10px;
float: left;
margin-left: 200px;
}
#pluginFirstArea {
width: 200px;
float: left;
margin-left: -720px;
}
#pluginSecondArea {
width: 280px;
float: left;
}
#footerArea {
clear: both;
}
プレビューはこちら→3column_04.html
空いていたスペースに、プラグインエリア1がうまくはいりました!
⑤IE6対策を施す
#allArea {
width: 1000px;
}
#headerArea {
}
#mainArea {
width: 500px;
padding-left: 10px;
padding-right: 10px;
float: left;
margin-left: 200px;
_display:inline;
}
#pluginFirstArea {
width: 200px;
float: left;
margin-left: -720px;
}
#pluginSecondArea {
width: 280px;
float: left;
}
#footerArea {
clear: both;
}
プレビューはこちら→3column_05.html
IE6ではフロートした方向のマージンが2倍に適用されるため、インライン要素にしてそれを回避します。
IE6だけに適用させるためアンダースコアハック"_"を使っています。
IE6の閲覧なんか想定していない!方や、CSSが汚くなって嫌!と思う方は消してしまって構いません。
IE6の閲覧環境がある方はハック後と前で見比べてみてください。
以上となります。
- 関連記事
スポンサーサイト