スポンサーサイト

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

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

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

A.
標準の幅から以下のように変更してみます。
記事の幅 : 400px → 300px
サイドバーの幅 : 175px → 160px
全体の幅 : 750px → 620px
3カラムpinkの標準幅を青文字で、例として変更する幅をピンク文字にしてます。

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

メインテンプレート、アーカイブテンプレート、1記事テンプレート、スタイルシート全て変更するとできます。
以下、変更方法


1.
メインテンプレートの(以降、アーカイブテンプレートは ア、1記事テンプレートは 記 に略してます)
14行目付近(ア:14行目付近、記:15行目付近)
<table align="center" cellpadding="0" cellspacing="0" border="0" class="range" width="750">

18~19行目付近(ア:18~19行目付近、記:19~21行目付近)
</h1>
<table width="
750" border="0" cellspacing="0" cellpadding="0">

24~26行目付近(ア:24~26行目付近、記:25~27行目付近)
<table cellpadding="0" cellspacing="0" border="0" width="750">
<tr>
<td valign="top" width="
175">

33行目付近(ア:32行目付近、記:33行目付近)
<td valign="top" width="400" align="center">

36行目付近(ア:42行目付近、記:42行目付近)
<table cellpadding="0" cellspacing="0" border="0" width="
400" class="entry">

57~58行目付近(ア:62~63行目付近、記:168行目付近)
<td width="175" valign="top">
<div class="side_right">


78~85行目付近(ア:84~91行目付近、記:180~187行目付近)
<table width="780" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td
width="435"> {$Copyright$}</td>
<td
width="330" align="right" class="footer_jp"><a href="#">▲&nbsp;ページトップへ</a></td>
<td width="15"><img src="{$BlogTmplUrl$}img/space.gif" width="13" height="1"></td>
</tr>
</table>
<table width="
755" border="0" cellspacing="0" cellpadding="0" align="center">

上の青文字の750620400300175160780650755625とそれぞれ変更、赤文字のところを削除します。

2.
1.を実際に変更してみると、
14行目付近(ア:~行目付近、記:15行目付近)
<table align="center" cellpadding="0" cellspacing="0" border="0" class="range" width="750">

18~19行目付近(ア:~行目付近、記:15~行目付近)
</h1>
<table width="
620" border="0" cellspacing="0" cellpadding="0">

24~26行目付近(ア:~行目付近、記:~行目付近)
<table cellpadding="0" cellspacing="0" border="0" width="620">
<tr>
<td valign="top" width="
160">

33~36行目付近(ア:~行目付近、記:~行目付近)
<td valign="top" width="300" align="center">
<!-- entry -->
<BlogEntries>
<table cellpadding="0" cellspacing="0" border="0" width="
300" class="entry">

57~58行目付近(ア:~行目付近、記:168行目付近)
<td width="160" valign="top">
<div class="side_right">


78~85行目付近(ア:~行目付近、記:180~187行目付近)
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td
> {$Copyright$}</td>
<td
align="right" class="footer_jp"><a href="#">▲&nbsp;ページトップへ</a></td>
<td width="15"><img src="{$BlogTmplUrl$}img/space.gif" width="13" height="1"></td>
</tr>
</table>
<table width="
625" border="0" cellspacing="0" cellpadding="0" align="center">
このようになります。

3.
アーカイブテンプレートの34行目付近
<table width="400" border="0" cellspacing="0" cellpadding="5" align="center">

1記事テンプレートの59~60行目付近
<!-- pings -->
<table class="entry" cellpadding="0" border="0" cellspacing="0" width="
400">

1記事テンプレートの69~70行目付近
<BlogEntryIfAllowPings>
<table width="
400" border="0" cellspacing="0" cellpadding="0" class="entry">

1記事テンプレートの95~96行目付近
<BlogEntryIfAllowComments>
<table width="
380" border="0" cellspacing="0" cellpadding="0" class="entry">

上の青文字の400300380280とそれぞれ変更します。

4.
3.を実際に変更すると、
アーカイブテンプレートの34行目付近
<table width="300" border="0" cellspacing="0" cellpadding="5" align="center">

1記事テンプレートの59~60行目付近
<!-- pings -->
<table class="entry" cellpadding="0" border="0" cellspacing="0" width="
300">

1記事テンプレートの69~70行目付近
<BlogEntryIfAllowPings>
<table width="
300" border="0" cellspacing="0" cellpadding="0" class="entry">

1記事テンプレートの95~96行目付近
<BlogEntryIfAllowComments>
<table width="
280" border="0" cellspacing="0" cellpadding="0" class="entry">
このようになります。

5.
スタイルシートの
99~170行目付近
.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;
}


164~175行目付近
.entry_layer
{
OVERFLOW: hidden;
WIDTH:
360px;
WORD-BREAK: break-all
}
.comment_layer
{
OVERFLOW: hidden;
WIDTH:
300px;
WORD-BREAK: break-all
}


212~225行目付近
.side_left
{
MARGIN-TOP: 10px;
WIDTH:
175px
}
.side_right
{
MARGIN-TOP: 10px;
WIDTH:
175px
}
.side
{
WIDTH:
175px
}


上の青文字の380280360260175160 と数値を変更し、360pxauto と変更します。

6.
5.を実際に変更すると、
99~170行目付近
.entry
{
BORDER-RIGHT: #f99 1px solid;
BORDER-TOP: #f99 1px solid;
MARGIN: 10px;
BORDER-LEFT: #f99 1px solid;
BORDER-BOTTOM: #f99 1px solid;
width:
280px;
}


164~175行目付近
.entry_layer
{
OVERFLOW: hidden;
WIDTH:
260px;
WORD-BREAK: break-all
}
.comment_layer
{
OVERFLOW: hidden;
WIDTH:
auto;
WORD-BREAK: break-all
}


212~225行目付近
.side_left
{
MARGIN-TOP: 10px;
WIDTH:
160px
}
.side_right
{
MARGIN-TOP: 10px;
WIDTH:
160px
}
.side
{
WIDTH:
160px
}

このようになります。

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

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