このページでは、FTPソフト「FileZilla」を使ったファイルの更新方法や、バックアップを行う方法の解説、さらにはソフトウェアのインストール方法も解説しております。

そもそも「FTPソフト」とは、サーバー上にあるファイルをデスクトップにダウンロードしたり、デスクトップにあるファイルをサーバー上にアップロードする事が出来るソフトのことです。

しかし、最近はレンタルサーバー側で、FTPソフトを使わなくてもいいような、便利な機能があったり、WordPress側でも、管理画面からサーバーにあるファイルの編集が行えるなど、ブラウザ上の操作だけで完結するサービスが増えています。
なので、FTPソフトの使い方、名前すら知らない方が多くなっています。

ところが、FTPソフトを使えないと、サイト運営に必要以上に時間がかかる場合や、大変なことになってしまうケースもあります。

たとえば、管理画面からテンプレートのカスタマイズを行っている際に、間違ったカスタマイズを行ってしまい、サイトが真っ白に。
さらには、管理画面にも入れない!

こういった場合に、FTPソフトが使えると、すぐに復旧できる可能性が高くなります。

FTPソフトが使える場合、サーバーにあるファイルを直接編集することができるので、カスタマイズ時に間違えた部分を変更、修正することが出来ます。

もちろん、FTPソフトを使わなくても、場合によってはサーバー会社に依頼して問題が起きる前の元の状態に復旧してもらうことも可能です。
ただ、復旧までに長い時間がかかったり、別途費用が必要だったりすることもあるため、やはり自身でFTPソフトを使って直ぐに問題のあるファイルを修正できるようにしておく方が良いでしょう。

お金も時間も膨大にかかる、というのは、誰しも避けたいですよね。

この真っ白になる現象は皆さまにも起こりうることで、注意していても避けるのが難しい場面があります。

通信が不安定な状態で更新をしてしまったり、新しく導入したプラグインが利用しているサーバーの環境で動作しなかったりと、起きる原因は様々です。

日常的にサイトを運用したり、作成したりしている私もたびたびそういった場面に遭遇します。

そんなときに、たびたびFTPソフトに救われています。

そのため、まだFTPソフトを利用したことがない、という方はぜひこの機会にFTPソフトの利用方法を覚えて、問題が起きたときに備えるようにしましょう。

ここでは無料のFTPソフトで、WindowsでもMacでも利用でき、弊社でも実際に利用している「FileZilla(ファイルジラ)」を紹介いたします。

「FileZilla(ファイルジラ)」のダウンロード

「FileZilla」を利用するために、まずは「FileZilla」をダウンロードしてインストールしましょう。
「FileZilla」はいろいろなサイトからダウンロードできますが、ここでは以下のURLからダウンロードしてみましょう。

上記にアクセスすると次のような画面が表示されます。

「FileZilla」のダウンロードページ

色々なことが書かれているうえに、ファイル自体色々なかたちでダウンロード出来てしまうので、迷うところですが、ページの中ほどにある「ダウンロード」の下、「最新リリース」の見出しが付いたところから、一番上にあるリンクをクリックするとスムーズです。

この記事を作成している段階では、バージョン3.38.0が最新版で、一番上には「FileZilla_Client 3.38.0」の文字がありますので、ここをクリックします。

クリックすると、ずらっとダウンロードリンクが並んだ状態のページに移動しますので、今度はその中からご自身の環境に該当するファイルをダウンロードする必要があります。

たとえば、Windowsならばあなたの環境に合わせて、32ビット版用の「win32-setup.exe」または64ビット版用の「win64-setup.exe」のどちらかクリックします。

環境に合わせてクリックする

ご自身のWindowsのビット数がどちらかが分からない方は以下のリンクの手順で確認できます。

該当するリンクをクリックするとFileZillaの実行ファイルのダウンロードが始まりますので、ダウンロードが終わるのを待って、実行ファイルをダブルクリックして実行してみましょう。

「FilleZilla」のインストール

FilleZillaをダブルクリックすると、インストールが開始されます。

まずはライセンスに関するお知らせが表示されますので、確認して「I Agree」をクリックします。

「I Agree」をクリック

次はインストールプションです。
通常はそのまま「Anyone who uses this computer(all users)」のまま「Next」をクリックしても大丈夫でしょう。

「Next」をクリック

次いで、コンポーネントの選択についてです。
「Desktop Icon」以外のチェックボックスにチェックが入っている状態ですので、ここは「Desktop Icon」にもチェックを入れて「Next」をクリックしましょう。

「Desktop Icon」にもチェックを入れて「Next」をクリック

その次はインストール場所の選択です。
表示されている場所で問題なければ「Next」をクリックしましょう。

問題なければ「Next」をクリック

最後に「Install」をクリックすると、インストールが始まります。

「Install」をクリック

インストール中

インストールが終了したら「Finish」をクリックしましょう。

「Finish」をクリック

FileZillaのインストールの際にWindowsをご利用で「このアプリがデバイスに変更を加えることを許可しますか」のような質問を聞かれたら、「はい」をクリックようにしてください(バージョンによって表現が少し異なります)。

なお、本来この質問は、セキュリティのために設けられているものです。
したがって常に「はい」とすればよいわけではありません。
今回は「FileZilla」をインストールしようとしていて問われているものなので、「はい」で問題ありませんが、何もインストールしようとしていないのにこの表示が出る場合などは、注意が必要かもしれません。

「Finish」のあと、「FilleZilla」が立ち上がります。
次のような画面が出るはずです。

FilleZillaが起動した状態

「FileZilla(ファイルジラ)」でサイトを設定する

では、早速FilleZillaを使ってみましょう。

FilleZillaを起動した状態で、左上のメニューから「ファイル」→「サイトマネージャー」をクリックします。

「サイトマネージャー」をクリック

次のようなパネルが表示されますので、「新しいサイト」をクリックしましょう。

「新しいサイト」

すると「新規サイト」が追加されます。
名前を変更できるので、後から複数のサイトを利用できるように、区別できる名前を付けておきましょう。

「新規サイト」が追加

アカウント情報の取得とサイトの設定

ここまで用意できたら、次に必要なのは、ご利用のレンタルサーバーが発行する「アカウント情報」です。
FTPの接続には、通常次のアカウント情報が必要です。

  • ホスト
  • ユーザー
  • パスワード

アカウント情報については、通常レンタルサーバーからのメールに記載してあるか、サーバーの管理画面で確認できるはずですので、お持ちでない方は一度メールボックスやサーバーの管理画面のヘルプを探してみましょう。
(※どこにあるか分からない場合は、検索エンジンで「レンタルサーバー名+FTP」で検索するとたいていどこを見ればよいか書かれたヘルプや記事が見つかるはずです。)

ここでは、エックスサーバーとロリポップについて、少し詳しくアカウント情報を取得し、サイトの設定を行う方法をご案内したいと思います。

エックスサーバーでアカウント情報を確認する方法

エックスサーバーの場合、サーバーの申し込みが完了した際に「サーバーアカウント設定完了のお知らせ」というメールが届いているはずで、その中にそれぞれ「FTPホスト」「FTPユーザー」「FTPパスワード」が書かれています。

これらを、それぞれFileZilla上の対応する項目に入力(コピペ)していきます。

  • FTPホスト:ホスト
  • FTPユーザー:ユーザー
  • FTPパスワード:パスワード

「ユーザー」と「パスワード」を入力できるようにするために「ログオンの種類」を「通常」に変更し、上記3か所に必要な情報を入力しましょう。
情報を入力したら「接続」をクリックします。

3か所に必要な情報を入力したら「接続」をクリック

「サーバーの証明書は不明です。信用できるサーバーか・・・」というメッセージが出ますので、「OK」をクリックします。

「サーバーの証明書は不明です。信用できるサーバーか・・・」というメッセージが出たら、「OK」をクリック

これでサイトの設定が完了し、サーバーにアクセスする準備が整いました。

エックスサーバーでのFTPの使い方については、以下のヘルプも参考にしてください。

ロリポップでアカウント情報を確認する方法

まず、ロリポップを利用する例をご説明します。
ロリポップの場合、サーバーのユーザー専用ページから確認できますので、まずはログインしましょう。

ロリポップにログイン

ログイン後、ユーザー画面の「ユーザー設定」、「アカウント情報」とクリックして「アカウント情報」のページに移動します。

「アカウント情報」のページに移動

この画面をスクロールして、ページを下へ移動していくと「サーバー情報」という場所があります。
ここに書かれているのがFTPで必要な情報です。

「サーバー情報」にFTPで必要な情報

少し表現が異なりますので説明しますと上記の項目の内、それぞれFileZilla上では以下のようになっています。

  • FTPSサーバー → ホスト
  • FTP・WebDAVアカウント → ユーザー
  • FTP・WebDAVパスワード → パスワード

これをそれぞれFileZillaに入力(コピペ)していきましょう。

「ユーザー」と「パスワード」を入力できるようにするために「ログオンの種類」を「通常」に変更し、上記3か所に必要な情報を入力しましょう。
情報を入力したら「接続」をクリックします。

3か所に必要な情報を入力したら「接続」をクリック

「サーバーの証明書は不明です。信用できるサーバーか・・・」というメッセージが出ますので、「OK」をクリックします。

「サーバーの証明書は不明です。信用できるサーバーか・・・」というメッセージが出たら、「OK」をクリック

これでサイトの設定が完了し、サーバーにアクセスする準備が整いました。
ロリポップでのFTPの使い方については、以下のヘルプも参考にしてください。

「FileZilla(ファイルジラ)」の利用方法

次は実際にFileZillaを使ってFTP経由でファイルを更新する方法をご紹介します。

まず、FileZillaの画面の構成を見てみましょう。
以下の画面はFileZillaの右側部分をキャプチャしたものでです。
先ほどご紹介したロリポップのサーバーにFTPで接続した状態です。

FileZillaの画面

「リモートサイト」と書かれたところ(1)が現在あなたのいる場所です。
ここでは「/」なっていますが、これはあなたがサーバー内でアクセスできる一番上の階層を指しています。

FileZillaの画面の構成

ロリポップの場合、この「/」の階層が、実際のサイトのトップページと一致しているので、「http://ドメイン.com」というドメインにアクセスすると、この「/」直下にある「index.php」の内容がブラウザに表示されます。

ただ、「/」の階層と実際のサイトのトップページと一致していないサーバーは多く、たとえばエックスサーバーは「/ドメイン名/public_html/」とアクセスした場所がトップページになります。

エックスサーバーは「/ドメイン名/public_html/」とアクセスした場所がトップ

その下にあるのが「ディレクトリ構成図(2)」です。
「/」はサイトの一番上(ルート)、「wp-admin」「wp-content」「wp-includes」はルートの次の階層にある「ディレクトリ」を示しています。

この構成は、ブラウザ上でアクセスして見るサイトの構成と一致しており、私たちがブラウザで「http://ドメイン.com/wp-content/」にアクセスすると「wp-content」にアクセスすることになります。

さらにその下には「ファイルの一覧(3)」が並んでいますが、ここには現在いるフォルダに入っているファイルやディレクトリがすべて表示されています。
ここでは、サイトトップに関するものや、その他サイトの構成に関わるファイルが入っています。

FileZillaの画面の構成

FileZillaを利用するとき、基本的には(2)を辿って現在地を移動し、(3)から編集したいファイルをダウンロードしたり、更新したファイルをアップロードします。

更新・編集するファイルは、基本的に、サイトのトップの場所(上記の場合、ロリポップだと「/」、エックスサーバーだと「/ドメイン名/public_html/」)以下で、実際のウェブサイトの構成と一致していることが多いです。

つまり、「http://ドメイン.com/」を更新したい場合は「/」や「/ドメイン名/public_html/」にある「index.php」や「index.html」を編集しますし、「http://ドメイン.com/contact/form.php」を更新したい場合は「/contact/」や「/ドメイン名/public_html/contact/」にある「form.php」を編集します。

これはCSSファイルや画像ファイルでも同様で、たとえば「http://ドメイン.com/images/logo.jpg」を差し替えたい場合は、「/images/」や「/ドメイン名/public_html/images/」にある「logo.jpg」を同名のファイルで上書きして差し替えます。

実際にファイルを更新してみる

では、ここまで確認したところで実際にファイルを更新してみましょう。

以下は「/var/www/html/05/html/」がサイトのトップページになるサーバーの例です。
ここに先ほどテンプレートメーカーからダウンロードしてきたばかりの賢威HTML版をアップロードします。

アップロードの方法は簡単です。
下の画面のように、ローカル(デスクトップ上)にあるファイルをFileZilla右のファイルのボックスの中にドラッグ&ドロップするだけです。
これだけで、自動的にアップロードが始まります。

賢威のファイルをFileZilla右のファイルのボックスの中にドラッグ&ドロップ

アップロードが完了すると、以下のようにFileZillaのディレクトリ上に賢威HTML版の各ファイルが表示されます。

賢威HTML版の各ファイルが表示される

この状態でサイトのURLにアクセスすると、賢威のHTML版がアップロードされているのが分かります。

賢威のHTML版がアップロードされて表示されている

では、今度はこの内容を編集してみましょう。
サイト名の「The Future [Web Magazine]」を「Keni News」と変更してみます。

デスクトップ上にある「keni71_html_cool_black_201805241701」の直下にある「index.html」をテキストエディタで開き、該当箇所を変更します。
この場合、以下の流れで変更して、保存しました。

●変更前

●変更後

するとデスクトップ上の「index.html」のサイト名は「Keni News」になり、サーバー上の「index.html」のサイト名は「The Future [Web Magazine]」のままです。

この状態で、先ほどFTPでサーバー上に賢威をアップロードしたときのように、編集した「index.html」だけをFTPに追加してみましょう。

編集した「index.html」をFTPに追加

「対象のファイルは既に存在しています」と表示されたと思います。
今回は、単に上書きをして更新をサーバー上のファイルに反映したいので、「動作」から「新しければ上書き」を選んで「OK」をクリックしてください。

するとサーバー上のファイルが上書きされます。

ファイルをドラッグ&ドロップする際に気を付けていただきたいのですが、下記画像のようにファイルをディレクトリフォルダに重ねた(青くなった)状態でファイルを離してはいけません。

ファイルをディレクトリフォルダに重ねた(青くなった)状態でファイルを離してはいけない

ディレクトリに重ねてアップロードしまうと、そのディレクトリにファイルがアップロードされてしまうので、意図しないところにアップロードされたり、重ねたディレクトリに同じ名前のファイルがあった場合、そちらが上書きされてしまいます。
ドラッグ&ドロップのときには十分注意するようにしましょう。

では、先ほど更新した内容が反映されているか、実際にサイトを表示してみてみましょう。
アクセスしてみると、サイトタイトルが更新されていることが分かります。

更新されたページ

このように、デスクトップ上にあるファイルをサーバー上にある同名のファイルのある場所にドラッグ&ドロップして上書きすることで、内容を更新することができます。
これは、「html」ファイルに限らず、「CSS」や「PHP」、「JS」といったファイル、「JPG」や「PNG」などの画像ファイルでも同じです。

反対に、サーバーの中にあるファイルをデスクトップ上にダウンロードしてくる場合もドラッグ&ドロップで行うことができます。
デスクトップ上にないファイルを編集したい場合は、サーバーの中のファイルを選んでドラッグ&ドロップでデスクトップ上にダウンロードしましょう。

デスクトップ上にないファイルを編集したい場合は、サーバーの中のファイルを選んでドラッグ&ドロップでデスクトップ上にダウンロード

なお、このときも同様にダウンロードしようとしているファイルと同名のファイルのあるフォルダにダウンロードすると上書きをするかどうかを聞かれます。

上書きしたくない場合は、あらかじめダウンロードするためのフォルダを新規作成しておくようにしましょう。

カスタイマイズ時のファイルのバックアップ

もし、賢威のカスタマイズを行いたい場合は、上記の手順で自分のPCにファイルをダウンロードして保管し、ファイルのバックアップを行いましょう。

WordPressを更新する場合

なお、WordPressの場合、少し特殊でサーバーのトップやWordPressをインストールした階層を編集して、ドメインの表示を変えることはできません。
これはWordPressが簡単にテーマを変えたりできるよう、別のディレクトリにあるファイルをプログラムで処理して別の階層に表示する仕組みになっているからです。

実際には「/」や「/ドメイン名/public_html/」にインストールしているWordPressのHTMLやCSSを編集するには「/wp-content/themes/適用されているテーマ/」や「/ドメイン名/public_html/wp-content/themes/適用されているテーマ/」の中を編集する必要があります。

WordPressをインストールすると、インストールした場所より下の階層に「wp-admin」「wp-content」「wp-includes」などがありますが、賢威テンプレートを含む「テーマ」や「プラグイン」はこの内「wp-content」の中にあるということは忘れずに覚えておいてください。

正確には「wp-content」の直下にある「themes」ディレクトリの中にあるのがテーマで、「keni62_wp」や「keni71_wp」から始まるのが賢威テンプレートです。
賢威のWordPress版テーマをカスタマイズする場合はこの中のファイルを編集します。

テンプレートは「wp-content」の直下にある「themes」ディレクトリの中にある

また、プラグインは「wp-content」の直下にある「plugins」ディレクトリにプラグインが入っています。

WordPressに管理画面からアクセスできなくなった場合は、FTPを使って問題を取り除けば復旧することが多いので、慌てず直前に更新したファイルをダウンロードしてきて正しく修正したり、バックアップしておいたファイルで置き換えるなどすれば大丈夫です。

ちなみに、サーバー上のファイルを削除したいときは、次のようにファイルやディレクトリを選択し、右クリックで呼び出したメニューで削除を選択します。
本当に削除をして構わないか聞かれますので、問題なければ「はい」を選択します。

ここまでで、FileZillaを使ってFTPでファイルを更新するためのもっとも基本的な説明は終わりです。
FTPの操作方法をすべて細かく紹介することは難しいので、行き詰ったら検索エンジンなどを使って調べながら操作することをお勧めいたします。

慣れるまで、用語が分からなかったり難しく感じることがありますが、いったん慣れてしまうと、WordPressの管理画面よりも気軽にファイルを更新できるようになります。

ただ、繰り返しになりますが、その時に気を付けなければいけないのが、消してはいけないファイルを消したり、上書きしてはいけないファイルを上書きしてしまうことです。

作業の際には必ずバックアップを取得しておきましょう。
バックアップを取って作業していただくことで、万が一表示エラー等が起こった場合に元に戻す事が可能です。
バックアップについては、以下URLをご確認ください。