「シンプル系左右」のテンプレート(「クリアホワイト左右」とか「クリアグレー左右」とか)ですが、「横幅可変でイヤだなぁ」とか「仕方がないから横幅固定のクリアパープル右を使っている」なんてことありませんか?
「シンプル系三段組」のテンプレートも、CSSを編集するだけで「シンプル系二段組(シンプル系左やシンプル系右)」と同じ様に横幅固定に変更できます。
クリアオレンジ左右(横幅可変) シンプル系左右メニュー(横幅可変)のCSS 【変更前】 |
---|
/* クリアオレンジ左右メニューのCSS */ (中略) /* ページ全体の背景と余白 */ body { background-image: url(); background-repeat: ; background-position: ; margin:0px; padding:0px 20px; background-color:#FFF4E1; /* 色はクリアオレンジの場合 */ } (中略) /* ページ全体囲み */ #content{ color: #333; margin: 0px; border-right: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */ border-left: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */ background-color: #FFFFFF; _height: 100%; } |
↓
クリアオレンジ左右(横幅固定) シンプル系左右メニュー(横幅固定)のCSS 【変更後】 |
---|
/* クリアオレンジ左右メニューのCSS(横幅固定) */ (中略) /* ページ全体の背景と余白 */ body { background-image: url(); background-repeat: ; background-position: ; margin:0px; padding:0px 5px; /* 横余白を減らす */ background-color:#FFF4E1; /* 色はクリアオレンジの場合 */ } (中略) /* ページ全体囲み */ #content{ color: #333; margin: 0px auto; /* 左右の隙間:自動(中央寄せ) */ width: 940px; /* 横幅固定に変更 */ border-right: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */ border-left: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */ background-color: #FFFFFF; _height: 100%; } |
横幅の値(940px)や横余白の値(5px)は一例ですので、お好みの値を指定してください。
また、この記事と「シンプル系・メニュー逆配置」のCSSカスタマイズと組み合わせることで、「シンプル系三段組・横幅固定・メニュー逆配置」を実現できます。
この方法で変更できるテンプレート(対象テンプレート)は、以下の通り。
質問 [702] 左右メニューのカスタマイズ - gooブログサークル
シンプル系・メニュー逆配置 2005年05月21日00:06
(シンプル系左右メニューで左メニューと右メニューの位置を入換える例)
シンプル系三段組・横幅固定 2006年05月15日23:07
(シンプル系左右メニューで横幅を固定にする例:本記事)
シンプル系二段組・横幅可変 2005年07月02日21:45
(シンプル系左メニューまたはシンプル系右メニューで横幅を可変にする例)
シンプル系二段組・メニュー簡素化(幅固定) 2005年12月02日00:07
(シンプル系左メニューまたはシンプル系右メニューでメニューを簡素化する例、横幅は固定)
シンプル系二段組・メニュー簡素化 2005年07月18日00:07
(シンプル系左メニューまたはシンプル系右メニューでメニューを簡素化する例、横幅は可変)