KAZUHIRO.SWIM

１・構造図から当たりをつける。

２・ＣＳＳの修正

このテンプレートの幅は900ですので、合計で900になるように自由に設定できます。今回は、左右のサイドメニューの幅を200、記事の幅を500としました。

まずは、エントリー部分の「#e-zone」を探してください。見つけたら、以下のように修正します。
赤字の部分が追加箇所で、左に寄せて幅を500に固定しました。

#e-zone{
      　　　　　 width: 500px;
                     float: left;
                    overflow:hidden;
}

次に、左サイド部分の「#menu」を探してください。見つけたら、以下のように修正します。
赤字の部分が追加箇所、桃色の部分が変更箇所です。
幅を200にして、右サイドメニュー「#menu2」を新たに追加しました。「#menu」および「#menu2」のfloatの右左のみ注意してくさい。後はコピペです。

#menu{
                  text-align:center;
                  width: 200px;
                  float: left;
                  overflow: hidden;
                  margin: 0;
                  border: 0px solid #fff;
                  background-color: #000;
                  background-image:url("");
  　　　　　   background-repeat:repeat;
                  background-position:top;
}
#menu2{
　　　　　　　  text-align:center;
                     width: 200px;
                    float: right;
                     overflow: hidden;
                    margin: 0;
                     border: 0px solid #fff;
                     background-color: #000;
                     background-image:url("");
                      background-repeat:repeat;
  　　　　　　　 background-position:top;
}
#menu h3{
                     color:#59439A;
                     font-size: 100%;
                     padding: 5px;
                     margin: 0;
                     border: 0px solid #fff;
                     background-color: ;
                     background-image: url("");
                     background-repeat: repeat;
}
#menu ul{
                    font-size: 90%;
                    padding: 5px;
                    margin: 0;
                    list-style-type: none;
}
#menu li{
                    margin-bottom: 5px;
}
#menu2 h3{
                      color:#59439A;
                      font-size: 100%;
                      padding: 5px;
  　　　　　　　 margin: 0;
                      border: 0px solid #fff;
                      background-color: ;
                      background-image: url("");
                      background-repeat: repeat;
}
#menu2 ul{
                     font-size: 90%;
                     padding: 5px;
                      margin: 0;
                      list-style-type: none;
}
#menu2 li{
                     margin-bottom: 5px;
}

以上で、CSSの修正・変更は終了です。

３・HTMLの修正

まずはHTMLの以下の赤字部分を切り取ってください。
切り取る部分はplugin2から4までの部分です。

<div id = "main">
<div id = "menu">
<!--plugin-->
<!--plugin1-->
<h3 align = "<!--$plugin_title_align-->" title="<!--$plugin_header_explanation-->"><!--$plugin_title-->
</h3>
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<!--$plugin_data-->
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<!--/plugin1-->
<!--plugin2-->
<h3 align = "<!--$plugin_title_align-->" title="<!--$plugin_header_explanation-->"><!--$plugin_title-->
</h3>
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<!--$plugin_data-->
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<!--/plugin2-->
<!--plugin3-->
<h3 align = "<!--$plugin_title_align-->" title="<!--$plugin_header_explanation-->"><!--$plugin_title-->
</h3>
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<!--$plugin_data-->
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<!--/plugin3-->
<!--plugin4-->
<h3 align = "<!--$plugin_title_align-->" title="<!--$plugin_header_explanation-->"><!--$plugin_title-->
</h3>
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<!--$plugin_data-->
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<!--/plugin4-->
<!--/plugin-->
</div>
<div id="e-zone">

次に、HTMLの一番下の方にある<!--leftEND-->という記述を探してください。
下記のように</div>を削除し、<!--leftEND-->の下に先ほど切り取った部分を貼り付けます。

</td></tr></table>
</div>　　　　　　　　←ココを消します。
<!--leftEND-->
←ココに切り取った部分を貼り付けます。
<div id="footer"><!--CM1-->&nbsp; / &

すると、次の図のようになります。桃色の部分が貼りつけた部分、赤色はあらたに加えた部分です。

<!--leftEND-->
<!--右サイドメニュー追加-->
<div id = "menu2">
<!--plugin-->
<!--plugin2-->
<h3 align = "<!--$plugin_title_align-->" title="<!--$plugin_header_explanation-->"><!--$plugin_title-->
</h3>
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<!--$plugin_data-->
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<!--/plugin2-->
<!--plugin3-->
<h3 align = "<!--$plugin_title_align-->" title="<!--$plugin_header_explanation-->"><!--$plugin_title-->
</h3>
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<!--$plugin_data-->
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<!--/plugin3-->
<!--plugin4-->
<h3 align = "<!--$plugin_title_align-->" title="<!--$plugin_header_explanation-->"><!--$plugin_title-->
</h3>
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_header_explanation-->
</div>
<!--$plugin_data-->
<div style="text-align:<!--$plugin_explanation_align-->">
<!--$plugin_footer_explanation-->
</div>
<!--/plugin4-->
<!--/plugin-->
</div>
<!--右サイドメニュー追加ここまで-->
</div>

• 11/13/19:25
• カスタマイズ
• CM：4
• TB：0
• 


•