人気ブログランキング | 話題のタグを見る

トラックバック、リンクは自由。報告も自由です。

<< ブログのバグ(?)を exci... はじめてのDVDソフト >>
 
ブログ全体の大きさを変えてみよう!
誰でもできる! excite ブログのCSS(スタイルシート)をカスタム!
ブログ全体の大きさを変える。
難易度 → 簡単



ぜんぶ見て回ったけど、ほかのスキンはいい感じだが、おれが使ってる(2004年3月18日現在)「HTMLベーシック」は、「画面いっぱい、広がりすぎっ!」これを修正することにする。関係ないと思われるかたも、この項目、CSS的に重要なので読むが吉。


この解説画面のプラウザとは別にもう一度プラウザで自分のブログを開き、解説画面のサイズを調節して参照すると便利かも。

自分のブログ →(画面右上の )設定 → スキン変更 → 現在使用中のスキン → 編集 → 下にスクロール → ■ CSS編集

まで行き、編集画面の一番うえにある、

BODY { BACKGROUND : #FFF; MARGIN : 30;PADDING : 0; }

を見つけたら、コピペしてそのすぐ下に貼り付ける(ここでは「HTMLベーシック」の「基本スキン(ホワイトホワイト)」を使う。

BODY { BACKGROUND : #FFF; MARGIN : 30;PADDING : 0; }

BODY { BACKGROUND : #FFF; MARGIN : 30;PADDING : 0; }



MARGIN : 30; が、「プラウザの内枠」と「ブログの外枠」との距離を指定する値。ここの数値を変える。指一本ぶんくらいが50pxか(アバウトすぎっ!w)。 参照

【バグ発見!? ~ 簡単に解説したいのに、ややこしことすんなよぉw ~】
MARGIN : 30;、この表記は間違い。CSSでは「0」以外の値には、単位を付けなければならない。ここは px(ピクセル)で指定するのが吉なので MARGIN : 30px; が正解。おれの環境だと(IE6.0 for Win Me)MARGIN : 0; と同意になっている。ここデザインからみても、バグの可能性大。

今回、 MARGIN : 60px; を使用してみるのだが、じつはこれ、省略形。元の記述は以下になる。

margin-top: 60px; margin-right: 60px; margin-bottom: 60px; margin-left: 60px;

(注:半角なら大文字でも小文字でもよいが、将来小文字に統一されるらしい。おれは自分のサイトのCSSでは小文字を使っており、そこからのコピペで大文字に直すの面倒なので小文字w)

今回こちらを使用。また、省略した場合のバグも報告されている。今回は関係ないと思うけど。


BODY { BACKGROUND : #FFF; MARGIN : 30;PADDING : 0; }

BODY { BACKGROUND : #FFF; margin-top: 60px;margin-right: 60px;margin-bottom: 60px;margin-left: 60px;PADDING : 0; }



編集画面のしたにあるプレビューボタンをクリックでテスト。
決定したら、

保存 → 元のページ → プラウザの「更新ボタン」(左上あたり)をクリック。

終了。ブログ全体の大きさが変わる。

上書きする前のものは消してもよいが、慣れないうちは残しておくのが吉。害はない。




変更前
margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;



変更後
margin-top: 60px; margin-right: 60px; margin-bottom: 60px; margin-left: 60px;



もうおわかりだと思うが、順に「上」「右」「下」「左」の margin の数値となっているので、各自で試してくれ。



    【解説】

  • うまくいかない場合、コピペにミスがないか、半角になってるか、コロン、セミコロン、閉じカッコがちゃんとあるかチェック。プラウザの「更新ボタン」押し忘れ注意! それでもダメな場合は、あきらめて下の段を削除か、このブログに苦情ww


  • スタイルシートは、あとに読み込む値が、それ以前のものを上書きする。
    だから、値が不確定な場合、その下で指定し直すと便利。数の制限はないみたい。上の場合、変更箇所だけ指定しなおすと、コピペが面倒だし、ミスの確率が増えるので、まとめて実行。


  • 間違いあれば、指摘よろしく。作者、かなりそそっかしいw


  • はげましのコメントくれるともっとがんばるかもw


  • 参照先の HTMLクイックリファレンス さん、ありがとうございました。



    【サイト制作(テキスト系)、鉄の掟】

  • InternetExplorer 使用のひとは、表示 → 文字のサイズ → 大(最大)にした場合も試すが吉。ここ変更してるひともいる → おれ。ふんぞりかえって見るとき、大w


  • 他のプラウザでも同一に映るとは限らない

by bravo650 | 2004-03-18 19:25 | CSSでブログをカスタム! | Comments(20)
Commented by tronja at 2004-03-18 20:20
今日は何時に寝ますか〜??? 徹夜はダメポ!(笑)
また来ますね。(^_^)/~~~
Commented by bravo650 at 2004-03-18 20:25
コメ、はやっ!
>今日は何時に寝ますか〜???
今日は、朝寝て、起きたのが、夕方5時過ぎw
で・・・・、夜眠れないだろなあw
>また来ますね。(^_^)/~~~
またね~~。
Commented by komocik at 2004-03-18 23:40
おぉぉぉぉぉ!!
コレがしたかったんですよ~(つД`)カンドウ

俺の考えではhtmlのテーブルサイズを変更して・・・と面倒な事を想定
してたんですが、CSSでmarginとは・・・思いもつきませんでした。
早速試してみます(=゚ω゚)ノ
Commented by komocik at 2004-03-19 00:36
あ・・・これでも横スクロールバーが出ますね・・・(・∀・;)
俺がしたかったのは簡単に言えば800×600のモニタでIEブラウザで
「お気に入り」を表示させた状態で横スクロールバーを出したくないんですよ。
やっぱりこの場合はhtml側も要修正ですよね・・・?

でもこのmarginもスッキリとして見やすいですね。
Commented by bravo650 at 2004-03-19 00:42
>komocik さん
これはあまり役にたたんかな、ま、marjin だけでも知っといてもらったらいいや、と思ってたんで、コメ、ひじょーにうれしいっす!
質問あれば遠慮なく (* ̄- ̄)y─┛~~ 

(>。<;)y-~ ゲホッゲホッ...
Commented by bravo650 at 2004-03-19 00:52
むむ。同時投稿w
>やっぱりこの場合はhtml側も要修正ですよね・・・?
考え中・・・。
Commented by komocik at 2004-03-19 01:04
良い案浮かんだら教えてくださいねぇm(__)m
Commented by bravo650 at 2004-03-19 01:19
考えたら、結論でました・・・・。
おれいま漫画読むため、ネット兼漫画喫茶に来てるので、考え中断!!
家に帰ってからにしま~~すwww
あほかおれはww
Commented by komocik at 2004-03-19 09:18
ヨロシク~(=゚ω゚)ノ

漫画喫茶か・・・なんか行きたくなってきた(w
Commented by bravo650 at 2004-03-19 09:52
>komocik さん
かなりゼイタクなリクエストのよな・・・・w
>漫画喫茶
夜11時から朝6時まで1200円。主にバトルロワイヤル読んでた。
Commented by komocik at 2004-03-19 11:23
>ゼイタクなリクエスト
や、やっぱり?(・∀・;)
暇な時に出来れば・・・って感じでm(__)m

>漫画喫茶
安いんですね。家の近所にJJ100があって漫画もあるんだけど
15分100円だしね・・・( ゚д゚)ポカーン
Commented by team714_neo at 2004-03-19 11:54
marginとpaddingでしたら_
 margin-top: 1px;
 margin-right: 2px;
 margin-bottom: 3px;
 margin-left: 4px;

も可能ですが・・。↓こんな方法もありますよ^^
 margin: 1px; < 上下左右 1px に指定
 margin: 1px 2px; < 上下 1px、左右 2px
 margin: 1px 2px 3px; < 上 1px、左右 2px、下 3px
 margin: 1px 2px 3px 4px; < 上1px、右2px、下3px、左4px

paddingについても同じに扱えます。
コレなら簡単に1行で済みます。お試しあれ♪
※単位(px、pt、emなど)は基本的には必須です。
Commented by bravo650 at 2004-03-19 18:56
>team714_neo さん
はじめまして! コメントありがとうございます!
>コレなら簡単に1行で済みます。お試しあれ♪
ですねえ。本文にも書いてあるんですよ
参照もふくめて ・・・・ (^^ゞ
ちょっと悩んだんですが、「スタイルシートてナニ?」みたいなかたを想定して解説してあるので、そこは本文ではあまり突っ込まなかったんですよね。そこはネット、もっと知りたい方にはリンクで飛んでもらおうとw
また気付いたことあればコメントお願いします <(_ _)>
ちなみにおれのサイトのCSSは、本文で示したバグが気になるのでフルモードで書かれています。気にしすぎかもしれませんが、痛い目に合いすぎてるので ・・・・ (;´Д`)
Commented by bravo650 at 2004-03-19 19:09
>komocik さん
ブログ見ると3段組でしょ。
真ん中のboxの幅を可変にする手ですかねえ。プラウザの幅に対応して伸びたり縮んだり・・・。
Commented by team714_neo at 2004-03-19 19:39
>参照もふくめて ・・・・
なるほど^^; 申し訳ない。
ひょっとしてと、老婆心ながら、質疑応答の手間を省けたものなら・・
と思いましたもので。。大変失礼いたしました。w

バグですか。。^^;
結構色んなところに潜んでいますよ。( ̄ー ̄)ニヤリ
Commented by bravo650 at 2004-03-19 20:02
>team714_neo さん
>なるほど^^; 申し訳ない。
気にしない気にしないw
でも、team714_neo さんが書いたように短い記述で済むのなら、書いてもよかったかな、とも。
>結構色んなところに潜んでいますよ。( ̄ー ̄)ニヤリ
みたいですねえ。
プラウザ間の互換性を考えたら、複雑な段組は、現時点ではおれみたいなド素人には無理かな、とも思うんですが、どうでしょうねえ。
Commented by komocik at 2004-03-19 21:42
>真ん中のboxの幅を可変
(・∀・)ソレダ!
可変させるのはテーブル幅の指定値を*にすれば良いんでしたかね?
後で試してみようっと(=゚ω゚)ノ
Commented by bravo650 at 2004-03-19 22:04
> komocik さん
>(・∀・)ソレダ!
(・∀・)ソレヵ?
>可変させるのはテーブル幅の指定値を*にすれば良いんでしたかね?
おれはとりあえずdivの値を%に直し、試してみた・・・・。
で、結果は・・・・ここに書けないな、と ヽ(`Д´)ノウワァァン!!
出直します _| ̄|○ ↓
Commented by komocik at 2004-03-19 22:54
基本的に漏れにはhtmlの初歩程度の知識しかないんで・・・(・∀・;)
とりあえず応援させて貰います (,,゚Д゚) ガンガレ!
Commented by bravo650 at 2004-03-19 22:58
>komocik さん
>とりあえず応援させて貰います (,,゚Д゚) ガンガレ!
おれひとりかよw ( ̄▽ ̄;)!!ガーン
<< ブログのバグ(?)を exci... はじめてのDVDソフト >>