どうも(*’ω’*)
やなぎまんです。
FTPってなんだ??って思う場合はこのまま読み進めて下さい(#^.^#)
簡単に説明すると「あなたのパソコン」と「サーバー」の間でやり取りを「簡単に」するためのソフトの事です。
基本的に無料で使えてセキュリティー面も安全なFileZilla(ファイルジラと読みます)を使って行います。ファイルをアップロードするにはFTPソフトが必要になるので必ずインストールして設定しましょう(*’ω’*)
「エックスサーバー」へ「FileZilla」を使ってファイルをアップロードする手順を詳しく説明しますm(__)m
インストール前にパソコンが何bitか調べよう
ファイルジラを使うためにはあなたのパソコンが「なにbit」か?を調べる必要があります
エクスプローラーを開きます
パソコンの左下にある「赤四角」のマークをクリック
⇩⇩⇩

パソコンの左下にエクスプローラーのマークが無い場合は「ウインドーズキーを押しながらE」を押しましょう
⇩⇩⇩

マウスを「PC」に合わせて「右クリック」⇒「プロパティ」をクリック
⇩⇩⇩

「システムの種類」を確認して「何bit」か確認しましょう
私のは「64bit」でした(*’ω’*)
⇩⇩⇩

FileZillaをパソコンにインストールしよう
FileZillaの公式サイトにアクセスします
⇩⇩⇩
「FileZillaをダウンロードする」をクリック
※グーグルクロームにて翻訳してます
⇩⇩⇩

「追加のダウンロードオプションを表示する」をクリック
⇩⇩⇩

私は64bitなので「FileZilla_3.37.4_win64-setup.exe」をクリックしますがあなたに合ったものを選択しましょう
⇩⇩⇩

パソコンの左下にこのような表示が出るのでクリックします
⇩⇩⇩

「はい」をクリック
⇩⇩⇩

「I Agree(同意する)」をクリック
⇩⇩⇩

「Next」をクリック
⇩⇩⇩

「Next」をクリック
⇩⇩⇩

「Next」をクリック
⇩⇩⇩

「Install」をクリック
⇩⇩⇩

「Finish」をクリック
⇩⇩⇩

「OK」をクリック
⇩⇩⇩

インストール完了です(#^.^#)
⇩⇩⇩

左側は「ローカルサイト」と言い、使用しているパソコンのファイル、フォルダを表示しています
上半分はパソコンの中のフォルダの全体が表示され
下半分は上で選択したフォルダの中身が表示されます
右側は「リモートサイト」と言い、サーバーの中のファイルやフォルダが表示されます(別名ディレクトリ)
FileZillaとXserverを接続させよう
ファイルジラとエックスサーバーを接続させるにはまずエックスサーバーと契約をした時の「エックスサーバー ■重要■サーバアカウント設定完了のお知らせ」というメールを開いておきます
「FTPホスト」「FTPユーザー」「FTPパスワード」が必要になります
⇩⇩⇩

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

「新しいサイト」をクリック
⇩⇩⇩

「名前の変更」をクリックして「名前を付けます」
※一般的にサーバー名やブログ名を付けます
⇩⇩⇩

先ほどのメールを見ながら「ホスト名」を入力します
「ログオンタイプ」から「通常」を選択
「ユーザー」、「パスワード」を入力して「接続」をクリック
⇩⇩⇩

このような画面になりますので「今後は常にこの証明書を信用する」にチェックして「OK」をクリック
※「不明な証明書」や「ホスト名が証明書と一致しません」などと表示されていますが大丈夫です
⇩⇩⇩

サーバーに接続されました(#^.^#)
⇩⇩⇩

ファイルジラの画面の見方
基本的なファイルジラの画面の見方を説明します
左側(青枠)はパソコンの中を表示しています
左上(青枠)は確認画面
左下(青枠)は操作画面
左側(青枠)はサーバーの中を表示しています
右上(赤枠)は確認画面
右下(赤枠)は操作画面
※右上のファイルに「?」がありますが1度右下で操作すると消えますのでご安心を(#^.^#)
⇩⇩⇩

※所有ドメインによって表示画面は個々で変わってきます
画面が見にくい場合は上下左右に広げる事が出来ます
⇩⇩⇩

試しに右下の「kodomo-asobu.com」をダブルクリックしてみます
⇩⇩⇩

「リモートサイト」が「kodomo-asobu.com」に変わりました
⇩⇩⇩

右下の「public_html」をダブルクリック
※エックスサーバーの場合は「public_html」の中にアップロードするデータを入れていきます
※最初から入っているデータには触らないようにしましょう
⇩⇩⇩

「public_html」を開くと色々入っています、その中にワードプレスも入ってます(#^.^#)
⇩⇩⇩

基本的左下からファイルを選択して右下の(赤枠)に「ドラッグ&ドロップ」します
⇩⇩⇩

ファイルをアップロードしてみる
ではテストでこの画像をアップロードしてみます
この画像は分かりやすいようにデスクトップに張り付けておきます
※写真ファイル名は必ず半角英数字にします
この写真ファイル名は「tesutooo」です
⇩⇩⇩

リモートサイトがアップロードしたいドメインで「public_html」が後ろに入ってるか確認します
左下から「Desktop(デスクトップ)」をダブルクリック
⇩⇩⇩

アップロードしたい写真ファイル「tesutooo」を左クリックを押しながら右下に移動させてから左クリックを離します。
※たまにドラック&ドロップする位置が悪いとすでにアップロードされているフォルダの中に入ってしまうので注意しましょう。何もないところにドラック&ドロップするようにしましょう。
⇩⇩⇩

写真ファイル「tesutooo」が右下にも表示されましたのでアップロード完了です(#^.^#)
⇩⇩⇩

アップロードした写真ファイルを確認してみる
サーバーにアップロードした画像をネットから検索してみましょう
リモートサイトの横のドメインの上で1度左クリックを押すと「青くなる」のでコピーします
※コピーはキーボードの「Ctrl」を押しながら「C」を押します
※貼付けはキーボードの「Ctrl」を押しながら「V」を押します
⇩⇩⇩

メモ帳を開いて「貼り付けます」
⇩⇩⇩

後ろの「public_html」を消します
⇩⇩⇩

先頭に「https:/」を入力します
⇩⇩⇩

ファイルジラに戻ってアップロードしたファイルの上で「右クリック」⇒「名前の変更」をクリックすると「編集」出来るようになるので「編集はしないでコピーします」
⇩⇩⇩

先ほどコピーした「写真ファイル名」を後ろに「貼り付けます」そしたら1度メモ帳のURLを全部コピーします
⇩⇩⇩

コピーしたURLを「貼り付けます」
⇩⇩⇩

ネットから画像が見れればOKです(#^.^#)
⇩⇩⇩

※アップロードした写真ファイルを削除するにはアップロードしたファイルの上にマウスを持ってきて「右クリック」⇒「削除」をすれば出来ます(#^.^#)
まとめ
お疲れ様でした(#^.^#)
何だか訳が分からなかったと思いますが・・・FTPソフトはブログで情報発信をする場合はめちゃくちゃ使うソフトなのでしっかりマスターできるようこの記事を何度も読んで何も見ないでもアップロード出来るようになりましょう(*’ω’*)
今回は写真をアップロードしましたが他にも「PDF」などのファイルも簡単にアップロード出来ますのでぜひインストールして見て下さい(#^.^#)
ではでは