忍者ブログ
| Admin | Write | Comment |
テンプレ作成を主にしています。
2024.04.<< | 2024.05. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | >>2024.06.
最新コメント
最新トラックバック
カレンダー
04 2024/05 06
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
バーコード
ブログ内検索
カウンタ
LINK
テンプレートに利用させていただいている素材サイト様です。
すべて利用可、または利用許可をいただいているサイト様です。

Mako's

NeckDoll†人形首†暗黒素材-御伽草子

Pearl Box

深黒

はながら屋

Atelier Black/White

Alice Blue

CoCo*

プロフィール
HN:
Rirua
性別:
非公開
自己紹介:
ブログタイトル、URLを見てわかる人はわかってもらえるかと…
管理人リンク
管理人が他にしているブログです。
テンプレート関連以外のことはこちらに書いています(ちょっと放置気味)

趣味ブログ
ジャニブログ
メールフォーム
不都合やこんなの作れる?というリクエスト等あればお気軽にメールください。<BR> 要返信の内容の場合、メールアドレス必須でお願いします。<BR> デザインに関するものは該当ブログURL必須でお願いします。<BR> 誹謗中傷、小文字ギャル文字乱用はご遠慮ください。<BR>
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


「##_f-pri」の表示領域を広げる方法です。
てゆーか簡単にしか説明できないので、後はご自分の目で確認してくださいね。

まず、CSSの中にある/*3カラム表示全体の設定*/以降のタグ、「wigth:○○px」というところを変更します。

初期設定では、左プラグイン⇒180px、エントリ部分⇒400px、右プラグイン⇒180pxとなっています。
これを増やしたい部分の幅だけ変更してください。

ちなみに、枠で囲まれている領域としては、
図
こんな感じになっています。(クリックすると拡大されます)

Divって横並び二つまでなのかなぁ…?いまだにそのへん勉強不足でわかってません↓

どの領域の幅を増やす場合でも、その数字分mainBlock の数字も増やしてください。
TopBlock とFooterBlock はお好みでどうぞ。mainBlock以上の数字にはしないでくださいねー。

で、EntryBlock とPluginBlock1 を広げるときには必ず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

この記事にコメントする
NAME:
TITLE:
MAIL:
URL:
COMMENT: Vodafone絵文字 i-mode絵文字 Ezweb絵文字
PASS: 管理人のみ表示
この記事にトラックバックする
この記事へのトラックバック

Copyright カキゴオリ☆。。All Rights Reserved.
Powered by NinjaBlog / Material By *05 free photo / Template by カキゴオリ☆
忍者ブログ [PR]