Mr.ポンバシのブログ改造術part3-2
こんばんは
Mr.ポンバシです(-^□^-)
22日発売したゲームをご購入のみなさまは楽しんでいますでしょうか？
僕は結局当初予定していたゲームも結局買わなかったです……orz
なんでかというと……
"恋ではなく"が発売延期されたせいでテンションが最低値まで落ち込んでいるからであります(_ _。)
正直僕の中では、"恋ではなく"の期待値を10とすると、他のゲームは全て3以下って感じなんで、延期はマジでショックです……
こういうめちゃ期待するゲームは、1年で1,2作品だけなんで、他のゲームは目に入りません(＞_＜)
みなさんはそういうゲームはありますか？
やはり順当にユースティアとかRewriteでしょうか？
今日は比較的基本のことを説明しようと思います
今回は、
"記事幅を解像度に関係なく自動調整する方法"
"記事部(main)を中央寄せする方法"
の2つを説明しようと思います。
では、説明に移ろうと思います。
①記事幅を解像度に関係なく自動調整する方法
記事幅を解像度によって自動調整する……といってもピンと来ない方もいらっしゃるかもしれませんねwwww
↓の画像をご覧ください
解像度が大きい方が、画面の解像度が小さい方の記事を見た場合、自動調整をしないと、上のように記事がとても小さく見えてしまいます。
しかし、自動調整ができるようにすると、↓のように
解像度が変わっても、記事幅が自動で変わるようになります。
自分の記事を解像度が違う場合どんな見え方になるか確かめたい方は、「CTRLキー」を押しながらスクロールで、画面を拡大縮小することができます。
次の記述をCSSの最後に追記してみてください
2カラムの人
#frame{
width:auto;
padding-left:30px;/*画面左端と左サイドバーの間の余白*/
padding-right:30px;/*画面右端と右サイドバーの間の余白*/
}
#wrap{
position:relative;
width:100%;
}
#main{
width:auto;
margin-left:185px;/*左サイドバーと記事部の余白*/
margin-right:5px;
}
#sub_main{
width:100%;
overflow:hidden;
}
#sub_a{
width:170px;/*左サイドバーの幅*/
position:absolute;
left:0px;
top:0px;
}
#sub_b{
display:none;
width:auto;
padding-left:30px;/*画面左端と左サイドバーの間の余白*/
padding-right:30px;/*画面右端と右サイドバーの間の余白*/
}
#wrap{
position:relative;
width:100%;
}
#main{
width:auto;
margin-left:185px;/*左サイドバーと記事部の余白*/
margin-right:5px;
}
#sub_main{
width:100%;
overflow:hidden;
}
#sub_a{
width:170px;/*左サイドバーの幅*/
position:absolute;
left:0px;
top:0px;
}
#sub_b{
display:none;
3カラムの人
#frame{
width:auto;
padding-left:30px;/*画面左端と左サイドバーの間の余白*/
padding-right:30px;/*画面右端と右サイドバーの間の余白*/
}
#wrap{
position:relative;
width:100%;
}
#main{
width:auto;
margin-left:185px;/*左サイドバーと記事部の余白*/
}
#sub_main{
width:100%;
overflow:hidden;
}
#firstContentsArea{
margin-right:185px;/*右サイドバーと記事部の余白*/
}
#sub_a{
width:170px;/*左サイドバーの幅*/
position:absolute;
left:0px;
top:0px;
}
#sub_b{
width:170px;/*右サイドバーの幅*/
position:absolute;
right:0px;
top:0px;
z-index:100;
}
width:auto;
padding-left:30px;/*画面左端と左サイドバーの間の余白*/
padding-right:30px;/*画面右端と右サイドバーの間の余白*/
}
#wrap{
position:relative;
width:100%;
}
#main{
width:auto;
margin-left:185px;/*左サイドバーと記事部の余白*/
}
#sub_main{
width:100%;
overflow:hidden;
}
#firstContentsArea{
margin-right:185px;/*右サイドバーと記事部の余白*/
}
#sub_a{
width:170px;/*左サイドバーの幅*/
position:absolute;
left:0px;
top:0px;
}
#sub_b{
width:170px;/*右サイドバーの幅*/
position:absolute;
right:0px;
top:0px;
z-index:100;
}
赤字の部分は皆さまのご自由に変更してください
②記事部(main)を中央寄せする方法
解像度を大きくしても記事部が↓の画像のように
画面の真ん中に位置するようにする方法を紹介します
ちなみにこの方法は上で紹介した"記事幅を解像度に関係なく自動調整する方法"をご利用の方には不要です。
記事部の幅は固定したいけど、記事部を中央寄せにしたいという方はご利用ください
↓の記述をCSSの最後に追記してください
#frame{
width:auto;
padding-left:30px;
padding-right:30px;
}
#sub_main{
width:100%;
overflow:hidden;
margin:10px
}
#sub_a{
float:left;
width:230px;/*左サイドバーの幅*/
position:absolute;
left:30px;/*画面左端と左サイドバーの間の余白*/
}
#sub_b{
float:right;
width:230px;/*右サイドバーの幅*/
position:absolute;
margin:0px;
z-index:100;
right:30px;/*画面右端と右サイドバーの間の余白*/
top:0;
}
#wrap{
position:relative;
width:100%;
}
#main{
float:none;
width:600px;/*記事部の幅*/
padding:0px;
margin:0 auto;
}
width:auto;
padding-left:30px;
padding-right:30px;
}
#sub_main{
width:100%;
overflow:hidden;
margin:10px
}
#sub_a{
float:left;
width:230px;/*左サイドバーの幅*/
position:absolute;
left:30px;/*画面左端と左サイドバーの間の余白*/
}
#sub_b{
float:right;
width:230px;/*右サイドバーの幅*/
position:absolute;
margin:0px;
z-index:100;
right:30px;/*画面右端と右サイドバーの間の余白*/
top:0;
}
#wrap{
position:relative;
width:100%;
}
#main{
float:none;
width:600px;/*記事部の幅*/
padding:0px;
margin:0 auto;
}
赤字の部分は皆さまのご自由に変更してください
GWが近づいてきましたね！
ここで皆さんに質問です！
ずばり！GWの予定は？？？
①GW? そんなの2次元に滞在するにきまってるじゃないかwww
②こんな休暇くらいは家族と出かける！
③友達と小旅行に行って青春を謳歌するぜ！
④2回以上友達と遊ぶ予定が入っている
⑤まさかの仕事www
⑥その他(ぇwww
さて、どれでしょうか？