テンプレートに余白（マージン）の作りたいというご要望があったので、pluging_3c_01を用いて、ご紹介したいと思います。

pluging_3c_01は、左右のカラムを入れ替えやすいように、上部にあるヘッダーとプラグイン３の右側には、マージンを設定していません。変更方法は何通りかありますが、今回は最もコードの編集が必要のないやり方をご紹介したいと思います。

カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集＞修正＞スタイルシートより #masterhead を探して下さい

pluging_3ｃb_01

#masterhead {
margin: 0 auto;
background: url(http://1.dtiblog.com/template/pluging_3c_01/image/header.gif) repeat-x;
padding: 10px 0 10px 10px;
overflow: hidden;
height: 101px;
}

デザインの編集＞修正＞HTMLより <!--plugin_third--> を探して下さい

<!--plugin_third-->
<div class="entry">
<!--<h3 style="text-align:<%plugin_third_talign>;"><%plugin_third_title></h3>-->
<div class="entrybody">
<div class="topcontent">
<p style="text-align:<%plugin_third_ialign>;"><%plugin_third_description></p>
<div style="text-align: <%plugin_third_align>;" class="plugincontent"><%plugin_third_content></div>
<p style="text-align:<%plugin_third_ialign>;"><%plugin_third_description2></p>
</div>
</div>
</div>
<!--/plugin_third-->

編集箇所は下記の２箇所です。

#masterhead {
margin: 0 10px 0 auto;
background: url(http://1.dtiblog.com/template/pluging_3c_01/image/header.gif) repeat-x;
padding: 10px 0 10px 10px;
overflow: hidden;
height: 101px;
}

marginのプロパティ値を列挙に関する詳しい説明は、「続きを読む」からどうぞ


<!--plugin_third-->
<div class="entry" style="margin-right: 10px;">
<!--<h3 style="text-align:<%plugin_third_talign>;"><%plugin_third_title></h3>-->
<div class="entrybody">
<div class="topcontent">
<p style="text-align:<%plugin_third_ialign>;"><%plugin_third_description></p>
<div style="text-align: <%plugin_third_align>;" class="plugincontent"><%plugin_third_content></div>
<p style="text-align:<%plugin_third_ialign>;"><%plugin_third_description2></p>
</div>
</div>
</div>
<!--/plugin_third-->

更新ボタンをクリックして完成です

---

marginのプロパティ値を列挙している場合は、上から時計回りと考えて下さい。つまり、margin: 0 10px 0 autoの例ですと次のようになります

上部のマージン設定 0
右側のマージン設定 10px
下部のマージン設定 0
左側のマージン設定 auto （自動で真ん中に）