シンプル系二段組・メニュー簡素化

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

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

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

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

変更手順は以下の通り。

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

   /* クリアオレンジ左右メニューのCSSベース左簡素メニュー（横幅可変） */
     （中略）
   /* エントリーの背景 */
   #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ベース右簡素メニュー（横幅可変） */
     （中略）
   /* エントリーの背景 */
   #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
　（シンプル系左メニューまたはシンプル系右メニューで横幅を可変にする例）