スポンサーサイト

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

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

Q.サイドバーと記事それぞれ全体にスクロールをつけたいけどできる?[3]

A.

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

変更が途中で終わってました。訂正して、手順12以降を書き加えました。


1.
スタイルシートの212~221行目付近に
.side_left
{

MARGIN-TOP: 10px;
WIDTH: 175px
}
.side_right
{

MARGIN-TOP: 10px;
WIDTH: 175px
}

というのがあります。

2.
1.の赤文字の行を削除します。

実際に削除すると
.side_left
{

WIDTH: 175px
}
.side_right
{

WIDTH: 175px
}

このようになります。

3.
スタイルシートの99~107行目付近に
.entry
{
BORDER-RIGHT: #f99 1px solid;
BORDER-TOP: #f99 1px solid;
MARGIN: 10px;
BORDER-LEFT: #f99 1px solid;
BORDER-BOTTOM: #f99 1px solid;
width: 380px;
}

というのがあります。

4.
3.を…
.entry
{
BORDER-RIGHT: #f99 1px solid;
BORDER-TOP: #f99 1px solid;
margin: 1px 0px 10px;
BORDER-LEFT: #f99 1px solid;
BORDER-BOTTOM: #f99 1px solid;
width: 380px;
}

このように書き換えます。

5.
更にスタイルシートの一番下に
.scroll
{
overflow: auto;
height: 200px; /*高さは200を好みの数字に変更して設定します*/
}

と書き加えます。

6.
メインテンプレートの27~31行目付に
<div class="side_left">
<!-- sidebar-left -->
{$BlogSidebarLeft$} {$Banner$}
<!-- sidebar-left -->
</div>

というのがあります。
アーカイブテンプレートは27~31行目付近、1記事テンプレートは28~32行目付近にあります。

7.
6.を…
<div class="side_left">
<div class="scroll">
<!-- sidebar-left -->
{$BlogSidebarLeft$} {$Banner$}
<!-- sidebar-left -->

</div></div>
このように書き換えます。

8.
メインテンプレートの30~33行目付に
<!-- sidebar-left -->
</div>
</td>
<td valign="top" width="400" align="center">


メインテンプレートの56~58行目付に
</td>
<td valign="top" width="175">
<div class="side_right">

というのがあります。
アーカイブテンプレートは30~32行目付近と61~63行目付近、1記事テンプレートは31~33行目付近と167~168行目付近にあります。

9.
8.を…
メインテンプレートの30~33行目付
<!-- sidebar-left -->
</div>
</td>
<td valign="top" width="400" align="center">

<div class="scroll">

メインテンプレートの56~58行目付
</div></td>
<td valign="top" width="175">
<div class="side_right">

このように書き換えます。

10.
メインテンプレートの58~62行目付に
<div class="side_right">
<!-- sidebar-right -->
{$feedme$}{$BlogSidebarRight$}
<!-- sidebar-right -->
</div>

というのがあります。
アーカイブテンプレートは63~67行目付近、1記事テンプレートは168~172行目付近にあります。

11.
10.を…
<div class="side_right">
<div class="scroll">
<!-- sidebar-right -->
{$feedme$}{$BlogSidebarRight$}
<!-- sidebar-right -->

</div></div>
このように書き換えます。

12.
メインテンプレートの33~35行目付近に
<td valign="top" width="400" align="center">
<!-- entry -->
<BlogEntries>

というのがあります。

13.
12.を…
<td valign="top" width="400" align="center">
<div class="scroll"><!-- entry -->
<BlogEntries>

このように変更します。

14.
メインテンプレートの54~55行目付近に
</BlogEntries>
<!-- entry -->

というのがあります。

15.
14.を…
</BlogEntries>
<!-- entry -->
</div>

このように変更します。

16.
アーカイブテンプレートの32~33行目付近に
<td valign="top" width="400" align="center">
<!-- archive navigation -->

というのがあります。

17.
16.を…
<td valign="top" width="400" align="center">
<div class="scroll"><!-- archive navigation -->

このように変更します。

18.
アーカイブテンプレートの59~60行目付近に
</BlogEntries>
<!-- entry -->

というのがあります。

19.
18.
</BlogEntries>
<!-- entry -->
</div>
このように変更します。

20.
1記事テンプレートの33~34行目付近に
<td valign="top" width="400" align="center">
<!-- archive navigation -->

というのがあります。

21.
20.を…
<td valign="top" width="400" align="center">
<div class="scroll"><!-- archive navigation -->

このように変更します。

22.
1記事テンプレートの165~166行目付近に
</BlogEntryIfAllowComments>
<!-- comments -->

というのがあります。

23.
22.を…
</BlogEntryIfAllowComments>
<!-- comments -->
</div>

このように変更します。
スポンサーサイト
[ 04/09 ] [レイアウト(全体)]3カラムpink | トラックバック(-) | コメント(-)

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