テンプレート編集のポイント（表示がおかしくなった、または、なる前に）

はじめに、当サイトで配布している html テンプレートは「勝手に表示をおかしくするような動作」はできませんので、 「何もしていないのに急に表示がおかしくなる」ということは恐らくありません。
もし問題が発生しても何らかの原因があるはずですので、その原因を取り除けば大抵の問題は解決します。

ここでは、「原因の見当もつかない」という事態に陥らないように、テンプレート編集のポイントを挙げています。
（「テンプレートがサンプルと同じように表示できません」の内容を、少し噛み砕いて説明しています）
（前提として、初歩的な html の理解、ホームページの作り方などの基礎的な知識は必要です）

「原因がわからない」「元のデザインに戻せない」場合は、最後に保存したバックアップから作業をやり直すことになってしまいますので、 そうならないために以下のポイントを心がけてみてください。

• まずは「配布時のままの状態」で確認を
• ファイルやフォルダの移動・名前の変更には要注意
• 「自動的にタグが書き換わる」場合があることも知っておく
• 編集する時は「小まめにチェックすること」「バックアップをとること」
• 最終的には、配布時の状態とソースを見比べて「何が違うのかを調べる」

併せて参考にしていただきたいページ

• サンプルと同じように表示できません

まずは「配布時のままの状態」で確認を

「配布時のままの状態」とは、「当サイトからダウンロードしたファイルを解凍しただけの状態」のことです。

この時、解凍以外の作業（フォルダの中身を移動させたり、名前をかえたり）はしないでください。
（理由は、この後の「ファイルやフォルダの移動・名前の変更には要注意」で説明しています）

解凍したら、フォルダの中にある「index.html」にアクセスし、 「Enter」などのリンクを辿ってページを確認してみましょう。

この時のポイントは、「index.html」から確認を行うことです。
理由は、フレームを使ったテンプレートの場合、「index.html」以外のページにアクセスすると全体を確認できないことがあるためです。

環境によっては「.html」の表記がない場合もありますが、「index」という名前のファイルはフォルダの中に1つしかありませんので、まずはそこから確認します。

当サイトに展示しているサンプル同様にテンプレートが表示されていれば、この時点では問題ありません。

ファイルやフォルダの移動・名前の変更には要注意

前述の「配布時のままの状態」では、「相対パス」で画像やスタイルシートを呼び出しています。

相対パスとは、たとえば「ページに画像を表示したい」場合に、
画像を表示したいファイル（起点）から見て、目的の画像（終点）への順路を示す方法です。

「ファイルやフォルダの移動・名前の変更」を行うと、起点と終点の位置関係や、あらかじめ指定している順路の名前が変化するため、 ご自身が行った変更に合わせて、ソースを修正する必要があります。

意味がわからない場合は、ファイルやフォルダの移動・名前の変更は控えておきましょう。
どうしても変更したい場合は、作業前に相対パスの仕組みを予習しておくとスムーズです。
（最初は難しく感じるかもしれませんが、htmlの基本ですので、覚えておいて損はないと思います）

「自動的にタグが書き換わる」場合があることも知っておく

テンプレートを編集する際に自動修正機能のついたエディタを使用すると、意図せずタグが消えていたり、書き換えられる可能性があります。
また、サーバが提供する「ファイルマネージャ」の中にも自動的にタグを書き換えるものがあります。

関連ページ

• ホームページ・ビルダーで編集すると表示がおかしくなります
• FC2サーバでフレームに斜線が出る・カーソルが変わることがあります

こうした修正機能が働いた場合、タグを書き換えた自覚がないため「何もしていないのに表示がおかしくなった」と思われるかもしれませんが、 自動修正機能に因って生じた問題は、「最終的には、配布時の状態とソースを見比べて「何が違うのかを調べる」」という作業で解決できる可能性が高いです。

ただ基本的には、自動修正機能のないエディタ（Windowsなら「メモ帳」、Macなら「SimpleText」など）を使った編集、 FFFTP などを使ったアップロードをおすすめします。

編集する時は「小まめにチェックすること」「バックアップをとること」

「小まめにチェックすること＝どの段階で表示がおかしくなったのか」を知ることが重要です。
理由は、「表示がおかしくなった」直前に行った作業が原因を作っている可能性が高いため、その部分を元に戻せば、問題を解決できることが多いからです。

たとえば、

「小まめなチェック」をしないと、「どの段階から表示がおかしかったのかわからない」という状況を招きやすいので、 チェック作業を習慣化しておくと良いと思います。

バックアップ（ファイルのコピー）をとることは、「元の状態に戻せなくなった」場合の保険です。
作業がある程度進んだらバックアップをとる、
大きな変更を加える前にバックアップをとる、
というように、要所要所でバックアップをとっておけば問題が起きても復旧が早いです。

最終的には、配布時の状態とソースを見比べて「何が違うのかを調べる」

先述の「まずは「配布時のままの状態」で確認を」で、サンプル通りの表示を確認できたとします。
その時と比べて「表示がおかしくなった」ということは、「異なっている部分（原因）」があるはずです。

冒頭にも書きましたが、「何もしていないのに急に表示がおかしくなる」ということは恐らくありません。

特に原因が思い当たらない場合も、

しかしこの作業はテンプレートの編集が進んでから行うと、元のソースとご自身が追加したソースが混在して、比較しにくいかもしれません。
そんな状態になってから原因を探すことは困難ですので、「編集する時は「小まめにチェックすること」「バックアップをとること」」で挙げたように、「何かをしたらその都度表示の確認をする」という心がけが大切です。

ここに挙げている内容は本当に基本的なことですが、 編集の「コツ」を掴んでおけば、「表示がおかしくなったけど原因の見当もつかない」ことは少ないと思います。
（それでも手に負えない状態になってしまったら、最後に保存したバックアップからやり直しましょう）