Crazy Moon Blog
PBCと戯言
メニュー
ブログ説明 プラグイン1 カテゴリ 月別一覧 最新記事 コメント トラックバック リンク 検索 エントリーセレクト ?

カスタマイズのやり方2 * Top * フォントの指定変更
ローカルでテストする
2005年01月24日 (月) 13:45 :: Edit ::
色々と試してみたいけれど、一々表に反映されは困るという場合。
ローカル上でテストすれば、かなり大胆な改造や、あるいはHTML、CSSを書く練習も簡単にできます。
ただし、これはMacの話で、Winでも出来るとは思いますが、保証はありません(^^;


  1. まずは、現在のページのソースを見ます。
    これは編集フォームではいけません。必ずそのページのソースを見て下さい。
    でないと固有タグがそのままになっているため、上手くいきません。
    そして、ごっそり全部をコピーして、エディタで新規ファイルとして保存します。
    名前は、test.htmlでも、なんでも好きな名前にして、拡張子はhtmlにします。
    ※この時、テキストエンコーディングを揃える必要があります。
    FC2ではEUC-JPです。 エキサイトならUTF-8。
    これをShift-JISなどで保存していると、ブラウザに映した時に化けます(^^;

  2. 次に保存したHTMLのhead部分を見ます。
    そうすると必ずstyle.cssなどの外部cssファイルへのリンクがあります。
    (FC2ブログの場合。エキサイトなどは、HTMLの中にCSSが書き出されますので、これはいりません。最初のコピーだけでCSSも入ります)

  3. そのCSSファイルのアドレスをブラウザで開いてみると、CSSの内容が出ます。
    これもごっそりコピーして、同じくエディタで先のHTMLファイルとは別に新規保存します。
    これまた名前は好きにtest.cssでも何でもつけ、拡張子はcssにします。

  4. そこで最初のtest.htmlをもう一度開き、cssファイルへの指定をtest.cssと新しく保存したcssファイルの名前にします。
    この時、いれるのはファイル名だけでOKですが、必ずtest.htmlと同じフォルダに保存しておきます。
    どっちもデスクトップに出しておくのが一番です。

  5. これで、htmlもcssも完全にウェブとは切り離されて、ローカル上だけで成立するようになります。
    画像を使用している場合、中に入っている画像だけはネットで呼び出しになりますが、それはむしろそのままが便利です。
    外部からの呼び出しができない画像だけは、ローカルにダウンし、cssと同じく画像のアドレスをファイル名だけに変えます。

  6. ここまで出来たら、test.htmlのファイルアイコンを、ブラウザの画面にドラッグしましょう。
    そこに、ウェブ上と同じくページが表示されます。

  7. さあ、ここからは、好きなようにtest.htmlでも、test.cssでも弄って試せます。
    弄っては保存し、先ほどのローカル上のtest.htmlを開いたページをリロードすれば、結果がわかります。
    cssを弄った場合、キャッシュが残って反映されないことがありますので、その時は、もう一つウィンドウを開き、そちらにtest.cssを表示させ、そっちをリロードしてから、test.htmlの画面をリロードすれば反映されます。

  8. 出来上がったら、test.cssは、修正フォームのCSS欄にそのままコピーペーストでいけます。
    test.htmlの方は、固有タグに直したり、自動的に挿入されるのでフォームに入力は必要ないタグを削ったりしなくてはいけませんので、むしろ、最初のフォームの内容に、修正した部分だけを移していくのがよいでしょう。

  9. この方法は、当然ですが、全く新しいページ作成にも使えます。
    ブログのページというのは、かなり複雑になっていて、初心者がいきなり手出しするのは実は、普通にHP作るよりずっと難しいのです。
    ですから、むしろ基本的な普通のページを、参考サイトなど見ながら、1からHTMLを書いてみるのがよい練習になります。
    HTMLに慣れたら、今度はそれにCSSを付け加えてみる。
    そうやってHTMLとCSSの使い方が実感できたら、改めてブログテンプレートを見て下さい。
    いきなりテンプレートを弄るより、ずっとすんなりわかるようになっているはずです。
# :: 過去記事 :: Comment (10) :: Trackback (0) ::
Comment
◇ >yonimoさん
お察しします。
私も自他共に認めるネットジャンキーで一日中マシンに貼り付いてますから、つながらなくなると耐えられません。
一度ネットの便利さに慣れると戻れませんね(^^;
2005/08/23(火) 10:01:44 * URL * 月蝕 #z8Ev11P6[編集]
◇ はい、頑張ります!
。。。ってたいしたことはできないんですが、今は「FC2ブログの歩き方」もあることですし(笑)、とにかく最初は自力でなんとかやってみます。

それにしても、今回回線がダウンして、いかに自分がネット生活に依存しているのかわかったような気がします。本当に無力な気持ちになってしまうのです(笑)。これがいいことなのかどうかわかりませんが。。。

以前どこかで「インターネットはもはや水道、ガス、電気と同じく生命線である」というのを読んだことがありますが、本当にそうかもしれません。
2005/08/23(火) 01:20:32 * URL * yonimo #1eAmZ2.g[編集]
◇ >yonimoさん
復旧大変でしたね(^^;
でも、無事に復旧できてよかったです。
ローカルでのテストも上手くいったとのこと、私もほっとしています。
カスタマイズ頑張って下さい^^
2005/08/22(月) 11:27:42 * URL * 月蝕 #z8Ev11P6[編集]
◇ できました!
月蝕さん、

回線の復旧に思いのほか時間がかかり、ご報告が遅れましてすいませんでした。

昨日やっとソフトをインストールすることができまして、少し迷いながらも(笑)無事ローカルでテストすることに成功しました!!う、うれしいです(笑)

今まで醜い(笑)編集途中のものも短時間とはいえ画面に表示されてしまっていたので、どうしたものかと思っていましたが、本当にこれは便利ですね(って皆さんもうやってらっしゃることなのかしら、笑)。

月蝕さんのアドバイスにはいつも助けられます。本当にありがとうございました。

そうそう最後になりましたが、少しご無沙汰している間にまた素敵なテンプレートを公開なさった様子。じっくりと拝見させて頂きますね ^^。
2005/08/22(月) 03:54:46 * URL * yonimo #1eAmZ2.g[編集]
◇ >yonimoさん
参考になったのなら嬉しいです^^
回線ダウン困りましたね。早く復旧するとよいです。
エディタは色々ありますから、使いやすいものが見つかりますように。
2005/08/17(水) 00:40:39 * URL * 月蝕 #z8Ev11P6[編集]
◇ 早速試してみます
月蝕さん、早速のお返事ありがとうございます。

>HTMLやCSSを書く場合、ほとんど必須と言ってもよいソフトです。

や、やっぱり。。。どうも自分のやり方がいかにも原始的で(笑)、こんなやり方で皆さんHTMLやCSSを編集なさっている訳がない、と思いながらも、とにかく公開することに精一杯で今日まできてしまいました。

実は今、ほんの10分ほど前からなんですが、なぜか、家のインターネットの接続がダウンしてしまい、自分のコンピューターでソフトをダウンロードできない状態です(泣、このメールも近くの図書館の無料インターネットで書いています)。なので、実際にソフトを落として、無事にローカルでテストできるようになるまでちょっと時間がかかるかもしれません。

成功したら、また報告にきます。いつも的確なアドバイス本当に助かります。どうもありがとうございました。
2005/08/16(火) 22:55:23 * URL * yonimo #1eAmZ2.g[編集]
◇ >yonimoさん
htmlやcssという拡張子のファイルも、中身は通常のテキストファイルです。
ですから、TextEditでファイルを保存した後、拡張子を変更してもよいのですが、TextEditは機能としては制限も多く、不十分ですので、テキストエディタソフトを落としてお使いになることをおすすめします。
それなら検索置換や、テキストエンコーディング、改行コードの変更等、便利な機能が多くあります。
HTMLやCSSを書く場合、ほとんど必須と言ってもよいソフトです。
Mac用フリーソフトであれば、おすすめは、miです。
http://www.mimikaki.net/
他にも色々ありますので、検索してみて下さい。
2005/08/16(火) 14:30:45 * URL * 月蝕 #z8Ev11P6[編集]
◇ ’エディタ’について
月蝕さん、いつもお世話になっています。この「ローカルでテストする」のやり方についてお聞きしたいのですが、よろしいでしょうか。

私はMacOS10.3.9を使っているのですが、そこには標準で「TextEdit」(Winでいうメモ帳のようなものだと思うんですが)が付いています。ですので、今まではHTMLとCSSをこれにコピーして、実際にいちいちWeb上に反映し、確かめながら作業を進めていました。

今回初めてこのやり方を試してみようと思いまして(月蝕さんのおっしゃるとおり、いちいち表に反映されたのではいろいろテストすることは憚れるので)、手順通りにまずはやってみました。そして上の手順1−3は理解できたのですが、月蝕さんの書いていらっしゃる「エディタ新規ファイルとして保存する」というところで行き詰まっています。

非常に基本的な質問で恐縮なのですが、この「エディタ」というのは何らかのソフトを自分でインストールしなくては使えないものなのでしょうか。「TextEdit」を使って拡張子htmlまたはcssを入れようとしますと(当然のことながら)rtf (Rich Text Format)以外の拡張子は使えない、と出てしまいその先に進めません。

もしよろしかったらアドバイスいただけますでしょうか。よろしくお願いします。
2005/08/16(火) 04:15:29 * URL * yonimo #1eAmZ2.g[編集]
◇ お役に立てれば
今回、リクエスト、質問受付を中止しましたので、せめてご参考にと上げたものです。
お役に立てれば幸いです^^
2005/01/25(火) 15:10:56 * URL * 月蝕 #z8Ev11P6[編集]
◇ 参考になります
24日付のエントリーを拝見しました。色々と考えた末に出されたのかもしれませんが、私のようなものにはとても参考になります。ありがとうございます。(なんとなくcrazymoonさんのお人柄が表れているようで、有難い気持ちで一杯になります)
2005/01/25(火) 02:54:11 * URL * 波 #EvmDRqhQ[編集]

コメントを投稿する
URL
Comment
Pass
Secret 管理者にだけ表示を許可する
 

Trackback
この記事のトラックバックURL
http://crazymoon.blog3.fc2.com/tb.php/39-f1597333
この記事へのトラックバック
2005 Powered By FC2 allrights reserved.
template by Sun&Moon

ホームページ アフィリエイト レンタルサーバー 1GB!FC2ブログ(blog)