ステップごとに覚えよう!

ステップ1
まずはここ。ホームページとは何か?~SEOの意味について解説。


ステップ2
ホームページを作る上での準備について解説。


ステップ3
htmlとは?書き方や確認の仕方について解説。


FC2無料サーバーにFFFTPを利用しファイルをアップロードしよう

前回はFFFTPの設定を行いました。
今回は、作成したhtmlファイルや画像データなどをサーバー上にアップロードする作業を行なっていきます。

 

まず、FFFTPを開きます。
左側のエリアがローカルエリア、自分のパソコンの中というイメージです。
右側がサーバー側になり、インターネット上で閲覧するには、こちらにファイルをアップロードする形となります。
FTP画面の見方

 

作成したhtmlファイルや画像データをサーバーエリアにアップロードします。
アップロードは以下画像イメージのように、ドラッグアンドドロップでやると簡単に行うことができます。

作成データをサーバーエリアにアップロード

 

htmlファイル等をサーバ側にアップロードすると、名前が重複している場合以下のようにメッセージが表示されます。

今回の場合、fc2側でサーバーに予めindex.htmlが設置されていた為、このような確認画面が表示されます。
特に上書きしても問題はないので、OKをクリック。

htmlファイルの上書き

 

問題なくアップロードがされると以下のイメージのように、サーバー側にファイルが反映されます。同じように表示されていれば、正常にアップロードが完了されていることとなります。

サーバーにファイルのアップロード完了

 

正常にアップロードされたことが確認できたら、ホームページにアクセスしてみましょう。作成したファイルの内容がホームページに表示されていれば成功です。

ホームページにアクセスしブラウザチェック

 

リンク先もしっかり遷移できているか確認しておきましょう。
最下部に表示されているfc2のテキストは、非表示にすることはできません。
こういった不必要なものを取り除きたい場合は、基本的に有料のサーバーなどを利用することとなります。(fc2の場合小さいのでそれほど気になりませんよね)

リンクの確認

また、モバイルコードが中央上部に表示されていることが確認できます。
これはちょっと見づらいので非表示にしておきましょう。

 

fc2の管理画面にログインし、携帯変換設定をクリック
fc2 携帯変換設定

 

クリックすると、以下イメージのような項目があるので、
自動挿入を無効に設定しておきます。
携帯コード無効

 

画像や写真などを追加アップロードする場合は、imgフォルダをダブルクリックします。

imgフォルダを開く

 

imgフォルダを開いたら、先程と同様にドラッグアンドドロップで、画像をアップロードしましょう。
画像を追加アップロード

 

画像ファイルを追加アップロード後に、初めの階層(パス)に戻る場合は、以下のイメージ部分をクリックし戻ることができます。

サーバー一つ上の階層に戻る

 

左側のローカルエリアから、ファイルを選択しアップロードすることも可能ですが、初めての場合、階層やパスなどがわかりにくいため、ドラッグアンドドロップ方式でご説明いたしました。
ちなみに、サーバー側にある「iフォルダ」ですが、特に気にすることはありません。そのままにしておきましょう。

iフォルダの説明

 

●ダウンロードについて

アップロードのご説明をしてきましたが、逆に「ダウンロードはどうやるんだ?」という部分ですが、これもアップロード同様に、今度はサーバー側にあるダウンロードしたいファイルを選択し、ディスクトップなり任意のフォルダなどにドラッグアンドドロップすることで、サーバー上のファイルをダウンロード(自分のパソコン側)することができます。

 

お疲れ様でした^^
これで一通りの作業は終わり、ホームページ完成です!

・当サイトのご説明目的で作成した【参考サイト】
http://hp1tsukurikata.web.fc2.com/

 

事項について

次回は、ホームページ完成ということで、今までの説明を振り返りつつ、まとめとして記事にしていけたらと思います。