うぃず FC2テンプレート

『02Tシリーズ』というのは、『02T_(名前)』という名前のテンプレートです。

さて「３カラムもかっこいいけど、３カラムにしたい！」という要望があったため、

書き換え方を記しておきます。３カラムは個人的に好きなのですが、左右にいろんな情報がありますので、記事を若干見づらくしているのかなーと考えたりしています。

詳細は、つづきから(´Д` )



スポンサードリンク


HTML編集

<div id="left">

</div><!--/left-->

<br class="c-both" />

</div><!--/left_center-->

<div id="right">
<!--index_area-->

<!--/index_area-->
<!--▼▼ プラグイン カテゴリー１ ▼▼-->
<!--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-->
<!--▲▲ プラグイン カテゴリー１ ▲▲-->

<!--▼▼ プラグイン カテゴリー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">
<!--▼▼ プラグイン カテゴリー１ ▼▼-->
<!--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-->
<!--▲▲ プラグイン カテゴリー１ ▲▲-->
</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の編集はおしまいです。こうすれば、プラグイン１が左側、プラグイン２が右側として現れるようになります。逆にしたければ、

<!--▼▼ プラグイン カテゴリー１ ▼▼-->から<!--▲▲ プラグイン カテゴリー１ ▲▲-->までの記述と、<!--▼▼ プラグイン カテゴリー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;
}
/******************************************* ▲ サイトの幅 ▲ */

このように書き換えることで、２カラムから３カラムに変えられるようになりました！

関連記事

• 『02Tシリーズ』ヘッダのリキッドレイアウトを固定にしたい
• 【スマホ】ドロップダウンメニューバーを作成したい
• 関連記事リストを任意の場所に表示したい
• 「続きを読む」を画像に変えたい
• 『02Tシリーズ』３カラムにしたい（サイドバー２つ）
• 『02Tシリーズ』プラグインメニュー（サイドバー）の位置を右から左に変えたい
• プラグイン3を記事の上に常に表示したい
• ブログタイトル名を画像に変更したい
• ブログの幅、プラグインエリアの幅を変更したい