子供、いらない

はりょ。少子化問題とは関係ありません。
カウンタが345678やその付近の方はベースノートに書き込んでね。

シンプル系・メニュー逆配置

2005-05-21 00:06:16 | junk.test.body

「シンプル系左右」のテンプレート(「クリアオレンジ左右」とか「クリアブルー左右」とか)ですが、「カレンダを左にしたいな」なんて思ったことありませんか?

「シンプル系左右」のメニューは、左右の位置逆転なら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;
}

この方法で変更できるテンプレート(対象テンプレート)は、以下の通り。


↑B質問 [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
 (シンプル系左メニューまたはシンプル系右メニューでメニューを簡素化する例、横幅は可変)



最新の画像もっと見る

コメントを投稿