シンプル系二段組・メニュー簡素化(幅固定)

シンプル系二段組テンプレート（クリアパープル左やクリアピンク右など）で、メニューを簡素化するためのCSS編集サンプルで、横幅は固定になります。
横幅可変の方が良い場合は、「シンプル系二段組・メニュー簡素化」の記事をご覧ください。

「goo ブログ」の項目 メニューにある「goo ブログ」の項目って、ブログ閲覧者には関係ないしgooブログ開設者も他の手段で「編集画面」に遷移できるので、上の方にあるのに使用頻度は低いですよね？

ということでCSS編集だけ（HTML編集なし）で、「goo ブログ」を左メニュー／右メニューから消してしてみました。副作用として「gooおすすめリンク」と「携帯」も一緒に消えてしまいますが、一応「メニュー簡素化」ということで許してください。

とはいってもメニューの項目単位の表示／非表示をHTML編集なしでできる訳ではなく、「シンプル系左右（三段組）」のテンプレート（「クリアグレー左右」とか「クリアブルー左右」とか）の「menu1（左メニュー）を表示しない」ことで同じ効果を得ようというものです。

変更手順は以下の通り。

1. シンプル系左右のメニューに変更する
   「ブログ > 編集画面 > テンプレートジャンルの選択 > テンプレートの選択」の画面で、ジャンル【シンプル】にある同色左右のテンプレートを選択する。
   この例では、「クリアオレンジ左右」を選択します。
   
   
2. CSSを編集する
   「ブログ > 編集画面 > CSS(スタイルシート）の編集」の画面でCSSを変更する。
   変更（修正・追加）箇所は、以下の通り。
   

   /* クリアオレンジ左右メニューのCSSベース左簡素メニュー（横幅固定） */
     （中略）
   /* ページ全体の囲み */
   #content {
     color: #333;
     margin: 0px auto; /* 左右の隙間：自動（中央寄せ） */
     width: 760px; /* 横幅固定に変更 */
     border-right: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */
     border-left: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */
     background-color: #FFFFFF;
     _height: 100%;
   }
     （中略）
   /* エントリーの背景 */
   #entry {
     _height:100%;
     margin-left: 195px; /* 左の隙間 */
     margin-right: 15px; /* 右の隙間 */
     padding-top:10px;
   }
     （中略）
   /* 左メニュー背景 */
   #menu1 {
     float:left;
     width:180px;
     display: none; /* 「□gooブログ」など非表示 */
   }
     （中略）
   /* 右メニュー背景 */
   #menu2 {
     float: left; /* 左に配置 */
     width: 190px; /* 横幅 */
     /* 右メニュー背景にQRコード画像を追加 */
     /* 画像の高さの余白を下部に追加 */
     padding-bottom: 82px;
     /* あなたのQRコード画像のURL */
     background-image:
       url("http://blogimg.goo.ne.jp/あなたのgooID/qrcode.png");
     /* 下部中央に配置 */
     background-position: center bottom;
     /* 画像は、繰り返し無し */
     background-repeat: no-repeat;
   }

   
   

   /* クリアオレンジ左右メニューのCSSベース右簡素メニュー（横幅固定） */
     （中略）
   /* ページ全体の囲み */
   #content {
     color: #333;
     margin: 0px auto; /* 左右の隙間：自動（中央寄せ） */
     width: 760px; /* 横幅固定に変更 */
     border-right: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */
     border-left: 1px solid #FFD57D; /* 色はクリアオレンジの場合 */
     background-color: #FFFFFF;
     _height: 100%;
   }
     （中略）
   /* エントリーの背景 */
   #entry {
     _height:100%;
     margin-left: 15px; /* 左の隙間 */
     margin-right: 195px; /* 右の隙間 */
     padding-top:10px;
   }
     （中略）
   /* 左メニュー背景 */
   #menu1 {
     float:left;
     width:180px;
     display: none; /* 「□gooブログ」など非表示 */
   }
     （中略）
   /* 右メニュー背景 */
   #menu2 {
     float:right;
     width: 190px; /* 横幅 */
     /* 右メニュー背景にQRコード画像を追加 */
     /* 画像の高さの余白を下部に追加 */
     padding-bottom: 82px;
     /* あなたのQRコード画像のURL */
     background-image:
       url("http://blogimg.goo.ne.jp/あなたのgooID/qrcode.png");
     /* 下部中央に配置 */
     background-position: center bottom;
     /* 画像は、繰り返し無し */
     background-repeat: no-repeat;
   }

   ＃ 横幅可変と「#content」がちょっと違うだけというのは内緒
   

この方法で変更できるテンプレート（ベースにするテンプレート）は、以下の通り。

• クリアオレンジ左右
• クリアグレー左右
• クリアパープル左右
• クリアピンク左右
• クリアブルー左右
• クリアホワイト左右
• クリアミント左右（わは）

横幅可変の方が良い場合は、「シンプル系二段組・メニュー簡素化」の記事をご覧ください。

---

質問 [702] 左右メニューのカスタマイズ - gooブログサークル
シンプル系二段組・メニュー簡素化(幅固定) 2005年12月02日00:07
　（シンプル系左メニューまたはシンプル系右メニューでメニューを簡素化する例、横幅は固定：本記事）
シンプル系二段組・メニュー簡素化 2005年07月18日00:07
　（シンプル系左メニューまたはシンプル系右メニューでメニューを簡素化する例、横幅は可変）
シンプル系・メニュー逆配置 2005年05月21日00:06
　（シンプル系左右メニューで左メニューと右メニューの位置を入換える例）
シンプル系三段組・横幅固定 2006年05月15日23:07
　（シンプル系左右メニューで横幅を固定にする例）
シンプル系二段組・横幅可変 2005年07月02日21:45
　（シンプル系左メニューまたはシンプル系右メニューで横幅を可変にする例）

---

トラックバックしました。
【CSS】スクロールバーを追加 - BLUE_SKY_BLOG 2005年11月28日18:31