余白(マージン)の作り方

  1. テンプレート カスタマイズ
テンプレートに余白(マージン)の作りたいというご要望があったので、pluging_3c_01を用いて、ご紹介したいと思います。

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

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

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

pluging_3cb_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-->


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

#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 (自動で真ん中に)
<<  女の子にお薦め!キュートなテンプレートのご紹介  |  もくじへ  |  日付、 コメント、 トラックバックを非表示にする方法  >>
<<  女の子にお薦め!キュートなテンプレートのご紹介  |  ホーム  |  日付、 コメント、 トラックバックを非表示にする方法  >>

コメント

コメントの投稿

管理者にだけ表示を許可する


画像の文字を半角数字で下記ボックスに記入ください。
文字が読みにくい場合はブラウザの更新をすると新しい文字列が表示されます。

|
ブログ | 総合ポータル | ニュース | テンプレート
利用規約 | ||通報|| | Report Abuse