ホームページは、作っただけではインターネット上に表示されません。
自分のパソコンの中にある index.html、style.css、画像ファイルなどを、レンタルサーバーへアップロードすることで、読者がブラウザから見られるようになります。
このページでは、そのアップロード作業で使われる代表的なソフト「FFFTP」について、画面の見方、設定、接続、アップロード、確認、トラブル対処まで順番に説明します。
このページで分かること
FFFTPでHPファイルをサーバーへ送る流れ
- FFFTPとFTPの基本
- FFFTPとは何か
- FTPとは何か
- FFFTPを使う前に準備するもの
- 新規ホストの設定方法
- サーバーへの接続方法
- アップロード直前に「FTP用にする」とは何か
- アップロードするファイルの選び方
- ChatGPT Plus、Codex、FFFTPの役割
- FTP用に整理するメリットとデメリット
- アップロード前後のチェックリスト
- ファイルのアップロード方法
- 上書き確認が出たときの対応
- アップロード後の確認方法
- 初心者が注意するポイント
- よくあるトラブルの対処法
- 「左側がパソコン」「右側がサーバー」という画面の見方
- 接続に必要なFTP情報の準備
- FFFTPの設定手順と接続方法
- HTML、CSS、画像フォルダのアップロード方法
- アップロード後の確認ポイントとよくあるトラブル
01
FFFTPとは
FFFTPとは、自分のパソコンにあるホームページのファイルを、レンタルサーバーへ送るためのソフトです。
ホームページは、HTML（ページの内容を書くファイル）、CSS（見た目を整えるファイル）、画像などのファイルでできています。
それらのファイルは、パソコンの中にあるだけではインターネット上には表示されません。
インターネットで見られるようにするには、レンタルサーバーの中へファイルをアップロードする必要があります。
そのときに使う代表的なソフトのひとつがFFFTPです。
02
FTPとは
FTPとは、パソコンとサーバーの間でファイルを送るための仕組みです。
むずかしく聞こえますが、初心者向けには次の流れで考えると分かりやすいです。
家にたとえると
FFFTPは、HPファイルを運ぶ引っ越し業者のような役割
パソコン内のHPファイル家具や荷物
FFFTP荷物を運ぶ引っ越し業者
サーバーインターネット上の家
ドメイン住所
公開フォルダお客さんに見える部屋
03
FFFTPでできること
FFFTPを使うと、パソコンとサーバーの間でファイルをやり取りできます。
HTMLを送る
index.html や記事ページなどをサーバーへアップロードできます。
CSSを送る
style.css をアップロードして、デザインを反映できます。
画像を送る
images フォルダや記事用画像をサーバーへ送れます。
ダウンロードする
サーバー上のファイルを、パソコン側へ戻すこともできます。
上書きする
古いファイルを新しいファイルで上書きできます。上書き前の確認が大切です。
フォルダを確認する
サーバー内のフォルダ構成を見て、公開場所を確認できます。
04
FFFTPを使う前に準備するもの
FFFTPでサーバーに接続するには、レンタルサーバー側で発行されるFTP情報が必要です。
準備チェックリスト
- □ FTPサーバー名、またはホスト名
- □ FTPユーザー名
- □ FTPパスワード
- □ アップロード先フォルダ
- □ 自分のパソコン側のHPファイル保存場所
FTP情報は大切なログイン情報です
FTPサーバー名、ユーザー名、パスワードは、サーバーに接続するための大切な情報です。ブログ画像やスクリーンショットに載せる場合は、必ず隠してください。
05
FFFTPの画面の見方
FFFTPでは、画面の左右で「どこにあるファイルか」を分けて表示します。
自分のパソコン側
作成したHTML、CSS、画像ファイルがある場所です。
左から右へ送るとアップロードです。
レンタルサーバー側
インターネット上に公開するファイルを置く場所です。
右から左へ戻すとダウンロードです。
初心者のうちは、まず「左がパソコン」「右がサーバー」と覚えるだけでも大丈夫です。
06
FFFTPを準備する流れ
ここでは、FFFTPをダウンロードして、パソコンにインストールし、最初の画面を開くまでの流れを確認します。
FFFTPをダウンロードする
この画面では、FFFTP本体のダウンロードファイルを自分のパソコンに保存します。次に、保存したファイルを開いてインストールへ進みます。
FFFTPをインストールする
この画面では、FFFTPを使える状態にします。インストールが終わると、FFFTPを起動できるようになります。
FFFTPを起動する
この画面では、これから接続するサーバーを登録します。次に「新規ホスト」をクリックして、FTP情報を入力します。
07
FFFTPの設定手順
ここでは、FFFTPにサーバー接続情報を登録する流れを説明します。
新規ホストを設定する
FTP接続情報はそのまま載せない
FTPサーバー名、ユーザー名、パスワードは重要な接続情報です。ブログ記事や画像内に実際の情報をそのまま載せないでください。
FFFTPを起動する
パソコンにインストールしたFFFTPを開きます。スタートメニューなどから「FFFTP」をクリックすると、次にホスト一覧画面が表示されます。
ホスト一覧画面を開く
起動すると「ホスト一覧」画面が表示されます。ここで「新規ホスト」をクリックして、接続先を登録する準備をします。
「新規ホスト」をクリックする
ホスト一覧画面で「新規ホスト」をクリックします。次に、サーバーへ接続するための情報を入力する画面が開きます。
基本設定を入力する（1）
ホストの設定名、ホスト名、FTPユーザー名、FTPパスワード、ローカルの初期フォルダを入力します。FTP情報はレンタルサーバーの管理画面で確認します。
基本設定を入力する（2）
ホストの初期フォルダに、サーバー側の公開フォルダを入力します。例として /public_html などを指定します。
設定を保存する
すべて入力が終わったら「OK」をクリックして保存します。保存すると、ホスト一覧に接続先が追加されます。
ホスト一覧に追加されたことを確認する
ホスト一覧に、設定したホストが追加されていることを確認します。表示されていれば、接続準備ができています。
接続するホストを選択する
接続したいホストを選択して「接続」をクリックします。接続に成功すると、左側が自分のパソコン、右側がサーバーの画面になります。
接続に成功した画面を確認する
接続に成功すると、左右に分かれたファイル一覧が表示されます。左側が自分のパソコン、右側がサーバーです。
アップロードするファイルを選択する
左側でアップロードしたいファイルやフォルダを選択します。複数選択したい場合は、Ctrlキーを使って選べます。
アップロードする
選択したファイルを右側へドラッグ＆ドロップするか、上部の「アップロード」ボタンをクリックします。次にサーバー側へ転送されます。
アップロード完了を確認する
アップロードが完了すると、右側のサーバーにファイルが反映されます。最後にブラウザで自分のドメインを開き、ページが表示されるか確認します。
08
FFFTPでサーバーに接続する手順
- ホスト一覧から接続先を選ぶ
- 「接続」をクリックする
- 接続に成功すると、右側にサーバー側のファイル一覧が表示される
- 接続できない場合は、ホスト名、ユーザー名、パスワード、PASVモード、FTP制限を確認する
接続できないときは、一つずつ確認します
接続できない場合でも、すぐに「全部失敗」と考えなくて大丈夫です。ホスト名の入力ミス、パスワード違い、FTP接続制限、セキュリティソフトの影響など、原因を一つずつ確認します。
09
アップロード直前に「FTP用にする」とは
FFFTPでサーバーへ接続できたら、すぐにファイルを送る前に「何をアップロードするのか」を確認します。
ここでいう「FTP用にする」は正式な技術用語ではありません。FTPそのものを変更したり、HTMLや画像をFTP専用形式へ変換したりする意味ではなく、完成したホームページファイルをサーバーへ安全にアップロードできる状態へ整理する作業です。
「FTPをアップロード用に直してと、ChatGPT Plusに指示（プロンプト送信）するには、
アップロードファイル（HTMLや画像など）が完成し、実際のサーバーに公開・更新する
直前にする。」
この文章でいう「FTP用にする」とは
ここでいう「FTP用にする」とは、FTPそのものを別の形へ変更することではありません。
HTML、CSS、JavaScript、画像などの完成したファイルを確認し、サーバーへアップロードするファイルを選び、フォルダ構成や読み込みパスを整え、公開してはいけないファイルを除外する作業を意味します。
HTMLをFTP専用ファイルへ変換したり、画像の拡張子をすべて変更したりする作業ではありません。
なぜ完成後、アップロード直前に行うのか
制作途中ではファイルが何度も変わるため
制作中は文章、画像、CSS、リンク、ファイル名などが何度も変わります。途中でアップロード対象を決めると、あとから変更したファイルが抜ける可能性があります。
最終的に必要なファイルを確認できるため
完成後なら、変更したHTML、style.css、script.js、追加画像、新しい記事ページ、記事一覧へのリンクなどをまとめて確認できます。
新旧ファイルの混在を防ぐため
新しいHTMLだけを送ってCSSや画像を忘れると、公開サイトでレイアウト崩れや画像切れが起きる場合があります。関連ファイルは一組として確認します。
余計なファイルをサーバーへ送らないため
作業途中の画像、元画像、メモ、下書き、テストページ、FTP接続情報、パスワードを書いたメモ、Git管理用ファイルなどは、公開に必要か確認します。元ファイルをパソコンから削除する必要はなく、サーバーへ送る対象から外すだけです。
上書き前にバックアップを確認できるため
同じ名前のファイルをアップロードすると、サーバー上の既存ファイルが上書きされることがあります。変更前のファイル、バックアップ、上書きしてよい対象を確認してから進めます。
「FTP用にする」ときに確認すること
次の8つを順番に確認すると、アップロード漏れや公開後の表示崩れを減らしやすくなります。
HP制作が完了しているか確認する
- □ 本文が完成している
- □ 誤字脱字を確認した
- □ 画像が正しい位置に表示される
- □ ページ内リンクが動く
- □ 記事一覧から新しい記事へ移動できる
- □ PC表示を確認した
- □ スマートフォン表示を確認した
- □ 横スクロールがない
- □ 仮の文章や「ここに画像」などが残っていない
変更したファイルを確認する
変更ファイル一覧を作ると、何をサーバーへ送る必要があるか見えやすくなります。
変更したページ：
articles/example.html
一緒に変更したファイル：
style.css
追加した画像：
assets/images/example/example-guide.png
リンクを追加したページ：
articles/index.html
変更理由：
新しい記事と画像を追加したため関係するファイルを一組で確認する
HTMLだけではなく、そのHTMLが使っているCSS、JavaScript、画像、記事一覧、関連記事リンクも確認します。
新しい記事ページを追加した場合は、新しい記事HTML、記事一覧のHTML、新しい記事画像、必要なCSS、必要なJavaScript、sitemap.xmlを使用している場合はその更新も確認します。
フォルダ構成を崩していないか確認する
FTP用にするからといって、HTML、CSS、画像を一つのフォルダへ集めないでください。HTMLに書かれた相対パス（今いるファイルから見た場所）は、現在のフォルダ構成を前提にしています。
articles/example.html
から
../assets/images/example.png
を読み込んでいる場合は、
articles と assets の位置関係を維持します。フォルダ構成を崩すと、CSSが反映されない、画像が表示されない、リンクが切れる、JavaScriptが動かない原因になります。
ファイル名を確認する
- □ 半角英数字を中心にしている
- □ 空白を避けている
- □ 日本語ファイル名を避けている
- □ 拡張子が正しい
- □ 大文字と小文字が一致している
- □ HTML内のhrefと実ファイル名が一致している
- □ HTML内のsrcと実画像名が一致している
main.png と Main.png は、サーバー上で別のファイルとして扱われる場合があります。
公開してはいけない情報を除外する
FTPパスワード、FTPユーザー名を含む画像、サーバー管理画面の認証情報、個人情報、メールアドレス、住所、電話番号、銀行口座情報、APIキー、秘密鍵、認証コード、登録専用URL、管理画面固有URL、セッション情報は公開用ファイルへ含めないよう確認します。
「削除」と「アップロード対象から外す」を混同しないでください。パソコン内の元ファイルまで勝手に削除しないでください。
アップロード先を確認する
- 対象ドメイン
- 対象の公開フォルダ
public_html- 既存のフォルダ構成
- 上書きするファイル
- 新規追加するファイル
スターサーバーなど、public_html が公開用フォルダになっている環境では、公開対象のファイルを正しい場所へ置く必要があります。ただし、サーバーごとに構成が異なる可能性があるため、実際のサーバー管理画面と公式マニュアルを優先してください。
アップロード一覧を作成する
ファイル名、パソコン内の保存場所、サーバー側の保存場所、新規追加か上書きか、変更理由、関連ファイル、確認URLを一覧にします。
| ファイル名 | example.html |
|---|---|
| パソコン内 | articles/example.html |
| サーバー側 | public_html/articles/example.html |
| 作業 | 新規追加 |
| 関連ファイル | articles/index.htmlassets/images/example/example.pngstyle.css |
| 確認URL | https://hukugyo.net/articles/example.html |
ChatGPT Plusへ何を頼むのか
ChatGPT Plusへは、作業内容の整理、不足ファイルの洗い出し、アップロード前チェックリスト作成、Codexへ送るプロンプト作成、公開後の確認手順の整理を頼みます。
ただし、ChatGPT Plusへ文章を送るだけで、パソコン内のHTMLや画像が必ず自動修正されるわけではありません。実際のファイルを確認・変更する場合は、ファイルを添付する、HP制作フォルダへアクセスできるCodexを使う、自分でローカル環境を修正するなど、ファイルへアクセスできる方法が必要です。
ChatGPT Plus
考え方を整理し、不足している確認項目、アップロード一覧、Codex用プロンプト、トラブル時の原因候補をまとめます。
Codex
HP制作フォルダを確認し、HTML、CSS、JavaScript、画像パス、リンクを確認します。必要な場合だけファイルを修正し、変更一覧を報告します。
FFFTP
パソコン側のファイルをサーバーへ転送し、サーバー側のフォルダを確認し、必要なファイルを上書きまたは追加します。
ブラウザ
公開URLを開き、ページ表示、画像、CSS、リンク、PCとスマートフォンの見え方を確認します。
ChatGPT Plusへ送る指示の例
# 指示
完成したHP制作フォルダを、
FFFTPでサーバーへアップロードする直前の状態に整えたいです。
ここでいう「FTP用にする」とは、
ファイルを別形式へ変換することではなく、
アップロードするファイルを確認し、
不足、重複、パス間違い、公開不要ファイルがない状態にすることです。
# 確認してほしいこと
・今回変更したHTMLファイル
・一緒にアップロードが必要なCSS
・一緒にアップロードが必要なJavaScript
・追加または変更した画像
・記事一覧や関連記事のリンク
・画像パス
・CSSの読み込みパス
・JavaScriptの読み込みパス
・ファイル名と拡張子
・大文字と小文字
・スマートフォン表示
・公開してはいけない個人情報
・アップロード不要な作業ファイル
・アップロード後に確認するURL
# 出力してほしい内容
1. アップロードするファイル一覧
2. 各ファイルのパソコン内の保存場所
3. 各ファイルのサーバー側の保存場所
4. 新規追加か上書きか
5. 関連して必要なファイル
6. アップロード前チェックリスト
7. アップロード後チェックリスト
8. Codexで確認または修正が必要な項目
# 重要
まだ実際のサーバーへアップロードしないでください。
FTPパスワード、サーバーのログイン情報、
個人情報は出力しないでください。
既存ファイルを削除しないでください。
フォルダ構成を変更しないでください。
不足している情報がある場合は、
推測で決めず「運営者確認が必要」と報告してください。実際のファイル確認をCodexへ頼む場合
# 指示
現在のHP制作フォルダ全体を確認し、
FFFTPでサーバーへアップロードする直前の状態を調査してください。
ここでいう「FTP用にする」とは、
ファイル形式を変換する作業ではありません。
公開に必要なHTML、CSS、JavaScript、画像、記事一覧、
リンク、フォルダ構成を確認し、
アップロード対象を整理する作業です。
# 最初に行うこと
まだファイルを変更しないでください。
最初に調査だけを行い、
次を報告してください。
・変更されているファイル
・新規作成されたファイル
・削除予定のファイル
・HTMLが参照しているCSS
・HTMLが参照しているJavaScript
・HTMLが参照している画像
・リンク先の実在確認
・画像パスの確認
・ファイル名と拡張子
・大文字小文字の不一致
・公開不要と思われるファイル
・個人情報が含まれる可能性
・アップロード先候補
# 調査後の出力
【アップロード対象】
・ファイル名
・ローカルパス
・サーバー側の相対パス
・新規追加または上書き
・アップロードする理由
【関連ファイル】
・一緒にアップロードが必要なファイル
・関連するHTML、CSS、JavaScript、画像
【アップロードしない候補】
・ファイル名
・理由
【確認が必要なこと】
・運営者本人の判断が必要な項目
・サーバー側の現在状態を確認しないと決められない項目
# 重要
調査結果を報告するまでは、
HTML、CSS、JavaScript、画像を変更しないでください。
既存ファイルを削除しないでください。
ファイルを一つのフォルダへまとめないでください。
フォルダ構成を崩さないでください。
FTP接続情報やパスワードを出力しないでください。ファイルがサーバーへ転送される仕組み
既存の「FTPとは」の説明を踏まえて、ここではアップロード直前の整理との関係だけを確認します。
FTP・FTPS
パソコンとサーバーの間で、ホームページファイルを転送するときに使う仕組みです。
HTTP・HTTPS
読者のブラウザが、サーバーにあるホームページを表示するときに使う仕組みです。FTPで送ったあと、読者が見るときはHTTPSなどで表示されます。
アップロード用に整理するメリット
アップロード漏れを減らせる
HTMLだけではなく、CSS、JavaScript、画像、記事一覧など、関連ファイルを一緒に確認できます。
不要な上書きを減らせる
変更していないファイルまで無条件に上書きする危険を減らせます。
フォルダ構成を守れる
画像パスやCSSパスを壊さずに、現在の構成を保ったまま転送できます。
トラブル時に原因を確認しやすい
どのファイルをアップロードしたか分かるため、表示崩れや画像切れが起きたときに原因を絞り込みやすくなります。
元へ戻しやすい
アップロード前のバックアップと変更ファイル一覧があれば、問題が起きたときに戻しやすくなります。
個人情報の公開を防ぎやすい
公開前に画像やファイルを確認することで、FTP情報、メールアドレス、住所、口座情報などを誤ってアップロードする危険を減らせます。
作業記録を残せる
何を変更し、何をアップロードしたかを残すことで、次回の更新作業が分かりやすくなります。
FTP用に整理するときのデメリットと注意点
確認作業に時間がかかります
アップロード対象を整理し、関連ファイルを確認するため、そのまま一括転送するより時間がかかります。ただし、公開後のトラブルを減らすための確認時間です。
必要なファイルを外す可能性があります
自分では不要だと思ったCSS、JavaScript、画像が、別のページで使われている場合があります。使用中か分からないファイルは、勝手に削除したり除外したりしないでください。
同じファイルのコピーが増える場合があります
「FTP用」という別フォルダを毎回作ると、どれが最新か分からなくなる場合があります。別フォルダを作る場合は、作成日、対象更新、元フォルダ、アップロード済みかを明記してください。
上書きミスの危険があります
アップロード先を間違えると、別ページや別ドメインのファイルを上書きする可能性があります。対象ドメインと public_html を必ず確認してください。
通信方式による安全性の違いがあります
暗号化されていない通常のFTPでは、接続情報や転送内容が保護されない場合があります。利用中のサーバーがFTPSやSFTPなどに対応している場合は、公式マニュアルを確認し、対応している安全な接続方法を優先してください。実際のサーバー設定を推測で変更しないでください。
ミラーリングは削除にも注意が必要です
FFFTPなどのミラーリング機能では、パソコン側にないファイルをサーバー側から削除する設定になる場合があります。初心者向けには、最初からミラーリングを標準手順にせず、必要なファイルを一つずつ確認して通常アップロードする方法を基本にします。
別の「FTP用フォルダ」は必ず必要なのか
結論からいうと、必ず別フォルダを作る必要はありません。
正式なHP制作フォルダの構成が整理されており、その中から変更したファイルを選んでアップロードできる場合は、別のFTP用フォルダを作らなくても構いません。
別フォルダのメリット
アップロード対象だけをまとめられる、作業途中のファイルを送りにくい、今回の更新内容が分かりやすい、という良さがあります。
別フォルダの注意点
元フォルダとの内容がずれる、修正後にコピーし忘れる、どちらが最新か分からなくなる、フォルダ構成を間違えてコピーする可能性があります。
- 正式なHP制作フォルダを一つ決める
- Codexは正式なフォルダだけを修正する
- 変更ファイル一覧を作る
- FFFTPでは正式フォルダから必要ファイルを選ぶ
- フォルダ構成を保ったままアップロードする
別のFTP用フォルダを作る場合も、元フォルダを勝手に移動・削除しないでください。
アップロード直前チェックリスト
- □ 本文と画像の修正が完了している
- □ ローカル表示を確認した
- □ PC表示を確認した
- □ スマートフォン表示を確認した
- □ 今回変更したファイルを把握している
- □ HTMLと一緒に必要なCSSを確認した
- □ HTMLと一緒に必要なJavaScriptを確認した
- □ 追加画像を確認した
- □ 記事一覧へのリンクを確認した
- □ 関連記事リンクを確認した
- □ ファイル名と拡張子を確認した
- □ 大文字と小文字を確認した
- □ フォルダ構成を変更していない
- □ 画像パスを確認した
- □ CSSの読み込みパスを確認した
- □ JavaScriptの読み込みパスを確認した
- □ 個人情報が含まれていない
- □ FTP接続情報が含まれていない
- □ アップロード先ドメインを確認した
- □ public_htmlなどの公開先を確認した
- □ 上書き前のバックアップを確認した
- □ アップロード後の確認URLを準備した
アップロード後チェックリスト
- □ 公開URLでページが開く
- □ トップページが表示される
- □ 新しい記事が表示される
- □ 記事一覧から移動できる
- □ CSSが反映されている
- □ 画像が表示されている
- □ JavaScriptが動いている
- □ ページ内リンクが動く
- □ 関連記事リンクが動く
- □ PC表示が崩れていない
- □ スマートフォン表示が崩れていない
- □ 横スクロールがない
- □ 古いページが表示されていない
- □ 必要に応じて強制再読み込みした
- □ 別ブラウザでも確認した
- □ 個人情報が公開されていない
よくある疑問
Q. FTP用にするとファイル形式が変わりますか
A. 変わりません。HTMLはHTML、CSSはCSS、画像は画像のままです。アップロード対象、フォルダ構成、パス、個人情報などを確認して、サーバーへ送れる状態に整える作業です。
Q. HTMLだけアップロードすればよいですか
A. HTMLだけを変更した場合でも、そのHTMLが新しいCSS、JavaScript、画像を使っていれば、関連ファイルも必要です。変更内容によって異なるため、関連ファイルを確認します。
Q. HP制作フォルダごと全部アップロードしてもよいですか
A. 初回公開では必要になる場合がありますが、更新時に毎回すべてを上書きすると、不要なファイルや古いファイルまで転送する可能性があります。変更ファイルと関連ファイルを確認してから進めます。
Q. ChatGPT Plusへフォルダ名だけ伝えれば分かりますか
A. ChatGPT Plusがパソコン内のフォルダへ直接アクセスできない状態では、フォルダ名だけでは中身を確認できません。必要なファイルを添付するか、HP制作フォルダへアクセスできるCodexを使います。
Q. FTP用フォルダを毎回作る必要がありますか
A. 必須ではありません。正式なHP制作フォルダを一つ管理し、変更ファイル一覧を作ってアップロードする方法でも構いません。
Q. FTP用にしたら自動で公開されますか
A. 自動では公開されません。ファイルを整理したあと、FFFTPやサーバーのファイルマネージャーを使って、公開フォルダへアップロードする必要があります。
Q. アップロード後に表示が崩れたらどうしますか
A. 強制再読み込み、別ブラウザ、キャッシュ、アップロード漏れ、HTMLとCSSの組み合わせ、画像パス、アップロード先を順番に確認します。詳しくは 公開ページのレイアウト崩れ確認手順 を見てください。
セキュリティ確認
記事内や公開用ファイルに、実際のFTPサーバー名、FTPユーザー名、FTPパスワード、サーバーのログインパスワード、個人情報、APIキー、秘密鍵、認証コード、管理画面固有URLを掲載しないでください。
public_html、mail など、サーバーが最初から用意している重要フォルダを勝手に削除、移動、名前変更しないようにします。
10
FFFTPでファイルをアップロードする方法
アップロードとは、自分のパソコンにあるファイルを、サーバーへ送る作業です。
- 左側でアップロードしたいファイルを選ぶ
- 右側でアップロード先フォルダを開く
- 左から右へドラッグする
- 上書き確認が出た場合は内容を確認する
- アップロード後にブラウザで表示確認する
上書き確認が出た場合
アップロードするファイル例
index.htmlstyle.cssarticles.htmlまたは記事一覧ページ- 各記事ページ
imagesフォルダ- CSSやJSフォルダがある場合はそれも必要
アップロード先フォルダに注意
サーバーでは、公開用フォルダが決まっている場合があります。たとえば public_html の中に置く必要があるサーバーでは、別の場所にアップロードしてもブラウザに表示されません。
11
アップロード後に確認すること
アップロードが終わったら、必ずブラウザで自分のドメインを開いて確認します。
表示確認チェックリスト
- □ トップページが表示されるか
- □ 画像が表示されるか
- □ CSSが反映されているか
- □ リンクが切れていないか
- □ スマホでも見えるか
- □ 更新前の古いページが表示されていないか
12
FTPアップロード後に公開ページのレイアウトが崩れた場合
FFFTPで修正したファイルをサーバーへアップロードしたあと、公開中のホームページを確認すると、ページの一部だけレイアウトが崩れて表示されたことがありました。
パソコン内で開いたページでは正常に見えていたため、最初は何が原因なのか分かりませんでした。
このような場合は、すぐにHTMLやCSSが壊れたと決めつけず、公開URL、ブラウザキャッシュ、アップロードしたファイル、読み込みパスなどを順番に確認する必要があります。
また、公開ページのURLだけをChatGPT Plusへ伝えるのではなく、どの場所が、どのように崩れているのかを、画面画像や状況説明と一緒に伝えることも大切だと分かりました。
最初からCookieを削除する必要はありません
CSSや画像が古い状態で表示されている場合は、まずページの強制再読み込みとブラウザキャッシュを確認します。
Cookieは、ログイン状態やサイトごとの設定などに使われる情報です。レイアウト崩れを確認するために、最初からCookie、保存したパスワード、自動入力情報まで、すべて削除する必要はありません。
ブラウザの閲覧データを削除する場合は、まず「キャッシュされた画像とファイル」だけを対象にします。Cookieの削除が必要な特別な問題がある場合だけ、影響を確認してから行います。
公開URLで崩れた場所を確認する
パソコン内の file:/// ではなく、公開URLを開いて確認します。今回の場合は、https://hukugyo.net/ 以下の公開ページを確認します。
- ページ全体なのか、一部だけなのか確認する
- 文字、カード、画像、ボタン、余白など、どこが崩れているか確認する
- 崩れた画面のスクリーンショットを保存する
- 可能であれば正常だった画面も保存する
確認するもの
https://hukugyo.net/対象ページ.html
公開状態が分からないもの
file:///C:/Users/...
ページを強制再読み込みする
ブラウザには、以前読み込んだCSS、JavaScript、画像などが一時的に保存されることがあります。
Chromeを使用している場合は、Ctrl ＋ Shift ＋ R で、通常の再読み込みより強い再読み込みを行います。
通常の更新ボタンを何度も押すだけでなく、強制再読み込みを試します。
別の表示方法で確認する
- シークレットウィンドウで同じ公開URLを開く
- Edgeなど別のブラウザでも確認する
- 可能であればスマートフォンでも確認する
- 複数の環境で同じ崩れが出るか確認する
別のブラウザでは正常に表示される場合は、最初のブラウザに古いデータが残っている可能性があります。すべてのブラウザで同じように崩れる場合は、アップロードしたファイルやHTML・CSSを確認します。ただし、この結果だけで原因を断定しません。
必要な場合だけキャッシュを削除する
強制再読み込みでも変わらない場合は、ブラウザの閲覧データ削除画面から「キャッシュされた画像とファイル」を選んで削除し、公開ページを再度開きます。
最初からCookieとその他のサイトデータ、保存したパスワード、自動入力フォームのデータ、ダウンロード履歴まで削除しないようにします。
ブラウザやバージョンによって画面名が変わる可能性があるため、現在のブラウザ画面を優先します。
FFFTPでアップロード状態を確認する
- □ 修正したHTMLをアップロードしたか
- □ style.cssも変更した場合はアップロードしたか
- □ JavaScriptを変更した場合はアップロードしたか
- □ 使用する画像をアップロードしたか
- □ CSSやJavaScriptのフォルダを忘れていないか
- □ 正しい公開フォルダへアップロードしたか
- □ ファイル名と拡張子が一致しているか
- □ 大文字と小文字が一致しているか
- □ HTML内のCSS、JavaScript、画像パスが正しいか
- □ サーバー側に古い同名ファイルが残っていないか
- □ 新しいHTMLと古いCSSが混在していないか
- □ 古いHTMLと新しいCSSが混在していないか
HTMLだけを更新し、そのHTMLで使用する新しいCSSをアップロードしていない場合などは、ローカルと公開サイトの表示が異なることがあります。
反対に、CSSだけを新しくしてHTMLが古い場合も、想定とは違う表示になる可能性があります。必要な関連ファイルを一組として確認することが大切です。
ChatGPT Plusへ状況を伝える
ChatGPT Plusは、公開サイトの状態を整理したり、原因候補を分けたり、Codex用の確認プロンプトを作るために利用します。
コピーして使える入力例
公開URL：
https://hukugyo.net/対象ページ.html
崩れている場所：
例：記事カードの横幅が広がり、右側が画面外へ出ています。
本来の表示：
例：カードが本文幅の中に収まり、スマートフォンでは1列になります。
使用端末：
例：Windowsパソコン、スマートフォン
使用ブラウザ：
例：Chrome
今回アップロードしたファイル：
例：対象記事のHTML、style.css、画像ファイル
ローカル表示：
正常または同じように崩れている
公開表示：
崩れている
すでに試したこと：
強制再読み込み、別ブラウザ、キャッシュ確認
添付するもの：
・崩れた公開画面
・正常な画面
・必要に応じて該当HTMLやCSSChatGPT Plusへ、FTPパスワード、サーバーのログインパスワード、個人情報、管理画面の認証コード、秘密鍵、公開してはいけない接続情報は入力しません。公開URLだけでは崩れ方を正確に伝えられない場合があるため、スクリーンショットと説明を一緒に送ります。
必要な場合はCodexでファイルを確認する
ChatGPT Plusで原因候補を整理したあと、HTML、CSS、JavaScript、画像パスの修正が必要な場合は、Codexへ対象ファイルを確認させます。
- 対象ファイル
- 崩れている場所
- 本来の表示
- 変更してよい範囲
- 変更してはいけない範囲
- PCとスマートフォンの確認
- 既存文章やリンクを削除しないこと
- 原因が分からない場合は勝手に全面修正しないこと
ChatGPT Plus
状況を整理し、原因候補と確認手順を考える。
Codex
ローカルのHTML、CSS、JavaScriptなどを確認し、必要な場合だけ修正する。
FFFTP
修正したファイルをサーバーへアップロードする。
ブラウザ
公開後の表示を最終確認する。
修正後に再アップロードして確認する
- 修正したファイルだけを確認してアップロードする
- 関係のないファイルを一括上書きしない
- アップロード完了をFFFTPで確認する
- 公開URLを強制再読み込みする
- PC表示とスマートフォン表示を確認する
- 別ブラウザでも確認する
- 画像、文字、カード、リンク、余白を確認する
- 問題が直らない場合は、試した内容を追加して再度原因を切り分ける
今回分かったこと
FTPアップロード後の表示崩れは、HTMLやCSSの書き方だけが原因とは限りません。
- 関連ファイルのアップロード漏れ
- HTMLとCSSの新旧データの組み合わせ
- 画像やCSSの読み込みパス
- アップロード先フォルダ
- ファイル名の大文字と小文字
- ブラウザに残った古いキャッシュ
すぐに大きく修正するのではなく、ブラウザ側の表示確認と、サーバー側のファイル確認を分けて進めることが大切です。
13
初心者が特に気を付けること
index.htmlを消さない
index.html はトップページとして読まれる大切なファイルです。削除するとトップページが表示されない原因になります。
imagesフォルダを壊さない
画像が入っているフォルダを消したり、名前を変えたりすると、画像切れが起きやすくなります。
大文字小文字に注意する
サーバーでは Main.png と main.png が別ファイルとして扱われる場合があります。
日本語ファイル名は避ける
文字化けやリンク切れを防ぐため、ファイル名は半角英数字とハイフンを中心にすると安心です。
いきなり全部上書きしない
必要なファイルだけを確認しながらアップロードすると、元に戻しやすくなります。
バックアップを取る
アップロード前にローカル側のファイル一式をコピーしておくと、失敗しても戻しやすいです。
サーバー上のファイルをむやみに削除しない
意味が分からないファイルやフォルダは、削除する前に必ず確認します。
アップロード先を間違えない
公開フォルダの外に置くと、ファイルは存在していてもブラウザから見えません。
14
よくあるトラブル
Q. FFFTPで接続できません。
A. ホスト名、ユーザー名、パスワード、PASVモード、FTP制限、セキュリティソフトを確認します。入力ミスが原因のことも多いので、コピー貼り付け時の余分な空白にも注意します。
Q. アップロードしたのにサイトが変わりません。
A. アップロード先フォルダ、index.html の場所、ブラウザキャッシュ（一時保存データ）、ファイル名、画像パスを確認します。詳しくは FTPアップロード後に公開ページのレイアウトが崩れた場合 を確認してください。
Q. FTPアップロード後に、一部だけレイアウトが崩れます。
A. 強制再読み込み、別ブラウザ、キャッシュ、HTMLとCSSのアップロード状態、読み込みパス、アップロード先を順番に確認します。詳しくは FTPアップロード後に公開ページのレイアウトが崩れた場合 を確認してください。
Q. 画像だけ表示されません。
A. images フォルダ、画像ファイル名、HTML内の src のパス、拡張子、大文字小文字を確認します。
Q. CSSが反映されません。
A. style.css をアップロードしたか、HTML内のCSS読み込みパスが正しいか、ブラウザキャッシュが残っていないか確認します。HTMLとCSSの新旧ファイルが混在していないかも確認します。詳しくは 公開ページのレイアウト崩れ確認手順 を見てください。
Q. 上書きしてよいか迷います。
A. 更新したいファイルであれば上書きして大丈夫です。ただし、不安な場合は上書き前にパソコン側へバックアップを取ってから進めます。古いファイルを残したい場合は、すぐに上書きしないでください。
Q. サーバー上の知らないファイルを消してもよいですか。
A. 意味が分からないファイルは削除しないでください。サーバーやサイト表示に必要なファイルの可能性があります。削除する前に、ファイル名、保存場所、役割を確認します。
15
まとめ
まず覚える3つ
- 左側は自分のパソコン
- 右側はサーバー
- 左から右へ送るのがアップロード
FFFTPは、自分のパソコンにあるホームページファイルを、レンタルサーバーへ送るためのソフトです。
最初は「FTP」「ホスト名」「ローカル」「サーバー側」などの言葉が難しく感じるかもしれません。
でも、まずは 左側が自分のパソコン、右側がサーバー と覚えるだけでも、作業の流れはかなり見えやすくなります。
大切なのは、アップロード先フォルダを間違えないこと、index.html や images フォルダをむやみに削除しないこと、アップロード後にブラウザで必ず確認することです。
16
次にやること
FFFTPの設定ができたら、次は実際にHTMLファイル、CSSファイル、画像フォルダをサーバーへアップロードします。
アップロード後は、ブラウザで自分のドメインを開き、ページが正しく表示されるか確認します。
表示されない場合は、ファイルの場所、ファイル名、画像パス、CSSの読み込み先を一つずつ確認します。