テンプレートがサンプルと同じように表示できません

圧縮ファイル解凍後、まずはどこにも手を加えず、ご自身の環境で表示と動作の確認をなさることをおすすめします。 その後、以下をチェックしてみてください。
(個別サポートは出来かねますので、1つ1つご確認ください)

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

必要なファイルを全てアップロードしていますか?

「文字の大きさや色が反映されない」、「背景画像が表示されない」など、デザインを再現できない場合はスタイルシートが読み込まれていない可能性が高いです
デザインは主にスタイルシート(拡張子css)が構成しますので、必ずアップロードしてください。

また、アップロードの際は相対パスを活かした構成にすることに注意が必要です(理由は後述しています)。

ファイルやフォルダの移動・名前の変更をすると相対パスが無効になる可能性がありますので、あらかじめ相対パスの仕組みの理解が必要です。

「必要なファイルは全てアップロード済みなのに表示がおかしい」とご連絡をいただくことがありますが、

実際には必要なファイルが欠けていたり、アップロードする場所を間違えている(パスと合致しない)ケースが大半です。

先述のとおり、デザインを再現できない場合はスタイルシートが読み込まれていない可能性が高いので、「パスで指定した場所にスタイルシートが存在しているか」を重ね重ねご確認ください。

関連ページ

各ファイルの呼び出しアドレスは正しいですか?

テンプレートで使用する画像やスタイルシートは「相対パス」で読み込んでいます。
そのため、ファイルやフォルダの移動・名前の変更を行う場合は同時に関連箇所の書き換えが必要です。

たとえば当サイトのテンプレートでは、デザインを構成するためのスタイルシートを以下のように読み込んでいます。

<link rel="stylesheet" type="text/css" href="img/style.css">

上記は「img」フォルダの中の「style.css」を読み込むという指示です。
つまり、「style.css」は「img」という名前のフォルダに入っていなければパスが無効になります。

特に変更する必要がない場合や、意味がわからない場合は、ファイルやフォルダの移動・名前の変更をせず、配布時の状態のまま設置なさることをおすすめします。

関連ページ

必要なタグが消えていませんか?

テンプレートで使用しているタグの多くは、<開始タグ> と </終了タグ> がペアになっていなければいけません。
開始タグがあるのに終了タグがない、開始タグがないのに余分な終了タグが存在している、といった記述ミスはデザイン崩れの原因になる可能性が高いです。
ソースにミスがないか htmlの文法チェックツール で確認してみてください。


また、テンプレートを編集する際に自動修正機能のついたエディタを使用すると、意図せずタグが消えていたり、書き換えられる可能性があります。
編集の際は、自動修正機能のないエディタ(Windowsなら「メモ帳」、Macなら「SimpleText」など)を使用するか、自動修正機能をオフにした方が、ソフトの機能に依る問題を回避できます。

関連ページ

正しいモード(アスキーorバイナリ)で転送していますか?

画像は必ず「バイナリモード」で転送してください。
画像を「アスキーモード」(あるいは「テキストモード」)でアップロードすると正しく表示できない可能性があります。

転送モードがわからない場合は、お使いのアップローダーやFTPクライアントのマニュアル等をご確認ください。


サーバやレンタルツールの影響はありませんか?

サーバやレンタルツールによっては、自動的にタグが書き換えられたりコードが挿入されることがあります。

「サーバにアップロードした直後」からページが正しく表示されないのであればサーバの影響を、 「レンタルツールの使用を開始した直後」からならレンタルツールの影響を受けている可能性があります。

それぞれの仕様については、お使いのサーバやレンタルツールのヘルプ等をご確認ください。

関連ページ

いずれにしても「何かの拍子に表示が変わってしまった」場合は、その段階に原因がある可能性が高いと思われます。 小まめなチェックとバックアップの保存をおすすめします。
どの段階で表示が変わったのかわからない場合は、配布時の状態とソースを見比べて「何が違うのかを調べる」ことで解決に繋がる可能性があります。

スポンサーリンク
レスポンシブ