『02Tシリーズ』3カラムにしたい(サイドバー2つ) |
||
さて「3カラムもかっこいいけど、3カラムにしたい!」という要望があったため、
書き換え方を記しておきます。3カラムは個人的に好きなのですが、左右にいろんな情報がありますので、記事を若干見づらくしているのかなーと考えたりしています。
詳細は、つづきから(´Д` )
スポンサードリンク
HTML編集
<div id="left">
</div><!--/left-->
<br class="c-both" />
</div><!--/left_center-->
<div id="right">
<!--index_area-->
<!--/index_area-->
<!--▼▼ プラグイン カテゴリー1 ▼▼-->
<!--plugin-->
<!--plugin_first-->
<div class="plugin1_outline">
<div class="plugin1_title ta_<%plugin_first_talign>"><%plugin_first_title></div>
<div class="plugin1_body ta_<%plugin_first_align>">
<!--plugin_first_description-->
<div class="p1u_description ta_<%plugin_first_ialign>"><%plugin_first_description></div>
<!--/plugin_first_description-->
<%plugin_first_content>
<!--plugin_first_description2-->
<div class="p1d_description ta_<%plugin_first_ialign>"><%plugin_first_description2></div>
<!--/plugin_first_description2-->
</div><!--/plugin1_body -->
</div><!--/plugin1_outline-->
<!--/plugin_first-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー1 ▲▲-->
<!--▼▼ プラグイン カテゴリー2 ▼▼-->
<!--plugin-->
<!--plugin_second-->
<div class="plugin2_outline">
<div class="plugin2_title ta_<%plugin_second_talign>"><%plugin_second_title></div>
<div class="plugin2_body ta_<%plugin_second_align>">
<!--plugin_second_description-->
<div class="p2u_description ta_<%plugin_second_ialign>"><%plugin_second_description></div>
<!--/plugin_second_description-->
<%plugin_second_content>
<!--plugin_second_description2-->
<div class="p2d_description ta_<%plugin_second_ialign>"><%plugin_second_description2></div>
<!--/plugin_second_description2-->
</div><!--/plugin2_body-->
</div><!--/plugin2_outline-->
<!--/plugin_second-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー2 ▲▲-->
</div><!--/right-->
という箇所があると思うので、以下のように書き換えます。
<div id="left">
<!--▼▼ プラグイン カテゴリー1 ▼▼-->
<!--plugin-->
<!--plugin_first-->
<div class="plugin1_outline">
<div class="plugin1_title ta_<%plugin_first_talign>"><%plugin_first_title></div>
<div class="plugin1_body ta_<%plugin_first_align>">
<!--plugin_first_description-->
<div class="p1u_description ta_<%plugin_first_ialign>"><%plugin_first_description></div>
<!--/plugin_first_description-->
<%plugin_first_content>
<!--plugin_first_description2-->
<div class="p1d_description ta_<%plugin_first_ialign>"><%plugin_first_description2></div>
<!--/plugin_first_description2-->
</div><!--/plugin1_body -->
</div><!--/plugin1_outline-->
<!--/plugin_first-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー1 ▲▲-->
</div><!--/left-->
<br class="c-both" />
</div><!--/left_center-->
<div id="right">
<!--index_area-->
<!--/index_area-->
<!--▼▼ プラグイン カテゴリー2 ▼▼-->
<!--plugin-->
<!--plugin_second-->
<div class="plugin2_outline">
<div class="plugin2_title ta_<%plugin_second_talign>"><%plugin_second_title></div>
<div class="plugin2_body ta_<%plugin_second_align>">
<!--plugin_second_description-->
<div class="p2u_description ta_<%plugin_second_ialign>"><%plugin_second_description></div>
<!--/plugin_second_description-->
<%plugin_second_content>
<!--plugin_second_description2-->
<div class="p2d_description ta_<%plugin_second_ialign>"><%plugin_second_description2></div>
<!--/plugin_second_description2-->
</div><!--/plugin2_body-->
</div><!--/plugin2_outline-->
<!--/plugin_second-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー2 ▲▲-->
</div><!--/right-->
これで、HTMLの編集はおしまいです。こうすれば、プラグイン1が左側、プラグイン2が右側として現れるようになります。逆にしたければ、
<!--▼▼ プラグイン カテゴリー1 ▼▼-->から<!--▲▲ プラグイン カテゴリー1 ▲▲-->までの記述と、<!--▼▼ プラグイン カテゴリー2 ▼▼-->から<!--▲▲ プラグイン カテゴリー2 ▲▲-->までの記述とを、入れ替えてあげてください。
スタイルシート編集
/******************************************* ▼ サイトの幅 ▼ */
#outline {
min-width:1050px;
width:100%; /* 全体 */
margin:0 auto;
}
#outline_main {
width:1050px; /* 全体 */
margin:0 auto;
}
#center {
width:735px; /* 中央 */
float:right;
}
#left {
width:0px; /* 左 */
float:left;
}
#right {
width:305px; /* 右 */
float:right;
}
#center-left { /* 計算して設定してください ------ */
width:735px; /* (全体-左-中央-右)/2 + 左 + 中央 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ */
各色の値を変更してください。
例えば、
・中央(記事部分)の広さを600px
・左のサイドバーを220px
・右のサイドバーを220px
にしたい場合、
/******************************************* ▼ サイトの幅 ▼ */
#outline {
min-width:1050px;
width:100%; /* 全体 */
margin:0 auto;
}
#outline_main {
width:1050px; /* 全体 */
margin:0 auto;
}
#center {
width:600px; /* 中央 */
float:right;
}
#left {
width:220px; /* 左 */
float:left;
}
#right {
width:220px; /* 右 */
float:right;
}
#center-left { /* 計算して設定してください ------ */
width:825px; /* (全体-左-中央-右)/2 + 左 + 中央 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ */
このように書き換えることで、2カラムから3カラムに変えられるようになりました!