スポンサーサイト

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

Mr.ポンバシのブログ改造術 part3

こんばんは!Mr.ポンバシです(*^▽^*)


ひさびさの「ブログ改造術」です!


最近はずっとCSS編集ばっかりやってましたから、ネタにはたぶん困らないと思います(^O^)


しかし、念のために1つのブログで紹介する改造術は1つにさせてもらいます


比較的簡単な技術から、だんだんと難易度を上げていこうかと思います


この記事書くの実は2回目なんで、早速紹介の方に移らせてもらいますねwww


さて、今日はルーム・ブログの幅の変更について紹介しようかと思います


ちなみにルームの幅の変更は全員共通ですが、ブログの方は選択しているスキンによって変わってくるので、単なるコピペでは済まない可能性がありますので、少しCSSの勉強をしてもらいますwww


①ルームの幅の変更


ここから↓


<style type="text/css">#contentsArea{width:1150px;}</style>
<style type="text/css">#leftArea{width:350px !important;}</style>
<style type="text/css">#rightArea{width:750px !important;}</style>

ここまで↑


上の文章をルームのフリースペースの最後に張り付けてください


紫色で書かれた数字を調整してください(この数字のままだと、僕のブログの幅と同じです)


leftArea→左のエリア

rightArea→右のエリア

contentsArea→左と右のエリアの幅の和+間の余白


ということです。


だからcontentsAreaの値はleftArea+rightAreaよりも大きくしないとだめです


もし同じにすると右と左のエリアの隙間が無くなって不格好になるし、

小さくすると右と左のエリアがかぶってしまいます


大丈夫ですか??


これは序の口なんで、ブログの方の説明に移らせてもらいませね三 (/ ^^)/


②ブログの幅の変更


スキンによって違いますが、CSS編集の最後のほうに


ここから↓

#frame{
width:auto;
padding-left:50px;
padding-right:50px;
}
#wrap{
position:relative;
width:100%;
}
#main{
margin-left:200px;

margin-right:175px;
}
#sub_main{
width:100%;
overflow:hidden;
}
#sub_a{
width:200px;
position:absolute;
left:0px;
top:0px;
}
#sub_b{
width:175px;
position:absolute;
right:0px;
top:0px;
z-index:100;
}

ここまで↑


まず始める前に忘れないでほしいことは、


絶対にCSS編集の内容のバックアップをとっておくこと!!


これでミスっておかしくなって元に戻せない!ってなっても責任とれませんから


バックアップが取れたら、CSSの最後に上の記述を全てコピペしてみてください!


それでうまくいかなかったら、上のように書き換えてみてください!


細かい調整がどうでもいい方はこれより下は見なくていいです!!




では簡単に説明しますね



①sub_main→記事の本文

②main→記事部の枠

③sub_a→左のサイドバー

④firstContentsArea→②+③

⑤sub_b→右のサイドバー

⑥wrap→②+③+④+20px~40pxの余白=③+⑤+20~40px

⑦frame→ヘッダー+⑤




http://ucsprofile.ameba.jp/ucs/freespace2/show.do 参照
Mr.ポンバシのブログ

こんなかんじです(ノ^^)八(^^ )ノ

で、余白を調整してブログの位置を調整するんですが、余白には2種類あります

paddingとmarginです

paddingは枠の内側の余白で、marginは枠の外側の余白のことです

だから、たとえば
#frame{
width:auto;
padding-left:
50
px;
padding-right:
50px;
}

のpaddingの値を両方大きくすると、フレーム内側の左側の余白、つまり左のサイドバーの外側(左側)の余白が大きくなり、また、フレーム内側の右側の余白、つまり右のサイドバーの外側(右側)の余白が大きくなります。
要するに、全体的に真ん中に寄り、main(記事枠)が小さくなります

main(記事枠)はsub_aとsub_bの値を元にして自動的に調整されるようにしてありますので、気にする必要はないかもしれませんが、画像の幅は変わりませんので、記事部を小さくし過ぎると画像が切れたりするのでご注意を

逆に、記事部を大きくしたければpaddingを小さくすればいいです

次に
#sub_a{
width:
200
px;
position:absolute;
left:0px;
top:0px;
}
#sub_b{
width:
175px;
position:absolute;
right:0px;
top:0px;
z-index:100;
}
の中にあるwidthですが、これはそれぞれ左のサイドバーと右のサイドバーの横幅を表しています

また
#main{
margin-left:200px;

margin-right:175px;
}
のなかにあるmarginはmain(記事枠)の外側、つまりフレームとの間の余白のことを言っています



ここでどういうことが言えるかわかりますか?


main(記事枠)とフレームの間にはsub_aやsub_bが入るのですから、このmainのmarginの値を、sub_aやsub_bのwidthの値よりも大きくしなければなりません!!


もしwidthの方が小さいと、記事枠とサイドバーがかぶってしまいます!


これだけは注意が必要です


こんなところですね(^∇^)


また分からないことがあったらメッセージかコメくださいね






スポンサーサイト
web拍手 by FC2

コメントの投稿

非公開コメント

1 ■無題

今回はけっこうなむずかしさですね!w

俺も少し勉強してみます!
それを今度は頑張ってみますww

CSS編集たのしーーー!!ww

2 ■無題

>アスラ・K・ピースさん
実際のところ、内容は理解しなくてもいいですよw
ただコピペしてCSSの最後に貼り付けるだけでうまくいくと思いますし

頑張ってください(^_^)v

3 ■無題

ルームの幅変更、凄いありがたいです!
ルームは全く手をつけていなかったので助かります
ありがとうございます♪

4 ■無題

あれ?私の頭から煙が!?(ぉぃ

コピペだけでいいなら、私にもできるかも(^^!
ちょっと試してみます♪

5 ■無題

おお、難しいですね・・・。
でも、コピペだけのようですし、やってみたいです( ´艸`)

情報提供、有難うございます!

6 ■無題

現状に不満は無いのですが、面白そうなので今度チャレンジしてみますw

それにしても見てるのも嫌になるほどのものを制するとは頼もしいですw

7 ■無題

>アスラ・K・ピースさん
できたみたいですね(^_^)v

細かい設定の仕方も覚えると楽しいですよo(^-^)o

8 ■無題

>ピュア紳士さん
どういたしまして(^O^)

頑張ってください!!

9 ■無題

>アクアさん
はい!コピペでうまくいかなかったらコメくださいo(^-^)o

10 ■無題

>しろたへさん
細かい設定も覚えたら便利ですよV(^-^)V
何か分からんことがあったらメッセージください!

11 ■無題

>とうがいさん
もともと僕は情報系なんで、こういう行為に抵抗を感じませんから(^o^)/

ぜひ試してみてください(^_^)v

12 ■無題

私はサイドバーを広くしたかったので
始めコピーしたタグをそのまま貼り付けたところ
ブログがえらいことになってしまいましたww

ポンパジさんの分かりやすい説明で
何とかサイドバーを広くすることが出来ました!
有難う御座います♪

CSS編集は楽しいですがやはり難しいです(-_-;)
これからも頑張ります!
プロフィール

ポンバシ

はじめまして!Mr.ポンバシです。
呼び名は「ポンバシ」「ポンさん」などなどです ^ ^
2次元をこよなく愛しており、エロゲ、ギャルゲ、アニメ、ラノベなんでも話を振ってください。
コメントしてくれると天に昇る勢いで喜びますww


アクセスランキング
[ジャンルランキング]
ゲーム
9078位
アクセスランキングを見る>>

[サブジャンルランキング]
PCゲーム
1291位
アクセスランキングを見る>>

アクセスカウンター

カテゴリ

最新コメント

全記事表示リンク

全ての記事を表示する


月別アーカイブ

OHPバナー
紅い瞳に映るセカイ 応援中!!

「魔女こいにっき」応援中

恋がさくころ桜どき

すたじお緑茶『南十字星恋歌』応援中!

検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

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