Dreamweaverで作成したサイトをアップロードする方法をお探しですね。
広告
Dreamweaverで作ったサイトをサーバーにアップロードして公開する方法
Dreamweaverでホームページを作ったら、次はいよいよインターネット上に公開する段階です。
でも、パソコンの中で見られていても、そのままではネット上には表示されません。
公開するには、レンタルサーバーなどにファイルをアップロードする必要があります。
この記事では、Dreamweaverで作ったサイトをサーバーに「Put（アップロード）」して公開する方法を、初めての人にも分かりやすく説明していきます。
1. 公開する前に準備しておくもの
Dreamweaverからサイトを公開するには、まず「どのフォルダをサイトとして管理するか」と「どのサーバーにアップロードするか」を決めておく必要があります。
Dreamweaverでは、HTMLやCSS、画像などをまとめたフォルダを「サイト」として登録して、そこにサーバー情報を設定します。
この設定がきちんとできていないと、Putボタンを押しても正しい場所にファイルが送られなかったり、画像やCSSだけが反映されなかったりするので注意が必要です。
準備しておきたい情報は、レンタルサーバーの管理画面や契約したときのメールに書いてあることが多いです。
特にFTP情報は入力ミスが起きやすいので、コピー&ペーストを使って正確に入力しましょう。
サーバーによっては「FTP」ではなく、より安全な「SFTP」や「FTPS」が推奨されている場合もあります。
どの接続方法を使うかは、契約しているサーバーの仕様に合わせて選びます。
確認しておきたい項目はこんな感じです。
– **FTPホスト名、ユーザー名、パスワード**
– **サーバー上の公開フォルダー名**（public_html、www、htdocsなど）
– **公開したいドメイン名とトップページのファイル名**（普通はindex.html）
ここで特に大事なのが、サーバー上の公開フォルダーです。
レンタルサーバーでは「public_html」や「www」というフォルダーの中にアップロードしたファイルだけがウェブ上に表示される仕組みになっていることが多いんです。
間違えて一つ上の階層や別のフォルダーにPutしてしまうと、アップロード自体は成功しているのにブラウザで表示されない…なんてことになります。
公開先のディレクトリは必ずサーバーのマニュアルで確認しておきましょう。
2. Dreamweaverでサイト設定とサーバー設定をする
Dreamweaverでアップロードするには、まず「サイト定義」を作ります。
メニューから「サイト」→「新規サイト」または「サイトの管理」を開いて、サイト名とローカルサイトフォルダーを指定します。
サイト名は自分が分かりやすい名前でOKですが、ローカルサイトフォルダーには、実際に作ったHTML、CSS、JavaScript、画像フォルダーなどが入っている親フォルダーを指定します。
ここを間違えると、Dreamweaver上でファイル一覧が正しく表示されず、必要なファイルをPutできなくなってしまいます。
次に、同じサイト設定画面で「サーバー」を追加します。
サーバー名は自由に決められますが、接続方法にはFTP、SFTP、FTPSなど、契約しているサーバーが指定している方式を選びます。
FTPアドレス、ユーザー名、パスワードを入力して、必要に応じてルートディレクトリやWeb URLも設定します。
ルートディレクトリには、サーバー上で公開用として指定されているフォルダーを入力します。
例えば、公開フォルダーがpublic_htmlの場合は、そこを基準にファイルが配置されるように設定します。
入力が終わったら、必ず「テスト」ボタンで接続確認を行いましょう。
接続に成功すれば、Dreamweaverからサーバーへファイルを送る準備は完了です。
失敗する場合は、ホスト名、ユーザー名、パスワード、接続方式、ポート番号、公開フォルダーの指定を見直してみてください。
会社や学校のネットワークではFTP通信が制限されていることもあるので、環境を変えてみたり、パッシブFTPを有効にしたり、SFTPを使ったりといった対処が必要になることもあります。
サイト設定で注意したいのは、ローカル側とリモート側の対応関係です。
ローカルでは「images」フォルダーに画像を置いているのに、サーバー側で別の階層に画像だけアップロードしてしまうと、HTMLから画像を読み込めなくなります。
Dreamweaverのサイト管理機能を使うと、リンク関係をある程度追跡しながらアップロードできますが、フォルダー構成そのものが乱れていると反映ミスの原因になります。
公開前に、ローカルフォルダー内でトップページ、CSS、画像、スクリプトがきちんと整理されているか確認しておきましょう。
3. Put機能でサイトをサーバーにアップロードする
サーバー設定ができたら、いよいよアップロードです。
Dreamweaverのファイルパネルからアップロードしたいファイルを選んで、「Put」を実行します。
Putはローカルのファイルをリモートサーバーへ送る操作で、上向きの矢印アイコンで表示されることが多いです。
トップページだけを公開したい場合はindex.htmlを選んでPutすればいいですが、初めて公開するときはHTMLだけじゃなく、CSS、画像、JavaScript、PDFなど関連ファイルもまとめてアップロードする必要があります。
関連ファイルが足りないと、ページは表示されてもデザインが崩れたり、画像が表示されなかったりします。
Dreamweaverでは、ファイルをPutするときに「依存ファイルも含めますか?」という確認が表示されることがあります。
依存ファイルというのは、HTMLから読み込まれているCSSや画像など、ページ表示に必要な関連ファイルのことです。
初めてアップロードするときは、基本的に依存ファイルも含めて送ると安心です。
ただし、すでにサーバー上に同じ名前のファイルがある場合は上書きされる可能性があるので、既存のサイトを更新する場合は事前にバックアップを取っておくことをおすすめします。
アップロードの基本的な流れはこんな感じです。
1. **ファイルパネルで公開したいファイルまたはフォルダーを選ぶ**
2. **Putボタンをクリックして、必要なら依存ファイルもアップロードする**
3. **転送が完了したら、ブラウザでドメインにアクセスして表示を確認する**
サイト全体を初めて公開する場合は、ローカルサイトフォルダーの中身をまとめてPutする方法が分かりやすいです。
一方で、すでに公開済みのサイトの一部だけを修正した場合は、変更したHTMLやCSS、差し替えた画像だけを選んでPutすれば、無駄な転送を減らせます。
Dreamweaverには同期機能もありますが、初心者のうちは「どのファイルを更新したのか」をしっかり把握したうえで、個別にPutするほうが意図しない上書きを避けやすいです。
Putが完了しても、すぐにブラウザ表示に反映されないように見えることがあります。
これはアップロード失敗ではなく、ブラウザのキャッシュが古いCSSや画像を読み込んでいる場合があるんです。
更新後はブラウザの再読み込み、強制再読み込み（Ctrl+F5など）、別のブラウザでの確認、スマホでの表示確認を行うと判断しやすくなります。
また、サーバー側のキャッシュ機能やCDNを利用している場合は、反映まで時間がかかることもあります。
4. 公開後の確認とよくあるトラブルの解決方法
DreamweaverでPutした後は、トップページが開くかどうかだけじゃなく、サイト全体が正しく動いているかを確認することが大切です。
まず、公開したURLにアクセスして、index.htmlが表示されるか確認します。
次に、各ページへのリンク、画像の表示、CSSの反映、スマホでのレイアウト、フォームやJavaScriptの動作を見ます。
ローカルでは問題がなくても、サーバーではファイル名の大文字・小文字が区別されることがあって、画像ファイル名の違いだけで表示されないケースもあるんです。
よくあるトラブルの一つが、「アップロードしたのにページが表示されない」というものです。
この場合、次のポイントを確認してみてください。
– トップページのファイル名が**index.html**になっているか
– 公開フォルダー（public_htmlなど）へPutできているか
– ドメインの設定が正しいか
例えば、トップページをtop.htmlのままアップロードしていると、ドメイン直下にアクセスしても自動表示されないことがあります。
また、public_htmlの外側にファイルを置いている場合も、ブラウザからは見えません。
デザインが崩れる場合は、CSSファイルのアップロード漏れ、パスの指定ミス、キャッシュの影響が考えられます。
Dreamweaver上で表示できているからといって、サーバー上でも必ず同じ階層で読み込めるとは限りません。
HTML内のリンクがローカルPCの絶対パスになっていると、公開後に他のユーザーの環境では読み込めません。
画像やCSSへの指定は、サイト内の相対パスで正しく設定されているか確認しましょう。
画像が表示されないときは、ファイル名と拡張子も見直してみてください。
例えば、ローカル環境では「Photo.JPG」と「photo.jpg」の違いが問題にならなくても、サーバーでは別ファイルとして扱われることがあります。
日本語ファイル名や空白を含むファイル名も、環境によってトラブルの原因になりやすいので、英数字とハイフン、アンダースコアを使った分かりやすい名前に統一すると安心です。
公開前の段階で命名ルールを整えておくと、後からの管理もしやすくなります。
公開後の更新作業では、サーバー上のファイルを不用意に上書きしないことも大事です。
複数人でサイトを管理している場合、自分のローカルファイルが古いままPutすると、他の人が更新した内容を戻してしまう可能性があります。
Dreamweaverの「Get」はサーバーからローカルへ取得する操作、「Put」はローカルからサーバーへ送る操作です。
更新前に必要なファイルをGetして最新状態を確認してから、編集してPutする流れを習慣にすると安全です。
最後に、公開後は検索エンジンやユーザーに見られる前提で、基本的な品質確認も行いましょう。
– ページタイトル
– meta description
– 見出し構造
– リンク切れ
– 404エラー
– スマホでの見やすさ
これらは公開直後に確認しておきたい項目です。
Dreamweaverのアップロード作業は、ファイルを送るだけなら難しくありませんが、**正しい場所へ、必要なファイルを、崩れない状態で公開すること**が本質です。
サイト設定、Put、ブラウザ確認、修正という流れを丁寧に行えば、Dreamweaverで作ったサイトを安定してサーバーに公開できます。
最初は戸惑うこともあるかもしれませんが、一度流れを覚えてしまえば、次からはスムーズにできるようになりますよ。
広告
