ルーム(プロフィール)を細く! アメブロ CSS | *:;;;:*:我等嵐隊*:;;;:*

ルーム(プロフィール)を細く! アメブロ CSS


ルームの編集→


表示する項目以外を使用しない機能にうつす!→


色・背景の変更で基本的な色をきめる!→


そしてフリースペースに下のタグをつける!


<style type="text/css">#header,#contentsArea,#contentsArea #leftArea,#contentsArea #rightArea {width:350px;/*全体の幅*/}</style>


赤の数字を変える事によって幅をきめることができます^^!

少しずつ好みになるよう調整してね!

次に枠をつけてみる?

このとき枠と中がくっついていると見辛いと思うので隙間を空けて枠内に背景色をつけましょ!

ちなみにボックスの色に合わせた方がいいと思うよ!



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


フリースペースの最後に下のタグをはってね!


<style type="text/css">#contentsArea{padding:10px;border:10px solid #0000ff;/*全体の枠*/background:#ff00ff;/*枠内の背景色*/}</style>



<枠線の種類>

solid  1本線   

double  2本線 

dashed 破線 

dotted  点線  

タグの赤文字のsolidのところを上の好きな種類にかえてください^^

また赤文字の#ffooffというのわ色のことなので記事を書くのところのカラーパレットで

好きな色のところにカーソルをもってきたときに上にでる#で始まる数字をいれてね!

フッター部分の背景色を透明にしてアメブロつながり検索も消せる><



フリースペースの最後に下のタグをいれてね!

<style type="text/css">#footerArea{border:none;/*下線を消す*/background:transparent;}#footerArea #leftSide{display:none;/*アメブロつながり検索消す*/}</style>





上の広告もけしますか?w

フリースペースの最後に下のタグをいれてね!


<style type="text/css">#headerAd{display:none;}</style>





配置の変更で消せないプロフィールも消せちゃうわけですw



フリースペースの最後に・・


<style type="text/css">#leftArea{display:none;/*左エリア消す*/}</style>




フリースペースだけにしてみるのもいいかも!




フリースペースの最後に・・


<style type="text/css">#freeSpace .subTitle{display:none;/*フリースペースタイトル消す*/}</style>




フリースペースにスクロールをつけてみてもいいかもよ!w


<style type="text/css">#freeSpace{overflow:auto;height:220px;/*スクロールの高さ*/}</style>



赤文字の数字をかえることによってスクロールの高さがかえれる^^!

背景画像をつけよう!


フリースペースの最後に・・


<style type="text/css">body{background-image:url(画像のURL);/*背景画像*/}</style>


画像のURLは画像フォルダでアップロードしてその画像をクリックし、

次に右クリックでプロパティーをおしてそこにあるurlをはりつけよう!

画像を繰り返さないで1個だけおいちゃうのってよくない?←


フリースペースの最後に・・


<style type="text/css">body{background-image:url(画像の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;   は画面のど真ん中に表示

でわ!質問わかなたんまでw

◆゚ω゚◆゚ε゚◆゚Д゚◆゚Å゚◆゚∀゚

トップにいけぇ♡

◆゚ω゚◆゚ε゚◆゚Д゚◆゚Å゚◆゚∀゚