FC2ホームページだけでつくる個人サイト

はじめに：特別なソフトがなくてもサイトは作れます！

Webサイト制作と聞くと「特別なソフト（エディタ）を入れたり、FTPソフトでファイルを転送したり…」と難しく感じてしまうかもしれません。

ですが、FC2ホームページの標準機能を使えば、ブラウザひとつで簡単に個人サイトを作成・公開できます！

このページでは、スクリーンショットで図解しながらWebサイトを作る手順を具体的に解説していきます🐾

1. ファイルを作成しよう

1FC2 IDの作成とログイン

FC2の公式サイトを開き、「新規登録」ボタンからFC2 IDを作成します。登録完了後、FC2ホームページの管理画面にログインします。

2ファイルマネージャーを開く

管理画面の左メニューにある「ファイルマネージャー」をクリックします。

3HTMLファイルの新規作成

ファイルマネージャーの画面上で右クリックをし、「ファイルを作成」を選択します。ファイル形式の選択画面が出たら「HTML」を選びます。

4仮のファイル名で決定

デフォルトで「newfile.html」と入力されているので、そのまま決定します。

💡 なぜ「newfile.html」にするの？
本来、ホームページのトップページは index.html というファイル名にする必要があります（それによってサーバーが自動的にトップページだと認識してくれます）
ただし、今回はサーバー上で編集をするという都合上、作成途中の状態が人目に触れてしまうのを防ぐために最初は「newfile.html」という仮の名前で作業を進めます🐾

5編集画面（エディタ）を開く

作成された「newfile.html」を右クリックし、「ソース表示で編集」を選択します。別ウィンドウで編集画面が開きます。

💡 「メモ帳」よりも編集しやすい！
FC2さんのWebエディタには「コードを色分けして表示」「<>の閉じ忘れがあると赤色で表示」「リアルタイムでプレビューできる機能」など、編集に便利な機能が付いています🐾

6コードを貼り付ける

編集画面は最初は真っ白なので、使用したいテンプレートをコピーして貼り付けます。その後、左上の「上書き保存」を押していったん保存しておきましょう。

💡 FC2さんのテンプレートをダウンロードするのもおすすめ！
管理画面の左側にあるメニューから選択できる「デザインテンプレート」という項目から、FC2さんが提供しているテンプレートの一覧ページに移動することができます🐾
「ダウンロード」ボタンをクリックしてテンプレートをダウンロードすると、そのままファイルマネージャーに保存されるのですぐに編集することができます。

2. 画像をアップロードして差し替えてみよう

サイトに自分の好きな画像を掲載してみましょう。

ステップ①：画像ファイルのアップロード

1アップロードボタンを押す

ファイルマネージャー画面の左上にある 💾（フロッピーディスク）のアイコン をクリックします（マウスを重ねると「アップロードするファイルを選択」と表示されます）

2ドラッグ＆ドロップで追加

ドロップエリアが表示されるので、パソコン内にある画像ファイル（例：profile.jpg）をドラッグ＆ドロップします。一覧に画像ファイルが追加されればアップロード完了です！

ステップ②：コード上の画像を差し替える

HTML編集画面に戻り、画像を表示しているコードを探します。

<img src="sample.png" alt="プロフィール画像" class="profile-img">

src="..." ： 表示したい画像ファイルの名前を指定します。先ほどアップロードした画像ファイル名（例: profile.jpg）に変更します。

<!-- 書き換え例 -->
<img src="profile.jpg" alt="プロフィール画像" class="profile-img">

💡 こちらの記事もチェック！
テンプレートの編集については「超！初心者向けHTML編集講座」の記事も参考にしてくださいね🐾

3. プレビューで確認してサイトを公開しよう！

途中経過をプレビューで確認する

編集画面の上側にある「プレビュー」をクリックすると、現在の見映えを確認できます。全画面で確認したい場合はいったん「上書き保存」をし、該当ファイルをダブルクリックで開きましょう。

いよいよサイトを公開！

デザインや文章が完成したら、いよいよ世界中に公開しましょう！

1上書き保存をする

編集画面の左上にある 「上書き保存」 をクリックします。

2名前を変更する

ファイルマネージャーに戻り、「newfile.html」を右クリックして 「名前を変更」 を選択し、index.html に変更します。

⚠️️ 注意：ファイルの拡張子（.html）に注意しよう
FC2のファイルマネージャーで編集する場合は拡張子が表示される仕様になっていますが、「メモ帳」などで編集する場合は注意が必要です。
PCの設定で「拡張子を表示しない」になっていると、index.html と入力した結果 index.html.html という名前になってしまい、トップページとして正しく読み込まれないことがあります🐾

これで、あなたの個人サイトが公開されました！
保存したファイルをダブルクリックすると実際のページ開くので、正しく表示されるか確認してみましょう。

💡 ページや画像が反映されない・更新されないときは？
アップロード直後は反映に数十秒〜数分かかることがあります。
また、ブラウザに古いデータが残っている（キャッシュ）場合があるため、以下の方法を試してみてください🐾

強力な更新（スーパーリロード）： Windowsは Ctrl + F5（Macは Cmd + Shift + R）
シークレットモード： シークレットウインドウでURLを開いて確認する

エディタソフトを使って作成する場合

今回はFC2のブラウザ機能のみで完結させましたが、自分のパソコンのエディタソフトで作成した場合も、出来上がったHTMLファイルを「手順5：画像のアップロード」と同じやり方でドラッグ＆ドロップすればWebページとして公開できます🐾

おわりに

ホスティングサービスの機能によっては、特別なツールを使わなくてもブラウザの管理画面だけでWebサイトを作ることができます。

ぜひ自分だけの素敵なWebサイトを作ってみてくださいね🐾