これはまずサンプルを
<div style="background:#ffffff;border:solid #000000 1px;width:800px;height:600px;position:absolute;top:10px;left:50%;margin-left:-400px;">
<div style="display:none;">
$myLv$loveMsg$myStatus$lastWork$nextWork$hobby$color$bbsView$itemView$recipeView
$bodyView$cosView$hymmnosView$accessLog$addressView$goConfig$serif$power$magic
$sens$love2$messBox$reload$picture$goCity
</div>
</div>
模様替えのテキストエリアを全部消してこれだけをコピペして変更してみてください
あ、もちろんいままでのバックアップはとった上でないと前のは消えるので注意
どうなりましたか?
ちゃんとできてれば真っ白な画面の中央に横長な枠が表示されてるはずです
明らかに普通より使える幅が広がっている上に
消せなかったシステムメニューや周りの枠、背景までもが消えています
こいつらがどこへ行ったのかというのは「background:#ffffff;」の部分を消してみればわかります
はい、つまり普段表示されている部分を上から白い四角で隠してしまったわけです
これでほぼデザイン面に関しては完全に自分の思い通りにできるようになりました
あとは<div style="〜">と最後の</div>の間に好きなように書いていくだけ
これだけではなんなので以下説明
このサンプルの真ん中あたりの$myLvやら$loveMsgやらは弾かれないように必須タグを並べてるだけなので関係なし
というか<div style="display:none;"> </div>で囲って表示されないようにしてある
改めて見ると結構な数あるな…
で、重要なのが<div style="〜">の部分
1つ1つスタイルシートの説明をしていくと
background:#ffffff;
背景の設定。この場合背景色を白にする
これがないと後ろに隠した部分が見えちゃうので注意
border:solid #000000 1px;
枠線の設定
「幅1ピクセルの黒の実線で囲め」って感じの文
width:800px;
幅の設定。幅を800ピクセルにしている
height:600px;
高さの設定。高さを600ピクセルにしている
position:absolute;
配置方法の設定
これが四角の部分を本来の位置から外して元を隠すキモ
top:10px;
上からの位置の設定
本来の表示から外れた四角をどこに置くかってことを決める
この場合語弊があるけど表示領域の一番上から四角の上辺までの距離が10ピクセルになると思ってOK
left:50%;
左からの位置の設定
ピクセルで指定するとPCによって画面の解像度が違うので人によって真ん中にこなくなる
なのでここは画面の幅に対する割合で指定している
margin-left:-400px;
上の指定だけでは四角の左辺が画面の真ん中に来てしまうので
これで400ピクセルつまり四角の幅の半分だけずらしている