CSS ルームのカスタマイズ2
ルームのカスタマイズです・・
ＣＳＳを貼るのはルームのフリースペースの最後に加えます
ＣＳＳは改行はＮＧです・・記事のまま貼り付けてください
では・・
ルームの編集→配置の変更 表示する項目以外を使用しない機能にドラッグします
色・背景の変更で・・基本的な全体の背景色やボックスの色や文字の色を決定しておきます
このようになります↓
中央に1列にしちゃいます
フリースペースの最後に・・・
全体の幅を決めてから
<style type="text/css">#header,#contentsArea,#contentsArea #leftArea,#contentsArea #rightArea {width:350px;/*全体の幅*/}</style>
つぎに・・枠をつけてみます
このとき枠と中がくっついていると見辛いので隙間を空けます＆枠内に背景色をつけます
（わかりやすく背景色は別の色にしていますが・・ボックスの色に合わせた方が良いと思います）
フリースペースの最後に・・・
<style type="text/css">#contentsArea{padding:10px;border:10px solid #0000ff;/*全体の枠*/background:#ff00ff;/*枠内の背景色*/}</style>
枠線については ＣＳＳ ブログの枠線
を参考にして下さい
つぎは・・フッター部分の背景色を透明にしてアメブロつながり検索を消します
フリースペースの最後に・・
<style type="text/css">#footerArea{border:none;/*下線を消す*/background:transparent;}#footerArea #leftSide{display:none;/*アメブロつながり検索消す*/}</style>
プーペガールは消したらまずい・・？
フリースペースの最後に・・
<style type="text/css">#headerAd{display:none;/*プーペガール消す*/}</style>
左サイド（配置の変更で消すことの出来ないプロフィール）を消します
フリースペースの最後に・・
<style type="text/css">#leftArea{display:none;/*左エリア消す*/}</style>
フリースペースだけにして見ます
配置の変更でフリースペース以外は使用しない機能にドラッグします
で・・・ＣＳＳでフリースペースのタイトルを消せば出来上がり
フリースペースの最後に・・
<style type="text/css">#freeSpace .subTitle{display:none;/*フリースペースタイトル消す*/}</style>
フリースペースにスクロールをつけてみます
<style type="text/css">#freeSpace{overflow:auto;height:220px;/*スクロールの高さ*/}</style>
背景画像をつけます
フリースペースの最後に・・
<style type="text/css">body{background-image:url(画像のＵＲＬ);/*背景画像*/}</style>
画像を繰り返さない場合・・・
フリースペースの最後に・・
<style type="text/css">body{background-image:url(画像のＵＲＬ);/*背景画像*/background-position:right bottom;/*表示位置*/background-repeat:no-repeat;/*繰り返さない*/}</style>
background-positionプロパティは背景画像の表示開始位置（画像の左上角）を指定します
最初に横方向 left、center、rightや20%とか95%といった割合で指定・・
つぎに縦方向 top、center、bottomまたは80%といったように・・
例えば
background-position:right 80%; は画面の右端で上から80%の位置に表示
background-position:right top; は画面の右端で一番上に表示
background-position:center; は画面のど真ん中に表示
※ユーザーナビ部分は明日変更される可能性がありますので今回はさわりません
【ブログ/ルーム】管理者のピグのお部屋に行けるようになります
↓この記事の最後にあります