So-net無料ブログ作成

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 が使えます。
1.ブログのページを表示
2.右クリック → Edit CSS
3.なぜか空っぽの CSS 編集テキストボックスが表示されるので、今使っている CSS を貼り付ける。 今使っている CSS は右クリック → 「ページのソースの表示」で blog_base.css の下の JavaScript の var cssFile = "..." と書いてある行の URL 文字列の先頭の /blog/ を http://blog.so-net.ne.jp/ に置き換えて直接表示させれば出てきます。
4.好きに編集
5.出来上がったらコピペでローカルのファイルに保存
6.穂損したファイルを使って so-net ブログのカスタムCSS設定を更新

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


nice!(4)  コメント(0)  トラックバック(2) 
共通テーマ:パソコン・インターネット

nice! 4

コメント 0

コメントを書く

お名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 2

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。