So-net ブログの css カスタマイズ：よがブログ：So-net blog

	ブログをはじめるログイン

ソニースタイルのアフィリエイト｜自分用パソコン移行手順 for Wind.. ブログトップ

So-net ブログの css カスタマイズ　[ぱそ関係] [編集]

So-net ブログでも春ぐらいから CSS （カスケーディングスタイルシート）のカスタマイズができるようになってるんですな。

ということで、設定の「スキン／レイアウト」にあらかじめ用意されてるデザインでは微妙に物足りなかったので私もカスタマイズしてます。
主な変更点は以下のとおり。

- 横にもう少し広く表示できるように(本文が800ポイントぐらい)
- リンクはすべてマウスオーバーで色が変わる
- 輝度を落としたディスプレイでも読みやすく
- 輝度が高い（sRGB設定とか）ディスプレイでもコントラストがきつすぎない
- 区切り線やバーメニューをおしゃれ（もちろん主観）にして
- 初めて訪れた人に威圧感を与えないほのぼの感を少しだけ醸し出すデザイン

中身はこちら。
http://blog.so-net.ne.jp/_images/blog/_558/yoga/204737/style.css?1171115041000

正しいいじり方はこちら。

So-net blogの使い方～カスタムスキンの作り方
http://blog.so-net.ne.jp/blog-help/archive/c35378133

CSS そのものの詳しい話は「とほほのスタイルシート入門」でも見ればわかるでしょう。便利なサイトです。
http://www.tohoho-web.com/css/index.htm

実際にページを表示させながら WYSIWYG で CSS を編集するには firefox ブラウザ＋ EditCSS Extension が使えます。
１．ブログのページを表示
２．右クリック → Edit CSS
３．なぜか空っぽの CSS 編集テキストボックスが表示されるので、今使っている CSS を貼り付ける。今使っている CSS は右クリック → 「ページのソースの表示」で blog_base.css の下の JavaScript の var cssFile = "..." と書いてある行の URL 文字列の先頭の /blog/ を http://blog.so-net.ne.jp/ に置き換えて直接表示させれば出てきます。
４．好きに編集
５．出来上がったらコピペでローカルのファイルに保存
６．穂損したファイルを使って so-net ブログのカスタムCSS設定を更新

firefox http://www.mozilla-japan.org/products/firefox/
Edit CSS https://addons.mozilla.org/ja/firefox/addon/179