![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
FTPの仕組みもわかったし、FileZillaのダウンロードもできたよ!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
じゃあ、実際にFileZillaを使って新しいロゴに差し替えてみよう!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
HPのロゴをこんな風に変更したいんだけど…
![](https://techkoya.com/wp/wp-content/uploads/2023/07/テクこや用ロゴ-1.png)
![](https://techkoya.com/wp/wp-content/uploads/2023/07/テクこや用ロゴ-1.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/logo.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/logo.png)
FileZillaを使って修正・変更してみよう!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
まず初めに、前回のおさらいも含めてFTP(FileZilla)を使った修正方法を整理してみよう!
- FTP(FileZilla)をダウンロードする
- FileZillaを開き、修正したいHPのサーバーに接続する
- サーバー内の修正したいファイルをダウンロードし、バックアップをとる
- ダウンロードしたファイルの名前を変更する
- 修正したファイル、もしくは新規ファイルを同じファイル名にして上書きする
FileZillaの公式サイトからダウンロードする。
![](https://techkoya.com/wp/wp-content/uploads/2023/07/DLの仕方①のコピー-1024x545.jpg)
![](https://techkoya.com/wp/wp-content/uploads/2023/07/DLの仕方①のコピー-1024x545.jpg)
接続したいサーバーの情報(ホスト、ユーザー、パスワードの3点)を入力し、接続ボタンをクリック。
![](https://techkoya.com/wp/wp-content/uploads/2023/07/モザイクありFileZila接続のコピー-1-1024x472.jpg)
![](https://techkoya.com/wp/wp-content/uploads/2023/07/モザイクありFileZila接続のコピー-1-1024x472.jpg)
バックアップをとる
HPのサーバーから修正予定、もしくは上書き予定のファイルを自分のパソコン側に
ダウンロードします。
デスクトップにそのままドラッグ&ドロップでダウンロードすることも可能です。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
修正したいロゴのファイルがHPのどこに入っているのか、
事前に検証ツールで調べる必要があるね♩
![](https://techkoya.com/wp/wp-content/uploads/2023/08/ファイルをダウンロード-2-1024x537.png)
![](https://techkoya.com/wp/wp-content/uploads/2023/08/ファイルをダウンロード-2-1024x537.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
万が一に備えて、ファイルを自分のパソコン側にダウンロードして
必ずバックアップをとろう!!
そのまま上書きしてしまうと、二度と元に戻せなくなるよ!
マウスの右クリックで名前を変更できます。
変更したら、同じようにドラッグ&ドロップでサーバー側に移行できます。
※名前を変更すれば、上書きされることはありません。
![](https://techkoya.com/wp/wp-content/uploads/2023/08/スクリーンショット-2023-08-17-16.52.16-2-1024x599.png)
![](https://techkoya.com/wp/wp-content/uploads/2023/08/スクリーンショット-2023-08-17-16.52.16-2-1024x599.png)
![](https://techkoya.com/wp/wp-content/uploads/2023/08/スクリーンショット-2023-08-17-15.50.44-2-1024x534.png)
![](https://techkoya.com/wp/wp-content/uploads/2023/08/スクリーンショット-2023-08-17-15.50.44-2-1024x534.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
あれ…?
FileZilaに上書きしたはずなんだけど反映されてない…?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
ファイルを上書きする時は、ファイル名を変更前のファイル名と必ず同じ名前にしてから上書きしてね!
じゃないとバックアップをとって名前を変更した時と同じように別名保存になっちゃって上書きされないよ。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
あ~だからさっきファイル名を変えてバックアップしてって言ったのか!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
そうそう、基本的にローカルでファイルを上書き保存、別名保存、削除などする時と変わらないよ!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
なるほど!そう考えるとわかりやすいね!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
やった〜ロゴを変更できた!!
まとめと注意点
- 必ず自分のパソコン側にダウンロードし、バックアップをとる。
- 上書きされないよう、ダウンロードしたファイルの名前を変更する。
前回に引き続き、HPのちょっとした修正(ロゴや画像の差し替えなど)の実際のやり方を説明しました♪
FTPにまだ慣れてない初心者の方だと、ファイル名を変更したために修正が反映されなかったり、ファイルのバックアップを取らずそのまま誤ったファイルを上書きしてしまってトラブルに繋がることもあるので、特に2つの注意点だけは肝に銘じておきましょう。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ぞう-1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ぞう-1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ぞう-1-150x150.png)
修正してもらって悪いんだけど、やっぱり元に戻してくれない?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ハムスター-150x150.png)
ぎゃーーー!!
バックアップ取らずにそのまんま上書きしてしまったーーー!!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/ひつじ-150x150.png)
だからバックアップは大事って言ったでしょーーー!!!
ぜひweb制作の現場でもFTP(FileZilla)を積極的に活用してみてくださいね!
質問などあれば気軽に書き込んでくださいね♪