スポンサーサイト

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

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

Q.サイドバーと記事それぞれ全体にスクロールをつけたい[2右]

A.

↑のようにしたいということでしたら、
メインテンプレート、アーカイブテンプレート、1記事テンプレート、スタイルシートを変更するとできます。
以下、変更方法


1.
スタイルシートの
113~119行目付近
.inner {
margin:0px;
width:
240px;
font-size:10px;
word-break:break-all;
overflow:hidden;
}


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;
}


241~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;
}


286~290行目付近
#comment_preview{
width:
260px;
word-break:break-all;
overflow:hidden;
}


294~299行目付近
.side {
width:
240px;
margin:10px 0px 15px 0px;
padding:0px 0px 5px 0px;
text-align:center;
}


313~328行目付近
.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;
}

351~354行目付近
.calendar_bg {
width:200px;
margin:10px
30px 10px 30px;
}


と、いうのがあります。

2.
1.を…
113~119行目付近
.inner {
margin:0px;
width:
auto;
font-size:10px;
word-break:break-all;
overflow:hidden;
}

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


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


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

286~290行目付近
#comment_preview{
width:
auto;
word-break:break-all;
overflow:hidden;
}


294~299行目付近
.side {
width:
auto;
margin:10px 0px 15px 0px;
padding:0px 0px 5px 0px;
text-align:center;
}


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


351~354行目付近
.calendar_bg {
width:200px;
margin:10px
5px 10px 5px;
}

このように赤文字のところを変更します。

3.
スタイルシートの一番下に
.scroll {
overflow: auto;
height: 200px; }
.message .txt { width:auto; }

を書き加えます。

4.
メインテンプレートの30行目付近に
<div id="left">
というのがあります。
アーカイブテンプレートは31行目付近、1記事テンプレートは34行目付近にあります。

5.
4.を…
<div id="left"><div class="scroll">
このように赤文字のところを書き加えます。

6.
メインテンプレートの60~67行目付近に
</div>
<div id="right">
<div class="inner">
{$feedme$}
{$BlogSidebarLeft$}
{$Banner$}
</div>
</div>

を書き加えます。
アーカイブテンプレートは62~69行目付近、1記事テンプレートは153~160行目付近にあります。

7.
6.
を…
</div></div>
<div id="right"><div class="scroll">
<div class="inner">
{$feedme$}
{$BlogSidebarLeft$}
{$Banner$}
</div></div>
</div>
このように赤文字のところを書き加えます。
スポンサーサイト
[ 06/06 ] [レイアウト(全体)]2カラムblue 右サイドバー | トラックバック(-) | コメント(-)

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