2004年11月17日

オフラインでCSSカスタマイズを確認する方法

こんばんは。
タイトルの通り今回はオフラインでCSSをいじる方法について紹介したいと思います。
これを使えばSeesaaさんが重い時間帯でも手早く変更後の状態を見ることが出来るし、何度もやり直してサーバーに負担をかけることもなくなります。
これから書く方法は『ありふれた生活』(hirotomoさま)の「ローカルでcss編集」で知りました。他の記事もCSSについて色々知ることができるのでオススメです。


1.CSSカスタマイズの画面のCSSをメモ帳にコピー&ペースト。
2. 1.を「○○○.css」という名前で保存。
  (保存後ファイルの種類が「カスケード スタイルシート ドキュメント」となっていればOKです)
  「○○○」には好きな文字を入れてください。アルファベットや数字の方が良いと思います。
3.ブログのトップページのソースをメモ帳にコピー&ペースト。
  ちなみにソースはページで右クリック→ソースの表示で出ます。
4. 3.を「×××.html」という名前で保存。まだファイルは閉じないでください。
  (保存後ファイルの種類が「HTML Document」となっていればOKです)
  「×××」の部分には好きな文字を入れてください。こちらもアルファベットや数字の方が良いとおもいます。
5. 4.のファイルの中の「<link rel="stylesheet" href="http://xxx.seesaa.net/styles.css" type="text/css" />」という文を探してください。(xxxはブログによって違います)
  見つけたら「http://xxx.seesaa.net/styles.css」を「○○○.css」に書き換えて上書き保存。これをする前に閉じてしまった人はファイルの上で「右クリック→プログラムから開く→Notepad」でメモ帳形式で開けます。
6.○○○.cssと×××.htmlを同じフォルダに入れます。専用のフォルダを作っておくとわかりやすくて良いと思います。
7.ここまで出来たら×××.htmlを開いてみましょう。アドレスの部分が「file〜/フォルダの名前/×××.html」となっていればOKです。これで○○○.cssを変更→保存→×××.htmlを開く、で変更が上手くいったか確認できるようになりました。(一部画像などは確認できません)
8.実際のブログに使うCSS変更ができたらSeesaaのCSSを○○○.cssのないように書き換えましょう。

あと私は失敗したとき用にCSSのバックアップ(これはテキスト形式でOK)も一緒に置いてます。


それではまた(^^)/~
ラベル:CSS
posted by 四葉屋 at 23:46| Comment(0) | TrackBack(0) | Tips&Tool紹介 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック
×

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