スポンサーサイト

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

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

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

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

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

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

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


1.
スタイルシートの
46~53行目付近
.footer_cl {
margin:0px auto;
width:
800px;
margin:0 auto;
clear:both;
height:0px;
font-size:0px;
}


91~119行目付近
#container_top {
width:
800px;
padding:0px;
margin:0px;
border-top:#336699 1px solid;
border-right:#336699 1px solid;
border-bottom:#336699 1px solid;
border-left:#336699 1px solid;
}
#left {
width:
550px;
float:left;
text-align:left;
}
#right {
width:
240px;
float:right;
text-align:left;
}
.inner {
margin:0px;
width:
240px;
font-size:10px;
word-break:break-all;
overflow:hidden;
}


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


174~179行目付近
.entry {
width:
550px;
border-top:#336699 1px solid;
border-right:#336699 1px solid;
border-bottom:#336699 1px solid;
}

205~210行目付近
.entry_comment {
width:
520px;
margin:0 auto 15px 9px;
text-align:left;
padding:0;
}


242~249行目付近
.txt {
width:
500px;
margin:3px 22px 7px 22px;
line-height:1.5em;
overflow:hidden;
text-align:left;
word-break:break-all;
font-size:12px;
}


276~311行目付近
.message {
width:
520px;
margin:3px 12px 7px 12px;
padding-top:8px;
text-align:left;
word-break:break-all;
overflow:hidden;
font-size:12px;
}
#comment_preview{
width:
260px;
word-break:break-all;
overflow:hidden;
}
.side {
width:
240px;
margin:10px 0px 15px 0px;
padding:0px 0px 5px 0px;
text-align:center;
}


313~337行目付近
.side_text {
width:
220px;
overflow:hidden;
word-break:break-all;
margin:5px auto 3px 10px;
text-align:left;
}
.func {
width:
240px;
overflow:hidden;
word-break:break-all;
margin:10px 0px 15px 0px;
padding:0px 0px 5px 0px;
text-align:center;
}
.func_text {
width:
220px;
overflow:hidden;
word-break:break-all;
margin:0px;
padding:5px 0px 0px 0px;
text-align:left;
}

と、いうのがあります。

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

3.
1.
2の数値に実際際に変更してみると
スタイルシートの
46~53行目付近
.footer_cl {
margin:0px auto;
width:
600px;
margin:0 auto;
clear:both;
height:0px;
font-size:0px;
}


91~119行目付近
#container_top {
width:
600px;
padding:0px;
margin:0px;
border-top:#336699 1px solid;
border-right:#336699 1px solid;
border-bottom:#336699 1px solid;
border-left:#336699 1px solid;
}
#left {
width:
410px;
float:left;
text-align:left;
}
#right {
width:
180px;
float:right;
text-align:left;
}
.inner {
margin:0px;
width:
180px;
font-size:10px;
word-break:break-all;
overflow:hidden;
}


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


174~179行目付近
.entry {
width:
410px;
border-top:#336699 1px solid;
border-right:#336699 1px solid;
border-bottom:#336699 1px solid;
}

205~210行目付近
.entry_comment {
width:
360px;
margin:0 auto 15px 9px;
text-align:left;
padding:0;
}


242~249行目付近
.txt {
width:
360px;
margin:3px 22px 7px 22px;
line-height:1.5em;
overflow:hidden;
text-align:left;
word-break:break-all;
font-size:12px;
}


276~311行目付近
.message {
width:
360px;
margin:3px 12px 7px 12px;
padding-top:8px;
text-align:left;
word-break:break-all;
overflow:hidden;
font-size:12px;
}
#comment_preview{
width:
auto;
word-break:break-all;
overflow:hidden;
}
.side {
width:
180px;
margin:10px 0px 15px 0px;
padding:0px 0px 5px 0px;
text-align:center;
}


313~337行目付近
.side_text {
width:
160px;
overflow:hidden;
word-break:break-all;
margin:5px auto 3px 10px;
text-align:left;
}
.func {
width:
180px;
overflow:hidden;
word-break:break-all;
margin:10px 0px 15px 0px;
padding:0px 0px 5px 0px;
text-align:center;
}
.func_text {
width:
160px;
overflow:hidden;
word-break:break-all;
margin:0px;
padding:5px 0px 0px 0px;
text-align:left;
}

このようになります。

4.
スタイルシートの351~354行目付近に
.calendar_bg {
width:
200px;
margin:10px
30px 10px 30px;
}

というのがあります。

5.
幅を変更したサイドバー内にメニューを入れるため、4.を…
.calendar_bg {
width:
160px;
margin:10px
10px 10px 10px;
}

このように変更します。

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

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

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

101~102行目付近
<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>

109~110行目付近
<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>

122~123行目付近
<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>
というのがあります。

8.
7.
の青文字を 380px240px と変更します。

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

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

101~102行目付近
<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>

109~110行目付近
<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>

122~123行目付近
<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>
このようになります。

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

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