HPを編集したあと、更新日時が新しいファイルをすべてアップロードすればよいとは限りません。
大切なのは、実際に変更したファイルと、HTMLやCSSから使われている画像だけを選ぶことです。このページでは、変更内容に合わせて何を送るかを順番に確認します。
このページで分かること
- 変更内容とファイル種類の関係
- アップロード対象を確認する8つの手順
- 画像の保存場所とHTMLのパスの合わせ方
- 公開サーバーへ送らないファイル
- 古いファイルで上書きしない注意点
変更内容からアップロードするファイルを考える
| 変更した内容 | 主に必要なファイル |
|---|---|
| 文章の追加・修正 | 対象のHTML |
| 色、横幅、余白、配置の変更 | CSS |
| ボタンや折りたたみなどの動作変更 | JavaScript |
| 新しい画像の追加・差し替え | 画像ファイルと、必要に応じてHTML |
| HTMLとCSSの両方を変更 | HTMLとCSSの両方 |
| Instagram投稿だけに使う画像 | 通常はHPサーバーへアップロードしない |
アップロードするファイルを選ぶ手順
STEP 1
Codexの変更報告を確認する
変更した内容、ファイル名、完全な保存場所を確認します。変更報告が分からない場合は、アップロード前に確認します。
STEP 2
対象ファイル名と保存場所を確認する
同じ名前のファイルが複数ないか確認し、実際に編集された場所のファイルを使います。
STEP 3
作業内容をファイル種類へ当てはめる
文章ならHTML、デザインならCSS、動作ならJavaScript、画像追加なら画像ファイルというように整理します。
STEP 4
ファイルを開いて変更を確認する
追加した文章や見出し、CSSの指定、画像ファイルを実際に開き、最新版であることを確認します。
STEP 5
HTMLやCSSから使われているか確認する
画像は、HTMLの src やCSSの background-image から参照されているか確認します。
STEP 6
フォルダ構造を保つ
記事、画像、CSSなどを、公開サイトと同じフォルダ階層に置きます。場所が変わるとリンクや画像が表示されないことがあります。
STEP 7
公開中のファイルをバックアップする
上書き前に、サーバー上またはFTP用フォルダの現在のファイルを別の場所へ保存します。
STEP 8
対象だけアップロードして表示を確認する
変更したファイルだけを送ったあと、トップページ、対象記事、画像、CSS、リンクをブラウザで確認します。
画像を追加したときはパスも確認する
記事ファイルから画像を次のように読み込んでいる場合、画像も同じ相対的な場所へアップロードします。
<img src="../images/example-card.png" alt="記事内容を表すカード画像">../images/example-card.png は、記事から一つ上の階層へ戻り、images フォルダ内の画像を使うという意味です。HTMLだけを送って画像を送らなかったり、別の場所へ画像を置いたりすると表示されません。
公開サーバーへ送らないもの
- ZIPファイル
- READMEや作業メモ
- 参考資料や画像生成用の参照画像
- 不採用画像や以前の画像
- バックアップファイル
- Instagram投稿だけに使う画像
- HTMLやCSSから使われていないファイル
必要な画像か判断できない場合は削除せず、作業用または保留フォルダで管理します。
安全に更新するための注意点
- 更新日時だけでアップロード対象を選ばない
- フォルダ全体を毎回まとめて上書きしない
- サーバー上の古いファイルを先に削除しない
- 上書き前にバックアップする
- Googleタグが入った新しいHTMLを、古いHTMLで上書きしない
アップロード前後の確認リスト
- 変更したファイル名と保存場所を確認した
- ファイルを開き、今回の変更が入っていることを確認した
- HTML、CSS、JavaScript、画像の必要な組み合わせを確認した
- 画像パスと保存場所が一致している
- フォルダ構造を変えていない
- 上書き前のバックアップを取った
- 不要な作業用ファイルを選んでいない
- 公開後にページ、画像、デザイン、リンクを確認した