うぃず FC2テンプレート

要望があったため、プラグインメニューバー（サイドバー）を右から左に移す方法を記しておきます。

せっかくお気に入りのテンプレートを発見しても、プラグインメニューの位置が気に入らなければ、使いもんにならなくなってしまいますよね。

そんな人のために('∀`)



スポンサードリンク


【テンプレートの設定】→【02T_White（の編集をクリック）】→【02T_White のHTML編集】を見てください。

①、02T_White の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-->
<!--▲▲ プラグイン カテゴリー１ ▲▲-->

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

<br class="c-both" />

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

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

<!--/index_area-->

</div><!--/right-->

②、次に02T_White1 のスタイルシート編集します。

/******************************************* ▼ サイトの幅 ▼ */
#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;
}
/******************************************* ▲ サイトの幅 ▲ */

上記の記述を以下のように書き換えてください。

/******************************************* ▼ サイトの幅 ▼ */
#outline {
min-width:1050px;
width:100%; /* 全体 */
margin:0 auto;
}
#outline_main {
width:1050px; /* 全体 */
margin:0 auto;
}
#center {
width:735px; /* 中央 */
float:right;
}
#left {
width:305px; /* 左 */
float:left;
}
#right {
width:0px; /* 右 */
float:right;
}
#center-left { /* 計算して設定してください ------ */
width:1045px; /* (全体-左-中央-右)/2 + 左 + 中央 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ */

これで、プラグインメニュー（サイドバー）を右から左、あるいは左から右に変えることだって可能になりますね。

関連記事

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