「シンプル系左右」のテンプレート(「クリアオレンジ左右」とか「クリアブルー左右」とか)ですが、「カレンダを左にしたいな」なんて思ったことありませんか?
「シンプル系左右」のメニューは、左右の位置逆転ならCSSの編集だけで簡単にできます。
通常配置のCSS【変更前】 (左に「gooブログ」、中央に「記事」、右に「カレンダー」) |
---|
クリアオレンジ左右(通常配置) /* クリアオレンジ左右メニューのCSS */ (中略) /* エントリーの背景 */ #entry{ _height:100%; margin-left:180px; margin-right:190px; padding-top:10px; } (中略) /* 左メニュー背景 */ #menu1 { float:left; width:180px; } (中略) /* 右メニュー背景 */ #menu2 { float:right; width:180px; } |
逆配置のCSS【変更後】 (左に「カレンダー」、中央に「記事」、右に「gooブログ」) |
---|
クリアオレンジ左右(逆配置) /* クリアオレンジ左右メニューのCSS(メニュー逆配置) */ (中略) /* エントリーの背景 */ #entry{ _height:100%; margin-left:180px; margin-right:190px; padding-top:10px; } (中略) /* 左メニュー背景 */ #menu1 { float: right; /* 右に配置 */ width:180px; } (中略) /* 右メニュー背景 */ #menu2 { float: left; /* 左に配置 */ width:180px; } |
調子にのった配置のCSS【変更後】 (左に「記事」、中央に「カレンダー」、右に「gooブログ」) |
---|
クリアオレンジ左右(右寄せ) /* クリアオレンジ左右メニューのCSS(メニュー右寄せ) */ (中略) /* エントリーの背景 */ #entry{ _height:100%; margin-left: 15px; /* 左の隙間 */ margin-right: 360px; /* 右の隙間 */ padding-top:10px; } (中略) /* 左メニュー背景 */ #menu1 { float: right; /* 右に配置 */ width:180px; } (中略) /* 右メニュー背景 */ #menu2 { float:right; width:180px; } |
この方法で変更できるテンプレート(対象テンプレート)は、以下の通り。
質問 [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
(シンプル系左メニューまたはシンプル系右メニューでメニューを簡素化する例、横幅は可変)