色々と試してみたいけれど、一々表に反映されは困るという場合。
ローカル上でテストすれば、かなり大胆な改造や、あるいはHTML、CSSを書く練習も簡単にできます。
ただし、これはMacの話で、Winでも出来るとは思いますが、保証はありません(^^;
- まずは、現在のページのソースを見ます。
これは編集フォームではいけません。必ずそのページのソースを見て下さい。
でないと固有タグがそのままになっているため、上手くいきません。
そして、ごっそり全部をコピーして、エディタで新規ファイルとして保存します。
名前は、test.htmlでも、なんでも好きな名前にして、拡張子はhtmlにします。
※この時、テキストエンコーディングを揃える必要があります。
FC2ではEUC-JPです。 エキサイトならUTF-8。
これをShift-JISなどで保存していると、ブラウザに映した時に化けます(^^;
- 次に保存したHTMLのhead部分を見ます。
そうすると必ずstyle.cssなどの外部cssファイルへのリンクがあります。
（FC2ブログの場合。エキサイトなどは、HTMLの中にCSSが書き出されますので、これはいりません。最初のコピーだけでCSSも入ります）
- そのCSSファイルのアドレスをブラウザで開いてみると、CSSの内容が出ます。
これもごっそりコピーして、同じくエディタで先のHTMLファイルとは別に新規保存します。
これまた名前は好きにtest.cssでも何でもつけ、拡張子はcssにします。
- そこで最初のtest.htmlをもう一度開き、cssファイルへの指定をtest.cssと新しく保存したcssファイルの名前にします。
この時、いれるのはファイル名だけでOKですが、必ずtest.htmlと同じフォルダに保存しておきます。
どっちもデスクトップに出しておくのが一番です。
- これで、htmlもcssも完全にウェブとは切り離されて、ローカル上だけで成立するようになります。
画像を使用している場合、中に入っている画像だけはネットで呼び出しになりますが、それはむしろそのままが便利です。
外部からの呼び出しができない画像だけは、ローカルにダウンし、cssと同じく画像のアドレスをファイル名だけに変えます。
- ここまで出来たら、test.htmlのファイルアイコンを、ブラウザの画面にドラッグしましょう。
そこに、ウェブ上と同じくページが表示されます。
- さあ、ここからは、好きなようにtest.htmlでも、test.cssでも弄って試せます。
弄っては保存し、先ほどのローカル上のtest.htmlを開いたページをリロードすれば、結果がわかります。
cssを弄った場合、キャッシュが残って反映されないことがありますので、その時は、もう一つウィンドウを開き、そちらにtest.cssを表示させ、そっちをリロードしてから、test.htmlの画面をリロードすれば反映されます。
- 出来上がったら、test.cssは、修正フォームのCSS欄にそのままコピーペーストでいけます。
test.htmlの方は、固有タグに直したり、自動的に挿入されるのでフォームに入力は必要ないタグを削ったりしなくてはいけませんので、むしろ、最初のフォームの内容に、修正した部分だけを移していくのがよいでしょう。
- この方法は、当然ですが、全く新しいページ作成にも使えます。
ブログのページというのは、かなり複雑になっていて、初心者がいきなり手出しするのは実は、普通にHP作るよりずっと難しいのです。
ですから、むしろ基本的な普通のページを、参考サイトなど見ながら、１からHTMLを書いてみるのがよい練習になります。
HTMLに慣れたら、今度はそれにCSSを付け加えてみる。
そうやってHTMLとCSSの使い方が実感できたら、改めてブログテンプレートを見て下さい。
いきなりテンプレートを弄るより、ずっとすんなりわかるようになっているはずです。
Close
コメントリスト
◇ ＞yonimoさん by 月蝕
お察しします。
私も自他共に認めるネットジャンキーで一日中マシンに貼り付いてますから、つながらなくなると耐えられません。
一度ネットの便利さに慣れると戻れませんね(^^;
◇ はい、頑張ります！ by yonimo
。。。ってたいしたことはできないんですが、今は「FC2ブログの歩き方」もあることですし（笑）、とにかく最初は自力でなんとかやってみます。
それにしても、今回回線がダウンして、いかに自分がネット生活に依存しているのかわかったような気がします。本当に無力な気持ちになってしまうのです（笑）。これがいいことなのかどうかわかりませんが。。。
以前どこかで「インターネットはもはや水道、ガス、電気と同じく生命線である」というのを読んだことがありますが、本当にそうかもしれません。
◇ ＞yonimoさん by 月蝕
復旧大変でしたね(^^;
でも、無事に復旧できてよかったです。
ローカルでのテストも上手くいったとのこと、私もほっとしています。
カスタマイズ頑張って下さい＾＾
◇ できました！ by yonimo
月蝕さん、
回線の復旧に思いのほか時間がかかり、ご報告が遅れましてすいませんでした。
昨日やっとソフトをインストールすることができまして、少し迷いながらも（笑）無事ローカルでテストすることに成功しました！！う、うれしいです（笑）
今まで醜い（笑）編集途中のものも短時間とはいえ画面に表示されてしまっていたので、どうしたものかと思っていましたが、本当にこれは便利ですね（って皆さんもうやってらっしゃることなのかしら、笑）。
月蝕さんのアドバイスにはいつも助けられます。本当にありがとうございました。
そうそう最後になりましたが、少しご無沙汰している間にまた素敵なテンプレートを公開なさった様子。じっくりと拝見させて頂きますね ^^。
◇ ＞yonimoさん by 月蝕
参考になったのなら嬉しいです＾＾
回線ダウン困りましたね。早く復旧するとよいです。
エディタは色々ありますから、使いやすいものが見つかりますように。
◇ 早速試してみます by yonimo
月蝕さん、早速のお返事ありがとうございます。
＞HTMLやCSSを書く場合、ほとんど必須と言ってもよいソフトです。
や、やっぱり。。。どうも自分のやり方がいかにも原始的で（笑）、こんなやり方で皆さんHTMLやCSSを編集なさっている訳がない、と思いながらも、とにかく公開することに精一杯で今日まできてしまいました。
実は今、ほんの10分ほど前からなんですが、なぜか、家のインターネットの接続がダウンしてしまい、自分のコンピューターでソフトをダウンロードできない状態です（泣、このメールも近くの図書館の無料インターネットで書いています）。なので、実際にソフトを落として、無事にローカルでテストできるようになるまでちょっと時間がかかるかもしれません。
成功したら、また報告にきます。いつも的確なアドバイス本当に助かります。どうもありがとうございました。
◇ ＞yonimoさん by 月蝕
htmlやcssという拡張子のファイルも、中身は通常のテキストファイルです。
ですから、TextEditでファイルを保存した後、拡張子を変更してもよいのですが、TextEditは機能としては制限も多く、不十分ですので、テキストエディタソフトを落としてお使いになることをおすすめします。
それなら検索置換や、テキストエンコーディング、改行コードの変更等、便利な機能が多くあります。
HTMLやCSSを書く場合、ほとんど必須と言ってもよいソフトです。
Mac用フリーソフトであれば、おすすめは、miです。
http://www.mimikaki.net/他にも色々ありますので、検索してみて下さい。
◇ ’エディタ’について by yonimo
月蝕さん、いつもお世話になっています。この「ローカルでテストする」のやり方についてお聞きしたいのですが、よろしいでしょうか。
私はMacOS10.3.9を使っているのですが、そこには標準で「TextEdit」（Winでいうメモ帳のようなものだと思うんですが）が付いています。ですので、今まではHTMLとCSSをこれにコピーして、実際にいちいちWeb上に反映し、確かめながら作業を進めていました。
今回初めてこのやり方を試してみようと思いまして（月蝕さんのおっしゃるとおり、いちいち表に反映されたのではいろいろテストすることは憚れるので）、手順通りにまずはやってみました。そして上の手順１−３は理解できたのですが、月蝕さんの書いていらっしゃる「エディタ新規ファイルとして保存する」というところで行き詰まっています。
非常に基本的な質問で恐縮なのですが、この「エディタ」というのは何らかのソフトを自分でインストールしなくては使えないものなのでしょうか。「TextEdit」を使って拡張子htmlまたはcssを入れようとしますと（当然のことながら）rtf （Rich Text Format）以外の拡張子は使えない、と出てしまいその先に進めません。
もしよろしかったらアドバイスいただけますでしょうか。よろしくお願いします。
◇ お役に立てれば by 月蝕
今回、リクエスト、質問受付を中止しましたので、せめてご参考にと上げたものです。
お役に立てれば幸いです＾＾
◇ 参考になります by 波
24日付のエントリーを拝見しました。色々と考えた末に出されたのかもしれませんが、私のようなものにはとても参考になります。ありがとうございます。（なんとなくcrazymoonさんのお人柄が表れているようで、有難い気持ちで一杯になります）
コメントを投稿する
では、途中でわかんなくなった、崩れた、このCSSの指定、何処に効いているのかわからない。
そういう場合に役立つ小技と、よくあるミスの紹介です。
- 突然、CSSが効かなくなった。
→大抵の場合、入れておくべき、; } が抜けているか、入っちゃいけないところに半角スペースが入っていたり、あるいは半角であるべきところが全角になっていたりというのが原因です。
bodyとリンクの色までは効いているのに、トップ部分の指定が効かなくなったなら、トップ部分かリンクの色の部分に上記のミスがあります。
ミスの直後からCSSが効かなくなる場合がほとんどだからです。
- 一カ所だけ、修正が反映されない。
→何かで上書きしていないかチェックします。
多いのはまず、例えば、marginを修正したのだが、その後にもう一度marinの指定が入っていて、前の部分は打ち消されているのに、前の方ばかり修正しているというパターンです。
もう一つは、内容が入れ子になっていて、表に出ている方を修正していないパターンです。
例えば、TDの中にDIVを入れており、その背景色を変えたいならば、DIVの背景色を変えなくてはいけません。
何故ならTDの背景色はDIVの色で覆い隠されるからです。
その場合、DIVの背景色指定を消すか、DIVの背景色を変えないといけません。
- どこにCSSが効いているのかわからない。
→怪しいと思う箇所のCSS指定に、border :1px red solid; という枠線の指定を加えます。
tableを組んでいるなら、HTMLのtableタグに、border=1と入れます。
そうするとその指定範囲が枠で囲まれて表示されます。
- 修正が反映されているのかどうか、よくわからない。
→marginやpaddingなど微妙な数字の変更は、上手く効いているのかわからないことがあります。
その時は、数字を思い切って100pxなど大きくしてみます。
それでどかんと空白が増えれば効いているので、改めて数値を指定し直します。
それでも反映されない場合、一度ブラウザを落とすか、キャッシュを消してから読み込み直してみます。
キャッシュが残って、見た目反映されていないということが、ことにIEの場合、よくあります。
- ここを変更したいのだが、どこを弄ればいいかわからない。
→エディタの検索機能を有効活用します。
まずHTMLやCSSを一旦、エディタにコピーペーストします。
次にブラウザ上の画面で変更したい箇所を見ます。
例えば、Adminというリンクの辺りを変更したいならば、先に保存したエディタのファイルで、Adminという文字を検索してみます。
そうすると、一発で修正すべき場所が見つかります。複数見つかった場合は、前後の言葉で判断します。
変えたい内容がCSSならば、見付けた場所を囲っているタグや、そのタグへのCSSのクラス指定の文字を見ます。
そして、今度はそのタグやクラスの名前で、CSSの方を検索してみます。
そうすれば、変えたい場所に関して指定しているCSSの箇所が直ぐ見つかります。
- 同じような箇所が他にないか探してみる。
例えば一部だけリンクの色を変える方法などは、大抵ブログタイトル部分のCSS指定などに使ってあります。
自分がやりたいことが、既にされている箇所がないか考え、あればその箇所を探し出して真似してみて下さい。
そのままで上手くいかないなら、その箇所のタグやプロパティを、紹介したサイトで調べてみましょう。
どのように応用したらいいかわかるはずです。
- ブログ固有タグを自分で確認する。
→FC2 テンプレート機能一覧
→エキサイト スキンタグ集
ブログによって固有のタグがあり、その設定によって出来る事と出来ない事があります。
それはブログのタグ一覧を見れば、必ずわかります。
例えば、FC2では、<%url> （ブログURL）と<%blog_name> （ブログタイトル）が別々の固有タグになっています。
ですから、タイトルだけ表示させ、自分のブログへのリンクはTOPという文字でリンクさせるなどが可能です。
ところが、エキサイトでは、<$header$> （リンク付きブログタイトル）、<$blogurl$> （リンク付きブログURL）という固有タグしかありません。
タイトルだけ、URLだけというタグがないのです。
従って、タイトルやURLだけ出したい、リンクはさせたくないという場合、タイトルやブログのURLは直接に文字を入れなくてはいけません。つまりブログタイトルを変更しても、自動的に変更はされないので、自分で編集画面で書き直す必要がありますし、公開した場合、当然、自分のブログのタイトルになっていて、他の人のブログのタイトルに変わったりもしません。
こういうことは、ブログの固有タグ説明を見ればわかることです。
それを見もしないで、○○できますか？という質問は止めましょう。
- ソースの格好良さは二の次と諦める。
デザイン目的でtableを使うのはよくないなどと、よく説明サイトに書いてありますが、tableを組まずに、様々な環境でも表示を崩れないように設定するのはとても難しいです。
無理はせず、tableを組んで作りましょう。
- HTML内の指定も有効活用しましょう。
IEなどセンタリング関係のCSS指定を綺麗に無視するブラウザがありますので、CSSが駄目なら、HTMLの方に<center>タグを入れておくのも手です。
ただしCSSとHTMLの指定が矛盾しないようにすることです。
CSSでは左寄せを指定、HTMLではセンタリングなどとしていては意味がありません。
- 絶対値の指定は最低限にしましょう。
幅を○pxなど絶対値で指定していると、モニタのサイズが変わると横スクロールが発生したり、えらく空白が大きくなったりします。
画像の幅と揃えたいなど、どうしても絶対値が必要な場合以外は、%など相対値指定にしておきましょう。
内容が入りきれずにはみ出す危険がぐっと下がります。
- 基本はまず内容が読めることです。
それ以上の微妙な配置の拘りなどは、ブラウザやモニタによって、どうせ思った通りに表示されるケースは少ないですし、しばらくやって駄目なら諦めましょう。
それ以上に拘るなら、それは自己満足と自覚し、自力で出来る範囲で止めておくか、ひたすら試行錯誤しましょう。
- 一晩寝かせましょう。
どうしても駄目と煮詰まったら、それはそのままにして一晩ゆっくり眠りましょう。
冷静になって、頭もすっきりしてから見直すと、なんだ、簡単ってことはよくあります。
- 人のHPのソースを見る癖をつけましょう。
これいいな〜と思ったら、あるいは困ったな、このサイトのようにしたいのにと思ったら、まずソースを見ます。
そして、それを参考にさせてもらいましょう。
- 外部ファイルでCSSを指定している場合（FC2ブログもこの形式です）必ずページhead部分にそのCSSファイルへのリンクがあります。
そのリンク先を見てみましょう。
Close
コメントリスト
コメントを投稿する
カスタマイズと質問をする場合の基本事項
- まず、HTMLとCSSのわかりやすい説明サイトを見付けて読みましょう。
全てはそこからです。
読むのは面倒だ、自分で勉強するのはイヤだって方は、カスタマイズは諦めましょう。
何かやりたいなら、まず自分で努力するのは基本です。
- カスタマイズした場合、崩れの責任は自分にあります。
自分で調べて解決しましょう。
- 崩れに気付いた場合、必ずデフォルト状態で確認しましょう。
カスタマイズ後に崩れたのか、もとから崩れていたのかは大事です。
もとから崩れていた場合のみ、制作者に報告質問します。
- カスタマイズはいらないんだけど、崩れてるよ〜という場合。
報告、質問の時は、必ず使用しているOS、ブラウザ、モニタの解像度を記載して、どこがどのように崩れるのか記載しましょう。
現在、全てのOS ブラウザで保証をするということは、あまりに各OSやブラウザによって仕様が違ったりバグがあったりするために、どの制作者にもほぼ不可能に近い状態です。
従って環境明記は必須です。
- できればサイトURLを記載して、そのテンプレートに設定しておきましょう。
URLを出したくない場合、URLだけを管理者だけが見られるコメントとして送り、質問は別のコメントで表に出します。
- テンプレートを別のものに変更している場合、崩れた状態でのキャプチャーをアップロードし、その画像のアドレスを教えると早いです。
テンプレート作者は、可能な限りの環境で崩れのチェックはしてから公開します。
逆に言えば、それでも崩れている場合、その作者の環境では崩れの確認が出来ないということです。
その時に、画像があるとどこを修正すればいいかわかります。
- カスタマイズについての質問は、カスタマイズ掲示板で同様の質問が出ていないか必ず検索確認してから質問スレッドをたてます。
（当ブログではカスタマイズのご質問にはお答えできません）
- 無償であることの意味を忘れないようにしましょう。
プロに同じことを頼んだり、尋ねたりすれば、料金が発生します。
技術、知識はタダじゃありません。それを身に付けるためには、皆さん、時間や手間暇、お金をかけているからです。
お金を払って受けているサービスなら、改善要求を出すのは当然ですが、無償のものは、言わば完全なフォローはできない、責任は取れないからタダなのです。
答えてくれる、改善してくれるのが当然という態度は止めましょう。
Close
コメントリスト
◇ どうぞお使い下さい by 月蝕
こんにちは。公開しているテンプレートについては、カスタマイズはご自由にどうぞ。
カスタマイズについて詳しくは本日説明を上げましたのでご覧下さい。
◇ 管理人のみ閲覧できます by -
コメントを投稿する
