子供、いらない

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

シンプル系二段組・横幅可変

2005-07-02 21:45:30 | junk.test.body

「シンプル系左」や「シンプル系右」のテンプレート(「クリアオレンジ左」とか「クリアブルー右」とか)ですが、「横幅が760px固定でイヤだなぁ」とか「仕方がないから横幅可変のクリアピンク左右を使っている」なんてことありませんか?

「シンプル系二段組」のテンプレートも、CSSを編集するだけで「シンプル系三段組(シンプル系左右)」と同じ様に横幅可変に変更できます。

クリアオレンジ左(横幅固定)
クリアオレンジ左(横幅固定)
シンプル系左メニュー(横幅固定)のCSS
【変更前】
/* クリアオレンジ左メニューのCSS */
  (中略)
/* ページ全体囲み */
#content{
  margin: 0px auto;
  border-right: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */
  border-left: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */
  background-color: #FFFFFF;
  text-align: left;
  width: 760px;
}
  (中略)
/* エントリー背景 */
#entry{
  float: right;
  width: 550px;
  padding: 15px 15px 15px 0px;
  overflow: hidden;
  height:100%;
}


クリアオレンジ左(横幅可変)
クリアオレンジ左(横幅可変)
シンプル系左メニュー(横幅可変)のCSS
【変更後】
/* クリアオレンジ左メニューのCSS(横幅可変) */
  (中略)
/* ページ全体囲み */
#content{
  margin: 0px auto;
  border-right: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */
  border-left: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */
  background-color: #FFFFFF;
  text-align: left;
  /* 横幅を「相対値」に変更 */
  width: 98%;
}
  (中略)
/* エントリー背景 */
#entry{
  /* 寄せ位置を「無し」に変更 */
  float: none;
  /* 横幅を「自動」に変更 */
  width: auto;
  /* 「左」余白を他と同じ値に変更 */
  padding: 15px 15px 15px 15px;
  overflow: hidden;
  height:100%;
}


クリアオレンジ右(横幅固定)
クリアオレンジ右(横幅固定)
シンプル系右メニュー(横幅固定)のCSS
【変更前】
/* クリアオレンジ右メニューのCSS */
  (中略)
/* ページ全体囲み */
#content{
  margin: 0px auto;
  border-right: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */
  border-left: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */
  background-color: #FFFFFF;
  text-align: left;
  width: 760px;
}
  (中略)
/* エントリー背景 */
#entry{
  float: left;
  width: 550px;
  padding: 15px 0px 15px 15px;
  overflow: hidden;
  height:100%;
}


クリアオレンジ右(横幅可変)
クリアオレンジ右(横幅可変)
シンプル系右メニュー(横幅可変)のCSS
【変更後】
/* クリアオレンジ右メニューのCSS(横幅可変) */
  (中略)
/* ページ全体囲み */
#content{
  margin: 0px auto;
  border-right: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */
  border-left: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */
  background-color: #FFFFFF;
  text-align: left;
  /* 横幅を「相対値」に変更 */
  width: 98%;
}
  (中略)
/* エントリー背景 */
#entry{
  /* 寄せ位置を「無し」に変更 */
  float: none;
  /* 横幅を「自動」に変更 */
  width: auto;
  /* 「右」余白を他と同じ値に変更 */
  padding: 15px 15px 15px 15px;
  overflow: hidden;
  height:100%;
}

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


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


● 2005年07月04日追記
Netscape 7.1 (日本語版、ja-JP; rv:1.4)ではレンダリングエンジンがGecko/20030624と古いせいか正しく表示されません。
# エントリ本文背景(.entryBg)が、メニュー部分にかかってしまいます。

Netscape 7.1のユーザの方はNetscape 7.2 (米語版、en-US; rv:1.7.2) Gecko/20040804やNetscape 8.0.2 (Windowsのみ 米語版、en-US; rv:1.7.5) Gecko/20050603にアップグレードすることで、正しく表示されるようになるようです。
# Netscapeのメニューが米語になってしまいますが…

勿論、Firefoxを使う方がすっきりすると思いますので、この際Firefoxにしてしまうのも手かと。



最新の画像もっと見る

コメントを投稿