公開までの手順ガイド

HPYourselfで作ったサイトをインターネットに公開するまでの手順を解説します。
HTMLファイルとWordPressテーマ、どちらの方法でも対応しています。

HPYourselfでサイトを作成完了しています
完了
2
xserverを契約するサーバーとドメインを用意する
このページ
3
HTMLをアップロードするファイルをサーバーに配置する
次のステップ
4
公開完了URLにアクセスして確認
最後
1

xserverを契約する

サーバーとドメインを用意します

ホームページを公開するには、インターネット上の「場所(サーバー)」と「住所(ドメイン)」が必要です。xserverは月額990円〜で、10日間の無料お試しがあります。

xserverを10日間無料で試す

※アフィリエイトリンクです。費用は定価と変わりません。

  • 1
    プランを選ぶ

    スタンダードプラン(月990円〜)で十分です。6ヶ月以上の契約を選んでください。

  • 2
    ドメインを取得する

    お店のURL(例:sakura-cafe.com)を決めます。サーバーと同時申し込みが便利です。

  • 3
    SSLを設定する

    xserverの管理画面から「SSL設定」を選びドメインを追加するだけで完了します。これでhttps://になります。

2

HTMLをダウンロードする

HPYourselfからファイルを書き出します

HPYourselfのエディターで「HTMLをダウンロード」ボタンを押してください。ページが1つの場合は index.html、複数ページの場合は ZIPファイル がダウンロードされます。

💡 ZIPファイルの場合ダウンロードされたZIPを展開(解凍)してから、中のHTMLファイルをアップロードしてください。
3

ファイルをアップロードする

xserverのファイルマネージャーを使います

xserverの「サーバーパネル」にログインして、ファイルマネージャーからHTMLファイルをアップロードします。サーバーパネルとはxserverのサーバー管理画面のことです。

サーバーパネル URL:https://www.xserver.ne.jp/login_server.php
  • 1
    サーバーパネルにログイン

    xserverのサーバーパネル(https://www.xserver.ne.jp/login_server.php)にログインします。

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

    「ファイル管理」→「ファイルマネージャー」を選びます。

  • 3
    public_htmlフォルダを開く

    ドメイン名のフォルダ → public_html フォルダに移動します。

サーバーパネル → ドメイン名フォルダ → public_html/
  • 4
    ファイルをアップロード

    「アップロード」ボタンから以下のファイルをすべてアップロードします。

アップロードするファイル一覧 index.html・(複数ページの場合は各ページのHTML)
⚠️ 注意すでに public_html にファイルがある場合は削除してからアップロードしてください。上書きで問題ありません。
4

公開を確認する

ブラウザでアクセスして確認します

ブラウザのアドレスバーに取得したドメイン(例:https://sakura-cafe.com)を入力してアクセスしてください。作成したサイトが表示されれば公開完了です。

💡 表示されない場合SSL設定の反映に最大1時間かかる場合があります。しばらく待ってから再度アクセスしてみてください。

公開おめでとうございます!🎉

内容を変更したい場合は、HPYourselfで再編集してHTMLを再アップロードするだけです。プロジェクトファイル(.json)を読み込めばいつでも続きから編集できます。

HPYourselfで編集を続ける
HPYourselfでデザインを作成完了しています
完了
2
xserverでWordPressをインストールワンクリックで完了
このページ
3
テーマをアップロード・有効化ZIPをそのままアップロード
次のステップ
4
トップページを設定固定ページとして表示
もうすぐ
5
公開完了URLにアクセスして確認
最後
1

xserverを契約する

WordPressインストール込みで申し込めます

xserverはWordPressのワンクリックインストール機能があり、難しい設定なしにWordPressを始められます。

xserverを10日間無料で試す

※アフィリエイトリンクです。費用は定価と変わりません。

2

WordPressをインストールする

サーバーパネルから数分で完了します

まず「サーバーパネル」にログインします。サーバーパネルとは、xserverのサーバー管理画面のことです。xserverに登録したメールアドレス宛に届いたメールに記載されているURLからアクセスできます。

サーバーパネル URL:https://www.xserver.ne.jp/login_server.php
  • 1
    「WordPress簡単インストール」をクリック

    サーバーパネルにログインしたら、画面の中から「WordPress簡単インストール」を探してクリックします。

  • 2
    「WordPressを追加」タブを選ぶ

    画面上部に「WordPressを追加」というタブがあります。これをクリックするとドメインを選べるようになります。

  • 3
    対象ドメインを選ぶ

    取得したドメイン(例:sakura-cafe.com)を選択します。初期ドメイン(xxxx.xsrv.jp)ではなく、自分で取得したドメインを選んでください。

入力項目の説明

  • サイトURL

    そのままで大丈夫です。ドメインのトップ(/の後ろは空欄)に設定してください。

  • ブログ名

    お店の名前を入力します。例:カフェ サクラ。後から変更できます。

  • ユーザー名

    WordPress管理画面へのログインID。英数字で決めてください。例:sakura_admin

  • パスワード

    WordPress管理画面へのログインパスワード。「パスワード生成」ボタンで自動生成することをおすすめします。必ずメモしておいてください。

  • メールアドレス

    自分のメールアドレスを入力します。WordPressからの通知が届きます。

  • テーマ

    「WordPressデフォルトテーマ」を選んでください。HPYourselfのテーマを後でアップロードするので、ここでは何も選ばなくて大丈夫です。

  • その他の項目

    「キャッシュ自動削除」はON推奨。「データベース」は「自動で生成する」のままでOK。「メモ」は空欄で構いません。

⚠️ ユーザー名・パスワードは必ずメモインストール後に再確認できません。WordPress管理画面へのログインに必要なので、必ずどこかに控えておいてください。
  • 4
    「インストールする」を押す

    すべて入力したら「インストールする」ボタンを押します。数分でインストールが完了します。

💡 完了後に表示される管理画面URLを確認インストール完了後に管理画面のURL(https://ドメイン名/wp-admin/)が表示されます。ブックマークしておくと便利です。
3

テーマをアップロードする

HPYourselfで出力したZIPをそのまま使います

HPYourselfの「WordPressテーマをダウンロード」ボタンで出力したZIPファイルをWordPressにアップロードします。

  • 1
    WordPress管理画面にログイン

    https://ドメイン名/wp-admin/ にアクセスしてログインします。

  • 2
    外観 → テーマ を開く

    左メニューの「外観」→「テーマ」をクリックします。

  • 3
    新規追加 → テーマのアップロード

    「新規追加」→「テーマのアップロード」をクリックします。

  • 4
    ZIPファイルを選択してインストール

    HPYourselfでダウンロードした hpyourself-theme.zip を選択して「今すぐインストール」を押します。

  • 5
    有効化する

    インストール完了後「有効化」をクリックします。

4

トップページを設定する

HPYourselfのデザインをトップに表示します

WordPressはデフォルトでブログの投稿一覧がトップに表示されます。HPYourselfで作ったデザインをトップページに表示するために以下の設定が必要です。

  • 1
    固定ページを作成する

    管理画面の「固定ページ」→「新規追加」で新しいページを作成します。タイトルは「トップ」などにしてください。内容は空で構いません。「公開」を押します。

  • 2
    設定 → 表示設定 を開く

    左メニューの「設定」→「表示設定」をクリックします。

  • 3
    ホームページの表示を変更する

    「ホームページの表示」を「固定ページ」に変更して、先ほど作った固定ページを「ホームページ」に設定します。

  • 4
    変更を保存する

    「変更を保存」を押して完了です。

⚠️ この設定をしないとHPYourselfで作ったデザインではなく、WordPressのデフォルトページがトップに表示されてしまいます。必ず設定してください。
5

公開を確認する

ブラウザでアクセスして確認します

ブラウザでドメイン(例:https://sakura-cafe.com)にアクセスしてください。HPYourselfで作ったデザインが表示されれば公開完了です。

💡 デザインを変更したい場合HPYourselfでデザインを修正して「WordPressテーマをダウンロード」→ 管理画面でテーマを再アップロード・有効化するだけです。

公開おめでとうございます!🎉

WordPressなら管理画面からブログ記事やお知らせを追加できます。
デザインを変更したいときはHPYourselfで再編集してテーマを再アップロードするだけです。

HPYourselfで編集を続ける ブログデザインの設定方法 →