HTMLファイルをサーバーにアップロードしてからのことです。
アップロードしたHTMLファイルで表示しているウェブページの内容を編集したくなることがあります。
ちょっとした文章を書き換える編集だったり、画像を差し替える編集、HTMLのタグを修正するなど、サーバーにアップロードしたHTMLファイルを編集する内容は様々ですが、どれもサーバーにアップロードしている既存のHTMLファイルをFTPソフトでローカルにダウンロードして編集をします。
サーバーにアップロードしたHTMLファイル
ウェブサイトに使用しているサーバーにはアップロードした複数のHTMLファイルが保管してありますが、例えば商品ページを表示しているHTMLファイルがサーバーにアップロードしてあり、HTMLファイル名がproducts.htmlだとします。
予想以上に商品の売れ行きが良くないので、サーバーにアップロードしたproducts.htmlに記載している商品金額を変更するために編集をしたい。
このような編集目的があるHTMLファイルがproducts.htmlだとします。
FTPでHTMLファイルをローカルにダウンロード
サーバーにアップロードしているHTMLファイルはFTPソフトを使用してローカルにダウンロードすることで編集作業ができます。
たとえばFTPソフトがFileZillaの場合、編集する予定のHTMLファイルが保管されているウェブサーバーにFTPソフトで接続することで、使用しているPCのローカルフォルダとウェブサーバーのフォルダの両方がFTPソフトの画面で操作できるので、サーバー上のHTMLファイルをローカルに転送してダウンロードすることができます。
上の画像はサーバーにアップロードしてある既存のHTMLファイル「products.html」をローカルにダウンロードしたときのスクリーンショットです。
FileZillaでウェブサーバーに接続して、サーバー側のフォルダ(上画像の右側)products.htmlをマウスで右クリックすることで、コンテキストメニューを表示させ、ダウンロードをクリックしてローカルにダウンロードすることができます。
FTPでサーバーからローカルにHTMLファイルをダウンロードしても、サーバー側のHTMLファイルは消えることはなくローカルに転送されるので、ダウンロードしたローカル側のHTMLファイルを使用して編集ができます。
HTMLファイルの編集前はバックアップしておく
ローカルにダウンロードしたHTMLファイルは編集することになりますが、編集前にはHTMLファイルのバックアップを取っておきます。
HTMLファイルのバックアップ方法は簡単です。
上の画像はMacの場合ですが、バックアップするHTMLファイルを右クリックして、コンテキストメニュー内の「”ファイル名.html”を圧縮」をクリックすることでzipファイルが作成できるのでバックアップファイルにできます。
Windowsの場合はバックアップするHTMLファイルを右クリックして表示する「送る」から「圧縮（zip形式）フォルダー」を選択するとzipファイルが作成できるのでバックアップファイルにできます。
このようにHTMLファイルの編集前にバックアップを作成しておくと、HTMLファイルの編集を間違えた場合にはzipファイルを解凍してサーバーにFTPでアップロードするだけで、編集前のウェブページの状態に戻すことができます。
HTMLファイルを編集する
サーバーからローカルにダウンロードしたHTMLのバックアップを取ったら、HTMLファイルを編集する作業です。
HTMLファイルを編集する方法はテキストエディタを使用します。
例えばvscode(Visual Studio Code)というテキストエディタでHTMLファイルを編集する場合は、編集するHTMLファイルをvscodeで開き、編集作業をします。
今回は商品ページのproducts.htmlを編集するのを例にしていますので、products.htmlをvscodeでファイルを選択して開くか、ドラッグ＆ドロップの操作で開きます。
テキストエディタVisual Studio Codeをインストールする
エディタで開くとproducts.htmlに記述しているHTMLのタグやテキストが表示するので、タグやテキストなど必要な編集をします。
編集が終わったらHTMLファイルの編集内容を保存します。
編集したHTMLファイルをサーバーにアップロード
編集したHTMLファイルはFTPソフトで、サーバー側に置かれている編集前のファイルがあるフォルダ内にアップロードします。このときサーバー側のアップロード先フォルダは間違えていないかを確認してからアップロードします。
編集したHTMLファイル名とサーバーに保存しているHTMLファイル名が同じ場合は、アップロードしようとすると「ターゲットファイルはすでに存在しています」と表示された画面が表示するので「上書き」を選択してOKをクリックします。
すると、編集済みのHTMLファイル内容で、サーバー側のHTMLファイルを上書してアップロードできます。
いきなり上書きしてしまうのは怖いかも。って場合があるかもしれません。他人のホームページのHTMLファイルを編集する場合などです。
そんなときは編集したローカルのHTMLファイル名を変更してサーバーにテストアップします。
例えばproducts.htmlを編集してアップロードするとしたらproducts-BK20211114.htmlのようにファイル名を変更して、サーバー側のproducts.htmlが保存してあるフォル内にアップロードします。
アップロードするとサーバーにはproducts.htmlとproducts-BK20211114.htmlの2つのHTMLファイルが存在することになりますが、ブラウザではproducts-BK20211114.htmlにアクセスします。
そしてHTMLファイルが問題なく編集後の内容でブラウザに表示されていれば、ローカルのproducts-BK20211114.htmlをproducts.htmlにリネームして上書きでアップロードします。
アップロード後ブラウザでproducts.htmlにアクセスすると編集したHTMLファイルの内容が反映します。
最後に、テストアップした場合はproducts-BK20211114.htmlのHTMLファイルがサーバーにアップしてある状態です。
重複ページ扱いにならないように、サーバーのproducts-BK20211114.htmlは削除しておきます。
これでサーバーにアップロードしたHTMLファイルを編集するのは完成です。
