スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[ --/-- ] スポンサー広告 | トラックバック(-) | コメント(-)

Q.記事の幅とサイドバーの幅を変更して全体の幅を変更したい[2左]

A.
標準の幅から以下のように変更してみます。

記事の幅 : 550px → 410px
サイドバーの幅 : 240px → 180px
全体の幅 : 800px → 600px
フリースキンpink 2カラムの標準幅を青文字で、例として変更する幅をピンク文字にしてます。
上の記事幅とサイドバー幅の数字を合計しても全体の幅に10px足りませんが、それは記事とサイドバーの間の余白(スペース)部分になります。

※サイドバーの幅を160px以上に設定するようにヤプログからアナウンスされているので、160px以下にはしないようにしましょう。

スタイルシートを変更するとできます。
以下、変更方法


1.
スタイルシートの
108~138行目付近
#container_top {
width:
800px;
padding:0px;
margin:0px;
border-top:#FF9999 1px solid;
border-right:#FF9999 1px solid;
border-bottom:#FF9999 1px solid;
border-left:#FF9999 1px solid;
background:#FFFFFF;
}
#main {
width
:800px;
padding-top:10px;
}
#cont {
width:
550px;
float:right;
text-align:left;
}
#center {
width:
550px;
}
#left {
width:
240px;
float:left;
text-align:left;
}


145~150行目付近
.sb {
width:
240px;
font-size:12px;
word-break:break-all;
overflow:hidden;
}


179~183行目付近
#head {
margin:0px auto 20px auto;
width:
800px;
text-align:left;
}


234~240行目付近
.entry {
margin-bottom:30px;
width:
550px;
border-top: #FF9999 1px solid;
border-bottom: #FF9999 1px solid;
border-left: #FF9999 1px solid;
}


292~298行目付近
.txt {
padding:3px 0px 10px 20px;
line-height:1.5em;
overflow:hidden;
width:
490px;
font-size:12px;
}


375~377行目付近
#comment_preview {
width:
260px;
}


381~383行目付近
.side {
width:
240px;
}


408~410行目付近
.func {
width:
240px;
}


511~514行目付近
#foot {
width:
780px;
padding:10px 0px 5px 0px;
}

と、いうのがあります。

2.
1.の青文字を
800px600px
550px410px
240px180px
490px350px
260pxauto
780px580px
とそれぞれ変更します。

3.
1.
2の数値に実際際に変更してみると
スタイルシートの
108~138行目付近
#container_top {
width:
600px;
padding:0px;
margin:0px;
border-top:#FF9999 1px solid;
border-right:#FF9999 1px solid;
border-bottom:#FF9999 1px solid;
border-left:#FF9999 1px solid;
background:#FFFFFF;
}
#main {
width
:600px;
padding-top:10px;
}
#cont {
width:
410px;
float:right;
text-align:left;
}
#center {
width:
410px;
}
#left {
width:
180px;
float:left;
text-align:left;
}


145~150行目付近
.sb {
width:
180px;
font-size:12px;
word-break:break-all;
overflow:hidden;
}


179~183行目付近
#head {
margin:0px auto 20px auto;
width:
600px;
text-align:left;
}


234~240行目付近
.entry {
margin-bottom:30px;
width:
410px;
border-top: #FF9999 1px solid;
border-bottom: #FF9999 1px solid;
border-left: #FF9999 1px solid;
}


292~298行目付近
.txt {
padding:3px 0px 10px 20px;
line-height:1.5em;
overflow:hidden;
width:
350px;
font-size:12px;
}


375~377行目付近
#comment_preview {
width:
auto;
}


381~383行目付近
.side {
width:
180px;
}


408~410行目付近
.func {
width:
180px;
}


511~514行目付近
#foot {
width:
580px;
padding:10px 0px 5px 0px;
}

このようになります。

4.
スタイルシートの一番下に
.message .txt { width:auto; }
を書き加えます。

5.
1記事テンプレートの
76行目付近
<td><input type="text" name="tbField" value="{$BlogEntryTrackbackLink$}"size="40" class="ipt m" style="width:380px;"></td>

100~101行目付近
<td class="right"><label for="author">名前:</label></td>
<td><td><input type="text" name="author" id="author"value="{$CommentValueAuthor$}" class="ipt m" style="width:
380px;ime-mode:active;"></td>

108~109行目付近
<td class="right"><label for="email">メール:</label></td>
<td><input type="text" name="email" id="email"value="{$CommentValueEmail$}" class="ipt m" style="width:
380px;ime-mode:inactive;"></td>

116~117行目付近
<td class="right"><label for="url">URL:</label></td>
<td><input type="text" name="url" id="url" value="{$CommentValueUrl$}" class="ipt m" style="width:
380px;ime-mode:inactive;"></td>

129~130行目付近
<td class="right vtop"><label for="comment">コメント:</label></td>
<td><textarea name="comment" id="comment"rows="10" wrap="soft" class="ipt m" style="width:
380px;ime-mode:active;">{$CommentValueComment$}</textarea></td>
というのがあります。

6.
5.
の青文字を 380px240px と変更します。

7.
5.
6.の数値に実際際に変更してみると
1記事テンプレートの
76行目付近
<td><input type="text" name="tbField" value="{$BlogEntryTrackbackLink$}"size="40" class="ipt m" style="width:240px;"></td>

100~101行目付近
<td class="right"><label for="author">名前:</label></td>
<td><td><input type="text" name="author" id="author"value="{$CommentValueAuthor$}" class="ipt m" style="width:
240px;ime-mode:active;"></td>

108~109行目付近
<td class="right"><label for="email">メール:</label></td>
<td><input type="text" name="email" id="email"value="{$CommentValueEmail$}" class="ipt m" style="width:
240px;ime-mode:inactive;"></td>

116~117行目付近
<td class="right"><label for="url">URL:</label></td>
<td><input type="text" name="url" id="url" value="{$CommentValueUrl$}" class="ipt m" style="width:
240px;ime-mode:inactive;"></td>

129~130行目付近
<td class="right vtop"><label for="comment">コメント:</label></td>
<td><textarea name="comment" id="comment"rows="10" wrap="soft" class="ipt m" style="width:
240px;ime-mode:active;">{$CommentValueComment$}</textarea></td>
このようになります。

減らした(増やした)分だけ、該当箇所全部を数値を減らしたり(増やしたり)してください。
スポンサーサイト
[ 05/25 ] [レイアウト(全体)]2カラムpink 左サイドバー | トラックバック(-) | コメント(-)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。