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

CSS ルームのカスタマイズ1

ルーム・・・

わたしはルームに必要性を感じていませんのでどんなことがしたいのかがあまり理解できていませんのでうまく記事がかけません・・・


細くしたいって~ことはわかって前に試しに表示させていましたが・・

記事にするのは・・どうすればいいのでしょ?

もう少しお待ち下さい 



で・・・ とりあえずは今のわたしのルーム・・・

このまま使いたいって~方は・・

(表示されるのはフリースペースだけです)



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




まずはこの画像をダウンロードしてパソコンに保存します

表示された画像の上で右クリック→名前をつけて保存します


いま保存した画像をCSSの編集でブログデザインヘッダ・背景用画像の追加にアップします

※横幅が800pxを超えるため普段使っている画像フォルダにはアップできません

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


アップしたら画像のURLを控えておきます・・ ※ここにアップできる画像は5枚までです
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!



ルームの編集→配置の変更で

フリースペースだけ表示しますのでそれ以外は使用しない機能に移動させます

※左エリアはCSSで全部消しますのでそのままでも大丈夫です


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


自分のヘッド画像を作成して画像フォルダにアップして(コチラは800pxを超えることはありませんので画像フォルダにアップします)画像のURLを控えておきます

※画像の高さは165pxで作ってください

※四角の画像以外は透過させるか・・周りの背景を黒で作ります


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




ヘッド画像の横幅と画像のURL・・・

背景画像の画像のURLをいれてから

このままフリースペースの最後に貼り付けてください

<style type="text/css">#header li a{width:160px;height:165px;background:url(ヘッド画像のURL);}</style>
<style type="text/css">body{background-image:url(背景画像のURL);background-color:#000000;}</style>
<style type="text/css">a{color:#FFFFFF !important;}a:hover{color:#FFFFFF !important;}a:active{color:#FFFFFF !important;}a:visited{color:#FFFFFF !important;}body{font-size:12px !important;background-repeat:no-repeat;background-position:center top;}html,body {scrollbar-base-color: #000000;}#header,#contentsArea,#contentsArea #leftArea,#contentsArea #rightArea {width:350px;}#freeSpace{height:220px;overflow:auto;}#footerArea{border:none;background:transparent;}#contentsArea #leftArea,#footerArea #leftSide{display:none;}#headerAd{display:none;}#rightArea #freeSpace .subTitle{display:none;background:none;}#header{width:160px;margin:0 auto 65px;padding:0;}#header h1{display:none;}#header li{text-indent:-9999px;}#header li a{display:block;background:no-repeat;overflow:hidden;outline:none;}#navList li{border:none;}#header li.last a{display:none;}body,h2,ul#amebaBar,#amebaBar a,#amebaBar a:hover,#commom_text,a,a:hover,a:active,a:visited{color:#999999 !important;}ul#amebaBar {border:none;background:transparent;}#amebaBar #barLogoTop img{visibility : hidden ;}#amebaBar #barLogoTop{margin-left:10px;background:url(http://stat001.ameba.jp/user_images/20091205/21/exlink/41/ef/g/o0067001510330670677.gif) no-repeat 0 2px;width:70px;height:15px;}</style>








ルームのカスタマイズ・・・

やっぱ・・・記事にするのは難しいです



ルームに何を表示しているかでそれぞれ違うし・・



こんど試したのはフリースペースだけしか表示しないパターン

(やはりフリースペースにはスクロールは可能でした・・・)

http://profile.ameba.jp/exlink/

こんなの説明記事がかけません (T_T)




だいいち・・こんなのやりたい方がいるかどうか?





ど~しましょ・・・?


おまけに先週のコメントの回答もまだだし・・ど~しましょ・・





CSS ルームのカスタマイズ1

CSS ルームのカスタマイズ2

JavaScript ルームの右クリック禁止

で~・・・・・ (なにが・・いきなり で~ なのかわかりませんが・・)



ルームのリクをいただいてやっていますが・・

記事がかけません・・



ブログは基本的に表示するものが決まっていますが

ルームは事由なんで・・

極端・・フリースペースだけでいいって~方もいます

どうやって記事にするか悩んでいます




な・の・で・・・


簡単な ルームの右クリック禁止



はっきり言って・・・ 意味がありません!

前から書いていますが右クリックを禁止しても簡単に見ることもお持ち帰りもできます

お遊びと割り切って使ってください


記事にしておいてなんなんですが・・ 私からすると・・ウザイだけです・・・




説明も簡単・・・

ルームの自己紹介の一番最後かフリースペースの一番最後に



<body oncontextmenu="alert('だ~か~らぁ~\n右クリック禁止 !!!!!\n\nなんだってばぁ~ 見ちゃだめ~っ');return false;"


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

赤字部分がメッセージになります

改行したいところで \n を書いてください 2行改行なら \n\n


●すごく重要です!●

最後の > は書きません
自己紹介またはフリースペースの一番最後に記入します


<body oncontextmenu="alert('メッセージ');return false;">

<body oncontextmenu="alert('メッセージ');return false;"


でも・・プレビューを見ると・・ > が付いているんです? ↓
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

これでも大丈夫な場合もありますが・・念のために・・↓
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

プレビュー上で

<body oncontextmenu="alert('メッセージ');return false;">

こうなっていればOKです

※改行したくてフリープラグイン(自己紹介)に書いたときに \  アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!(バックスラッシュ)になっても気にしなくて大丈夫です
本来はバックスラッシュ記号が正しいのですが日本ではあまり使わないので \ になっています

なので日本語環境ではバックスラッシュは入力(表示)できません(だから↑では画像を使っています)



配置の変更で「自己紹介」や「フリースペース」を使用するようにしてください





最後にもう一度 ・・・ 本当に意味ないですからね~