ホームページの作り方

当サイトでは初心者向けにホームページの作り方の解説をしています。

当サイトはPRを含むページがあります。

10.ホームページ用のファイルをサーバーにアップしよう

ヤミー「今回は6.ホームページ用のファイルを作るで作ったホームページ用のファイルをレンタルサーバーにアップしてインターネットの世界から見れるようにします」

サイトウ君「はーい」

ヤミー「まず下のリンクをクリックしてXserverのサイトを表示してください」

サイトウ君「しました」

ヤミー「右上に「ログイン」ってあるじゃん?それをクリックして」

ログインをクリック

ヤミー「さらに「サーバーパネル」をクリックしてください」

サーバーパネルをクリック

ヤミー「ログイン画面が表示されるので、申し込みをしたときのメールアドレスとパスワードでログインしてください」

ログイン画面

ヤミー「ログイン後はサーバーパネル画面が表示されます」

サーバーパネル画面

ヤミー「下の方にスクロールしてみてください。ドメイン名、というのが表示されています。私の場合は「xs845612.xsrv.jp」。これが私に用意されたドメインです。これは人それぞれ違うはずです。私は「xs845612.xsrv.jp」だけど、あなたは違うはず」

サーバーパネル画面の下の方

サイトウ君「ふむふむ」

ヤミー「このドメインで、今どんなサイトが表示されているか確認してみます」

ヤミー「ここをクリックすると、ドメインをコピーできるのでクリックしてコピーしてください。」

ドメインをコピーする

ヤミー「で、ブラウザ(インターネットを見るソフト)の新しいタブを開いて」

新しいタブを開く

ヤミー「アドレス入力欄をクリックして」

アドレス入力欄をクリック

ヤミー「右クリックして「貼り付け」を選べば、コピーしたドメイン(私の場合は「xs845612.xsrv.jp」)が貼り付けられるので、あとはEnterキーを押せばそのサイトが表示されます」

ドメインを貼り付けられる ホームページを表示

サイトウ君「へー、今、ホームページはこんな感じなんだ」

ヤミー「さて、ついに私たちの面白くないホームページ用ファイルをアップロードしましょう」

サイトウ君「ついにあの、面白くないホームページが……!」

ヤミー「まず、xserverの画面に戻りましょう。ログイン後のサーバーパネル画面の上部に「ファイルマネージャ」というのがあります。これをクリックしてください」

ファイルマネージャをクリック

ヤミー「ファイルマネージャ画面が表示されます。自分用に用意されたドメインのフォルダがあるので、それをダブルクリックして中に移動してください」

ドメインフォルダをダブルクリック

ヤミー「謎のフォルダが色々表示されますが、この中のpublic_htmlフォルダの中にファイルをアップロードすることで、インターネットの世界にファイルが公開されることになります。public_htmlフォルダをダブルクリックして中に移動してください」

public_htmlフォルダをダブルクリック

ヤミー「public_htmlフォルダの中は、こんな感じになっています」

public_htmlフォルダの中身

ヤミー「アップロードを選んでください」

アップロードを選ぶ

ヤミー「「ファイルを選択」を選んでください」

「ファイルを選択」を選ぶ

ヤミー「自分のパソコンの、どのファイルをアップロードするかを選びます。左側の雲アイコンのメニューを選んで」

「雲アイコンのメニュー」を選ぶ

ヤミー「「デスクトップ」を選んで」

「デスクトップ」を選ぶ

ヤミー「「htmlフォルダ」を選んで」

「htmlフォルダ」を選ぶ

ヤミー「「a.html」を選んで「開く」を選んでください」

「a.html」を選んで「開く」を選ぶ

ヤミー「「a.html」が選ばれている状態を確認して「アップロード」をクリックします」

「a.html」が選ばれている状態を確認して「アップロード」をクリック

ヤミー「「a.html」がpublic_htmlフォルダ内にアップロードされます」

「a.html」がpublic_htmlフォルダ内にアップロードされる

ヤミー「あー、長かった」

サイトウ君「ほんと、長かった」

ヤミー「では、自分のために用意されたドメインのサイトを見てみましょう。私の場合は「xs845612.xsrv.jp」を見てみます」

自分のサイトを見てみる

サイトウ君「変わって無いやないかい!」

ヤミー「大丈夫です。計画通りです。今、ドメインが「xs845612.xsrv.jp」になってるじゃないですか?これの後半に「/a.html」っていう文字を書き足してくれますか?つまり、最終的に「xs845612.xsrv.jp/a.html」っていうアドレスにしてください。あ、でも正確にはドメインが私の場合とあなたの場合で違うから、ドメインはあなたのモノのままで、後半に「/a.html」って書き足してほしいです。/の文字はひらがなの「め」のキーボードを打つと出るよ。たぶん。」

スラッシュを入力するためのキーの場所 「自分のドメイン/a.html」にする

ヤミー「後半に「/a.html」っていう文字を書き足し終わったら、Enterキーを押して、そのページに移動してください」

「自分のドメイン/a.html」にする

ヤミー「げぇっ!!文字化けしてる!!久しぶりに見た!!文字化け!!逆に新鮮!!」

サイトウ君「…………」

ヤミー「…………」

サイトウ君「…………」

ヤミー「…………」

サイトウ君「…………」

ヤミー「というように、問題なく綺麗にサイトウ君が作ったサイトが表示されます」

サイトウ君「いや!表示!されて!ないやんけ!!」

ヤミー「人によっては文字化けされずに普通に表示されている人もいるかもしれませんが、まあ直すか……」

ヤミー「次回、11.文字化けを直す

--- 補足 ----

ヤミー「補足です。今回の「ファイルマネージャ」、終わり方が分からぬ、と考えている方がいるかもしれませんが、普通のウェブサイトと同じと考えて大丈夫です」

ヤミー「つまり、唐突にブラウザ(インターネットを見るソフト)を閉じることでファイルマネージャを終わらせても良いですし、もっと丁寧に終わらせたい方は右上の「ログアウト」を選んで終わらせても大丈夫です。」

ヤミー「「サーバーパネル」画面の終わらせ方も同じです。唐突にブラウザ(インターネットを見るソフト)を閉じることで「サーバーパネル」画面を終わらせても良いですし、もっと丁寧に終わらせたい方は右上の「ログアウト」を選んで終わらせても大丈夫です」

ヤミー「また、「文字化けしたファイルをアップロードして大丈夫だろうか?なんらかの法に抵触して逮捕されたりしないだろうか?」と思っている方もいるかもしれませんが、大丈夫です。逮捕されません。安心してください。そんな法律はそもそも存在しないです」