サーバーにアップロードしたHTMLファイルを編集する

サーバーにアップロードしたHTMLファイルを編集する

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をマウスで右クリックすることで、コンテキストメニューを表示させ、ダウンロードをクリックしてローカルにダウンロードすることができます。

 

FileZillaをダウンロードしてインストールするやり方

 

FTPでサーバーからローカルにHTMLファイルをダウンロードしても、サーバー側のHTMLファイルは消えることはなくローカルに転送されるので、ダウンロードしたローカル側のHTMLファイルを使用して編集ができます。

 

Advertisement

 

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ファイルを上書してアップロードできます。

 

Advertisement

 

いきなり上書きしてしまうのは怖いかも。って場合があるかもしれません。他人のホームページの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ファイルを編集するのは完成です。

HTMLカテゴリの最新記事