スポンサーサイト

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

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

Q.記事にスクロールバーをつけたいんだけど…[3]

A.
記事全部につけてもサイドバーが残ってしまい意味がないので、記事ごとにスクロールバーをつけます。
メインテンプレート、アーカイブテンプレート、スタイルシートを変更するとできます。

サイドバーと記事全体にスクロールバーをつける方法はコチラで説明してます。


1.
スタイルシートの99~107行目付近に
.entry_layer
{
OVERFLOW: hidden;
WIDTH: 360px;
WORD-BREAK: break-all
}

というのがあります。

2.
1.を…
.entry_layer
{
OVERFLOW: hidden;
WIDTH: auto;
WORD-BREAK: break-all
}

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

3.
更にスタイルシートの一番下に
.scroll
{
overflow: auto;
height: 150px;
}

と書き加えます。

高さは、height: 150px;150 を好みの数字に変更することにより変わります。

4.
メインテンプレートの41~51行目付に
<tr>
<td class="entry_text"> <div class="entry_layer">{$BlogEntryBody$}<div class="cl"></div></div>
<br>
<BlogEntryIfExtended><a href="{$BlogEntryPermalinkUrl$}#BlogEntryExtend">続きを読む…</a></BlogEntryIfExtended> 
</td>
</tr>
<tr>
<td class="posted">
Posted at {$BlogEntryDate format="%H:%M"$}<BlogEntryIfCategory> / <a href="{$BlogEntryCategoryLink$}">{$BlogEntryCategory$}</a> </BlogEntryIfCategory>/ <a href="{$BlogEntryPermalinkUrl$}">この記事のURL</a><br>
<BlogEntryIfAllowComments><a href="{$BlogEntryPermalinkUrl$}#comments">コメント({$BlogEntryCommentCount$})</a></BlogEntryIfAllowComments><BlogEntryIfAllowPings> / <a href="{$BlogEntryPermalinkUrl$}#Trackback">トラックバック({$BlogEntryTrackbackCount$})</a></BlogEntryIfAllowPings>
</td>
</tr>
というのがあります。

アーカイブテンプレートは47~56行目付近にあります。
5.
4.を…
<tr>
<td>
<div class="scroll"><div class="entry_text"><div class="entry_layer">{$BlogEntryBody$}<div class="cl"></div></div>
<br>
<BlogEntryIfExtended><a href="{$BlogEntryPermalinkUrl$}#BlogEntryExtend">続きを読む…</a></BlogEntryIfExtended> 
</div>
<div class="posted"> Posted at {$BlogEntryDate format="%H:%M"$}<BlogEntryIfCategory> / <a href="{$BlogEntryCategoryLink$}">{$BlogEntryCategory$}</a> </BlogEntryIfCategory>/ <a href="{$BlogEntryPermalinkUrl$}">この記事のURL</a><br>
<BlogEntryIfAllowComments><a href="{$BlogEntryPermalinkUrl$}#comments">コメント({$BlogEntryCommentCount$})</a></BlogEntryIfAllowComments><BlogEntryIfAllowPings> / <a href="{$BlogEntryPermalinkUrl$}#Trackback">トラックバック({$BlogEntryTrackbackCount$})</a></BlogEntryIfAllowPings>
</div></div></td>
</tr>
このように書き換えます。
スポンサーサイト
[ 05/10 ] [記事]3カラムpink | トラックバック(-) | コメント(-)

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