誰でもできる! 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 の数値となっているので、各自で試してくれ。
by bravo650
| 2004-03-18 19:25
| CSSでブログをカスタム!
|
Comments(20)
Commented
by
tronja at 2004-03-18 20:20
今日は何時に寝ますか〜??? 徹夜はダメポ!(笑)
また来ますね。(^_^)/~~~
0
Commented
by
bravo650 at 2004-03-18 20:25
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
Commented
by
komocik at 2004-03-19 01:04
良い案浮かんだら教えてくださいねぇm(__)m
Commented
by
bravo650 at 2004-03-19 01:19
Commented
by
komocik at 2004-03-19 09:18
Commented
by
bravo650 at 2004-03-19 09:52
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
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
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
|
by bravo650 カテゴリ
このブログの紹介 新ブログ スタイルシート哀歌 スタイルシート 鉄の掟 スタイルシートダメダメ日記 LINK スタイルシート関係 CSSでブログをカスタム! ブログ 今日のひと笛 ブログについて 雑記 写真 サイト作成 録音 イラク関係 リンク イラク問題 岡本選手アテネ派遣問題 管理者用 以前の記事
最新のトラックバック
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧
|
ファン申請 |
||