テンプレートのレイアウトと横幅の変更

  1. テンプレート カスタマイズ
2カラムと3カラムのレイアウト

テンプレートの枠を組む際、HTML内にdivと呼ばれるタグを使ってブロックを囲んでいきます。このマニュアルで紹介しているテンプレートは、基本的に下記のような構成になっています。

2カラム



3カラム

3カラムパターン2 (pluging_3cとpluging_3d)





横幅の変更

横幅の指定は、スタイルシートを編集します。例えば、3カラムのテンプレートで左右のカラム(#rightと#left)の横幅変更するには、#right #left #container #footerの4箇所を変更する必要があります。
(3カラムパターン2は、#right #left #wrapper #container #footerの5箇所を変更)

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

デザインの編集>修正>スタイルシートより、#right #left #containerの3箇所を順に探して下さい

(pluging_3a_01の場合)

#container {
width: 960px;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
line-height: 18px;
}

#left {
float: left;
width: 180px;
display: inline;
margin-right: 16px;
overflow: hidden;
}

#right {
float: left;
width: 220px;
display: inline;
margin-left: 16px;
overflow: hidden;
}

#footer {
width: 928px;
margin: 0 auto;
clear: both;
padding: 16px;
overflow: hidden;
background: url(http://1.dtiblog.com/template/pluging_3a_01/image/footer.gif) repeat-x top;
text-align: center;
}


width: OOpx;が横幅になります。お好きな数字を入力して下さい

例)

#container {
width: 1100px;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
line-height: 18px;
}

#containerの横幅は、#leftで増やした100pxと#rightで増やした40pxを足した数字になります。
960+100+40=1100

#left {
float: left;
width: 280px;
display: inline;
margin-right: 16px;
overflow: hidden;
}

#right {
float: left;
width: 260px;
display: inline;
margin-left: 16px;
overflow: hidden;
}

#footer {
width: 1068px;
margin: 0 auto;
clear: both;
padding: 16px;
overflow: hidden;
background: url(http://1.dtiblog.com/template/pluging_3a_01/image/footer.gif) repeat-x top;
text-align: center;
}

#footerの横幅は、#leftで増やした100pxと#rightで増やした40pxを足した数字になります。
928+100+40=1068

更新ボタンをクリック



マメ知識

先にご紹介したコードは、ブロック名の前に#がついているのに気付かれた方も多いかと思います。divタグは、各ブロックごとに自分で好きな名前が付けれて、そのブロックをどのように装飾するのか、スタイルシート(CSS)で編集出来ます。

#名前
idと呼ばれ、指定したブロックにスタイルを適用させます。1つのHTML内に同じ名前のidを複数使用する事は出来ません。

HTMLファイル ----------------------------------------------------

<div id="container">...</div>

---------------------------------------------------------------

CSSファイル ----------------------------------------------------

#container { ... }

---------------------------------------------------------------

.名前
classと呼ばれ、指定したブロックにスタイルを適用させます。1つのHTML内に同じ名前のclassを何度でも使用出来ます。

HTMLファイル ----------------------------------------------------

<div class="menubox">...</div>

---------------------------------------------------------------

CSSファイル ----------------------------------------------------

.menubox { ... }

---------------------------------------------------------------

こちらのページでは、スタイルシートの基本的な知識が大変わかりやすく説明してありますので、ぜひ参考にして下さい。
<<  背景色・背景画像の変え方  |  もくじへ  |  テンプレカスタマイズの前に  >>
<<  背景色・背景画像の変え方  |  ホーム  |  テンプレカスタマイズの前に  >>

コメント

横幅の自動可変

横幅を変える設定を見てもわからなかったのですが、
3カラムの両側にサイドバーがあるテンプレートで、
真ん中の記事部分のみを自動可変するにはどうしたらいいのでしょうか?

「auto」を指定すればいいのかなとまではわかったのですが
それをどこに指定すればいいのかがわかりませんでした。
よろしければご助言お願い致します。
  1. 2008/07/04(金) 16:50:09 |
  2. URL |
  3. 紅葉 #-
  4. [ 編集]

>紅葉様:中央カラムの幅の調節

3カラムの中央カラムのサイズをautoにする場合、
/* 中央カラム */
#main {
float: left;
width: 516px;
overflow: hidden;
}
のwidth:をautoにしてください。
width: 516px;の代わりに

max-width: 516px;
min-width: 200px;
と書くと最大幅が516px,最小幅が200pxの範囲で
自動調節します。
  1. 2008/07/19(土) 07:09:00 |
  2. URL |
  3. DTIブログスタッフ #-
  4. [ 編集]

横幅

お世話になります。
昨日よりページ管理しておりますが、横幅の拡張がうまくいきません。
薄識で申し訳ありませんがご指導ください。

テンプレートは現在 adult_green_02を使用しております。
これを1100程度に拡張したいのですが、

/*head要素 */
#headBlock1 {
height: 87px;
width: 800px;
background-image: url(http://9.dtiblog.com/template/adult_green_02/image/header.jpg);
}
#headBlock2 {
margin: 0px;
padding: 0px;
height: 187px;
width: 800px;
background-image: url(http://9.dtiblog.com/template/adult_green_02/image/header_04.jpg);
}


まず、header部分の
ここにある800px; というところは2か所変更が必要とは思うのですが、

そうするとheaderに2枚目の左側部分が右余白に一部分だけ出てきます。

これはどこに問題があるのでしょうか?
  1. 2008/08/08(金) 12:55:29 |
  2. URL |
  3. neo #-
  4. [ 編集]

スライドさせたい。

今、pluging_3d_01を使っているんですが、
サイドメニューを2つも左にスライドさせたい+トップページだけ表示するのと、記事ページとカテゴリーの日付の削除をしたいんです。

どうしたらいいんでしょうか?
よろしくお願いします。

  1. 2009/01/30(金) 20:29:00 |
  2. URL |
  3. affilico #-
  4. [ 編集]

pluging_3d_01左メニュー移動方法

affilico様
右カラムと左カラムの入れ替えに関しては、こちらのページで手順を詳しく説明していますので、参考にして下さい。
http://blogmanual.dtiblog.com/blog-entry-90.html
お使いのpluging_3d_01でも#wrapperと#leftのfloatプロパティの値を変更して頂くだけで可能です。
#left {
float: right;
・・・

#wrapper {
float: left;
・・・

日付の削除ですが、pluging_3d_01のテンプレートは下記のような変数で表示させています。
<%topentry_year><%topentry_month><%topentry_day><%topentry_youbi><%topentry_hour><%topentry_minute>:<%topentry_second>
日付を表示させなくなると、この行自体が必要なくなりますので、下記のタグ全てを削除して下さい。
<p class="date"><strong><%topentry_year>-<%topentry_month>-<%topentry_day></strong> <%topentry_youbi> <%topentry_hour>:<%topentry_minute>:<%topentry_second></p>
  1. 2009/03/17(火) 01:12:15 |
  2. URL |
  3. DTIブログ管理人 #-
  4. [ 編集]

カラム3をセンター上部に移動したい

アフィリエイトテンプレートのadult_affil_03を使用しています
プラグイン3をセンター上部に移動させたいのですが
方法があれば教えていただきたいです。

よろしくお願いします。
  1. 2011/01/05(水) 04:23:55 |
  2. URL |
  3. makoto #-
  4. [ 編集]

カラム3をセンター上部へ移動するには

<!--plugin_third-->〜<!--/plugin_third-->の全てを
<div id="contents">
<!-- primary-column -->
の下に移動してみて下さい。

※編集の際はテンプレートのコピーをまずはお忘れなく!
  1. 2011/01/06(木) 07:07:19 |
  2. URL |
  3. DTIブログ管理人 #-
  4. [ 編集]

pluging_3c_01について

只今、pluging_3c_01をカスタマイズ中です。

横幅及び、左右の位置、左右カラムの上下の間隔等は思うように変更できたのですが、

wrapper内の調整が上手く出来ません。
・ヘッダーとカテゴリ3との隙間の間隔を詰めたい。
・カテゴリ3同士の間隔を詰めたい。
・カテゴリ3内の上下左右の空白の間隔を詰めたい。

宜しくお願いいたします。
  1. 2011/02/19(土) 01:14:57 |
  2. URL |
  3. pj #-
  4. [ 編集]

pluging_3c_01について

※下記を実行する前に必ずテンプレートのコピーをお願いします!

・ヘッダーとカテゴリ3との隙間の間隔を詰めたい
→スタイルシート内の#masterheadのpaddingとheightの2箇所編集して下さい。

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

・カテゴリ3同士の間隔を詰めたい。
→スタイルシート内.entryのmarginを編集して下さい。

.entry {
margin: 0;
color: #555555;
background: #ffffff;
}

・カテゴリ3内の上下左右の空白の間隔を詰めたい。
→topcontentとentrybodyのpaddingを編集して下さい。

.topcontent {
padding: 0;
background: #ffffff;
}
.entrybody {
padding: 0;
}
  1. 2011/02/19(土) 13:32:45 |
  2. URL |
  3. DTIブログ管理人 #-
  4. [ 編集]

pluging_3c_01について

DTIブログ管理人 様、回答有難うございました。
何とか、私の思うようなカスタマイズが出来てきました。
もう少しです。

有難うございました。
  1. 2011/02/23(水) 15:01:38 |
  2. URL |
  3. pj #-
  4. [ 編集]

コメントの投稿

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


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

トラックバック

トラックバックURLはこちら
http://blogmanual.dtiblog.com/tb.php/92-99eaa769
|
ブログ | 総合ポータル | ニュース | テンプレート
利用規約 | ||通報|| | Report Abuse