Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

FC2ホームページ 登録からサイトのアップロード

Dreamweaver

FC2ホームページ 登録からサイトのアップロードまでの手順

 

登録

1.ユーザーとIDの登録

1.「FC2ホームページ」と検索し、FC2のサイトを開きます。

FC2の登録1

2.「FC2ホームページ」のサイトを開いたら「新規登録」をクリックします。
FC2の登録2

3.「新規無料登録」のページが開きます。
上からメールアドレス・画像認証の数字を入力し、「利用規約に同意しFC2IDへ登録する」をクリックします。
画像認証はピンクの背景内の文字を6桁の半角英数字で入力してください。
FC2の登録3

4.「メールを確認してください」というページに飛んだら、登録したメールアドレスの受信ボックスを確認してください。
FC2の登録4

5.受信ボックスに「FC2ID 手続きを進めてください」というメールが届きます。
メールを開いて記載されているULRのリンクに飛びます。
※メールが届いてない場合は「迷惑メールフォルダ」を確認してください。
FC2の登録5

6.「ログイン情報の入力」ページに飛びます。
「パスワード」と「パスワード(確認)」を入力し「性別」選びます。
次に「秘密の質問」選び「質問の答え」「生年月日」「郵便番号」入力します。
すべて完了したら「登録」をクリックしてください。
FC2の登録6

2.ユーザー情報の登録

1.「FC2IDの登録完了」のページが開いたら「ユーザー情報の入力」をクリックします。
FC2の登録7

2.「プラン選択」ページが表示されるので「一般・無料」の枠の「このプランで登録」をクリックします。
FC2の登録8

3.「希望アカウント名」入力し「ホームページのカテゴリー」選択します。
次に「ホームページのタイトル」「ホームページの詳細」を入力します。
最後に「利用規約に同意する」にチェックし「登録する」をクリックします。
FC2の登録9

4. 「登録完了」のページが表示されたら完了になります。
次はサーバーの設定に入るので「ホームページを作成する」をクリックします。
FC2の登録10

サイトのアップロード

1.サーバーの設定

1.「FC2ホームページ」のサイトに飛ぶので「自分のホームページを見る」をクリックします。
FC2の登録10-2

2.下の画像のようなダミーのサイトに飛びます。
確認したら「FC2ホームページ」に戻ります。
FC2の登録10-3

3.Dreamweaverを開き、ファイルのサイト名の右横の青いボタンを押し「サイトの管理…」をクリックします。
サイトのアップロード3
サイトのアップロード4

4.「サイトの管理」が開いたらアップロードしたいサイトを選び「編集…」をクリックします。
サイトのアップロード5

5.選んだサイトの「サイト管理」が開きます。
サイトのアップロード6

6.「サーバー」をクリックしヘルプの上にある「+(新規サーバーの追加)」をクリックします。
※「+」にマウスカーソルを置くと「新規サーバーの追加」と出ます。
サイトのアップロード7
サイトのアップロード8

7.サーバー接続のための設定ウィンドウが出ます。
サイトのアップロード9

8.「FTPアドレス」「ユーザー名」「パスワード」「Web URL」を入れるためにFC2に戻ります。
左横にある設定の「FTP設定」をクリックします。
サイトのアップロード10

9.「FTP設定」というページが開き、下の方にスクロールすると「FTPアドレス」「ユーザー名」「パスワード」「Web URL」の設定が表記されています。
サイトのアップロード11

10.「FTP接続ロックしない」にチェックを入れ「設定変更する」をクリックします。
サイトのアップロード12

11.「現在のFTPパスワード」にスイッチが現れるので「ON」をクリックすると「OFF」になりパスワードが見れるようになります。
このパスワードをコピーします。
サイトのアップロード13
サイトのアップロード14

12.Dreamweaverに戻り先程コピーしたパスワードを「サイト設定」の「パスワード」に貼り付けます。
残りの「FTPアドレス」「ユーザー名」「Web URL」もFC2の「FTP設定」からコピーして貼り付けます。
「FTPアドレス」はFC2の「ホスト名(ホストアドレス)」からコピー,
「ユーザー名」はFC2の「ユーザー名」からコピー,
「Web URL」は「FTPアドレス」の最初に「http://」最後に「/」を追加します。
「サーバー名」には「FC2サーバー」と入力してください。
入力が完了したら「保存」をクリックします。
サイトのアップロード15

13.設定が正しいか確認したいい場合は、先ほどの画面の「テスト」ボタンをクリックします。
設定が正しいければ「Adobe Dreamweaver CS5 はWebサーバーに接続されました。」と表示されます。

サイトのアップロード16

もし、サーバーが接続されない場合は以下を確認してください。
サイトのアップロード17

Dreamweaverに戻り「サイトの設定」の下の方にある「その他のオプション」をクリックします。
クリックすると詳細が出るので「FTP Passiveモードを使用」と「FTPパフォーマンス最適化を利用」にチェックを入れ「保存」をクリックします。
サイトのアップロード18

サイトのアップロード

1.ファイルの右上にある「たたんでローカルサイトまたはリモートサイトのみを表示」をクリックします。
すると左側に「リモートサーバー」が表示されます。
サイトのアップロード19

2.左上にあるコンセントのアイコンの「リモートホストに接続」をクリックします。
すると設定したサーバーに繋がり、「リモートサーバー」に「.htaccess」と「index.html」が表示されます。
サイトのアップロード20

3.「index.html」を選び右クリックして「編集」から「削除」を選びます。
サイトのアップロード21

4.「選択したファイルを削除してよろしいですか?」と出るので「はい」をクリックします。
サイトのアップロード22

5.ローカルファイルにあるサイトの全データが入っているフォルダを選び右クリックし、「PUT」を選びます。
サイトのアップロード23

6.「サイト全体をPUTしてよろしいですか?」と出るので「はい」をクリックそします。
サイトのアップロード24

7.「バックグラウンドファイル操作」が出るのですべてPUTが完了するまで待ちます。
サイトのアップロード25

8.PUTが完了するとサイトデータがリモートサーバー上に反映されます。
これでサイトのアップロードは完了です。
サイトのアップロード26

アップロード済のサイトに編集データをアップロードする場合

もし1ページだけ編集し、アップロードしたい場合は3つの方法があります。

1.編集したページを選び右クリックで「PUT」を選択します。
サイトのアップロード27

2.編集したページを選択して右上の上向き矢印の「ファイルを”FC2サーバー”にPUTする」をクリックします。
サイトのアップロード28

3-1.編集したページを開き、タイトルの右横にある上下の矢印アイコンの「ファイル管理」をクリックします。
サイトのアップロード29

3-2.メニューが開くので「PUT」を選びます。
サイトのアップロード30

3-3.「依存ファイルをPUTしますか?」と出るので「いいえ」をクリックします。
サイトのアップロード31

アップロードの際にダイアログを表示させない設定

1.Dreamweaverから「環境設定…」を選びます。
サイトのアップロード32

2.環境設定のカテゴリから「サイト」を選びます。
サイトのアップロード33

3.依存ファイルの「GET/チェックアウトでダイアログを表示」と「PUT/チェックアウトでダイアログを表示」のチェックを外します。
サイトのアップロード34

ファイルの操作

リモートサーバー内のデータを編集することができます。
操作したいファイルを選び「編集」からそれぞれの操作を選びます。
コピー・・・選んだファイルがコピーされます。
削除・・・選んだファイルが削除されます。
複製・・・選んだファイルが複製されます。
名前の変更・・・選んだファイルの名前が変更できます。
サイトのアップロード35

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. CSS Grid Layoutで複雑なレイアウトを3ステップで作成

    Web

    【CSS】Grid Layoutで複雑なレイアウトを作成

    最近、Pinterestのようなギャラリーページなどで大きさが異なる画…

  2. displayの使い方を理解しよう
  3. Web

    SVGアイコンをCSSで色を替えられるようにしよう

    今回はSVGアイコにCSSを適用させて色を変えられるようにする方法を紹…

  4. Web

    目指せ!positionマスター!

    レイアウトに便利なposition!ようこそ!Dreamwea…

  5. Web

    HTML&CSS初心者が通る道。バリデーターで文法チェック

    初心者みんなが通る道(かな?)間違い探しHTMLを習い始めたと…

  6. Web

    Vegas2で背景画像をスライドショーに(jQueryプラグイン)

    cssで背景画像として設置していた画像をスライドショーにしたい。画面い…

人気の記事

おすすめの参考書

PAGE TOP