「##_f-pri」の表示領域を広げる方法です。
てゆーか簡単にしか説明できないので、後はご自分の目で確認してくださいね。
まず、CSSの中にある
/*3カラム表示全体の設定*/以降のタグ、「
wigth:○○px」というところを変更します。
初期設定では、左プラグイン⇒180px、エントリ部分⇒400px、右プラグイン⇒180pxとなっています。
これを増やしたい部分の幅だけ変更してください。
ちなみに、枠で囲まれている領域としては、
こんな感じになっています。(クリックすると拡大されます)
Divって横並び二つまでなのかなぁ…?いまだにそのへん勉強不足でわかってません↓どの領域の幅を増やす場合でも、その数字分
mainBlock の数字も増やしてください。
TopBlock とFooterBlock はお好みでどうぞ。mainBlock以上の数字にはしないでくださいねー。
で、
EntryBlock とP
luginBlock1 を広げるときには必ず
wrapper も増やした数字分増やしてくださいね。でないと入りきらなくなりますから。(下にずれちゃいます)
また、TopBlock とFooterBlock の領域までいじるの面倒!って思った方は、
「
wigth:○○px」のところを
「
wigth:100%」って変更すると横幅いっぱいに表示されますよ。色々数字を変えて試してみてください。
追記は例ですー。
◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆
例:左プラグインを230px(+50px)、エントリ部分を500px(+100px)、右プラグインを200px(+20px)に変更したい場合(引用部分はCSSからそのまま抜粋です)
赤字が変更した場所です。
元の数値から増えている分は50+100+20=170px。
wrapperに増やす分は100+50=150px。/*3カラム表示全体の設定*/
#mainBlock {
border: 1px solid #ff3366;
width: 970px;
margin:auto;
padding:0px;
text-align:center;
}
#TopBlock {
width : 970px;
height:300;
text-align:left;
background-image:url('http://blog.cnobi.jp/v1/blog/user/b95ef955d8ebb283417eed0e2abb5e02/1151997698');
background-position:center center;
background-repeat:no-repeat;
}
#wrapper {
float: left;
width: 750px;
margin:0px;
padding:0px;
}
#EntryBlock {
filter: alpha(opacity=65);
float :right;
width: 500px;
margin:5px 0px 5px 0px;
padding:0px;
text-align:left;
}
/*プラグイン(カテゴリー1~3)*/
#PluginBlock1 {
filter: alpha(opacity=65);
float: left;
width : 230px;
padding:0px;
margin:5px 5px 5px 5px;
text-align:left;
}
/*プラグイン(カテゴリー4~5)*/
#PluginBlock2 {
filter: alpha(opacity=65);
float: right;
width : 200px;
margin:5px 5px 5px 5px;
padding:0px;
text-align:left;
}
#FooterBlock {
width : 970px;
height:100px;
clear:both;
text-align: center;
padding:10px 0px 0px 0px;
color:#000;
background-image:url('http://blog.cnobi.jp/v1/blog/user/b95ef955d8ebb283417eed0e2abb5e02/1151988516');
background-position:bottom;
background-repeat:repeat-x;
}
PR