エンジニアライフスタイルブログを運営しているミウラ(@miumiu06171)です。
普段はフリーランスでシステムエンジニアをしております。
今回は、お名前.comで取得した独自ドメインとXserverのレンタルサーバーでホームページ(WordPress)を作成する手順ををまとめてみました。
個人のホームページに限らず、会社・ビジネス向けホームページを作成するときにも役立つので、お名前.comとXserverレンタルサーバーで構築したい方はぜひ参考にしてみてください。
Xserverのレンタルサーバーを契約
まずは、ホームページを外部公開するためにレンタルサーバーを契約する必要があります。
今回は、「Xserver(エックスサーバー)」のレンタルサーバーを契約します。
こちらのXserverホームページにアクセスし、右上の「ログイン」アイコンをクリックします。
![xserver-rental-server-01](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/000-xserver-rental-server-01-640x360.jpg)
下図の画面になるので、Xserverを初めて利用する方は、左側の「初めてご利用のお客様」を選択し、アカウント作成と一緒に契約を開始します。
Xserverアカウントをすでに持っている場合は右の「ID、パスワード」を入力し、「ログイン」ボタンをクリックします。
![xserver-rental-server-02](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/000-xserver-rental-server-02-640x360.jpg)
次に下図の画面になるので、プランを選択、WordPressクリックスタートオプションはチェックを外したまま、利用規約にチェックし、「お申し込み内容を確認する」ボタンをクリックします。
![xserver-rental-server-03](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/000-xserver-rental-server-03-640x360.jpg)
Xserverの契約内容を確認し、「申し込む」ボタンをクリックします。
![xserver-rental-server-04](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/000-xserver-rental-server-04-640x360.jpg)
これでXserverのレンタルサーバーの申し込みは完了です。
Xserverのレンタルサーバー情報を確認
申し込みが完了したら、Xserverのレンタルサーバーのサーバー情報としてIPアドレスとネームサーバーを確認していきます。
Xserverのサーバー情報(IPアドレス)を確認
申し込みが完了すると同時に下図のような画面になるので、「サーバー管理」をクリックします。
![xserver-rental-server-05](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/000-xserver-rental-server-05-640x360.jpg)
「アカウント」→「サーバー情報」をクリックします。
![xserver-information-ip-address-01](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/001-xserver-information-ip-address-01-640x360.jpg)
「サーバー情報」タブ→「IPアドレス」欄に記載される「●●●.●●●.●●●.●●●」の値を控えておいてください。
のちほどDNS設定するときに値を使用します。
![xserver-information-ip-address-02](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/001-xserver-information-ip-address-02-640x360.jpg)
Xserverのサーバー情報(ネームサーバー)を確認
ネームサーバーの情報は、同じ「サーバー情報」タブ→「ネームサーバー1」~「ネームサーバー5」欄に記載される5つの文字列です。
こちらものちほどお名前.comのネームサーバー設定追加で文字列を使います。
![xserver-information-ip-address-03](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/001-xserver-information-ip-address-03-640x360.jpg)
お名前.comでネームサーバー設定追加
次は、先程確認したXserverのネームサーバーの文字列を、お名前.comで追加していきます。
まずは、お名前.comにアクセスし、ログインします。
![onamae-com-login-01](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/100-onamae-com-login-01-640x360.jpg)
下図のような画面になるので、該当するドメイン名のリンクをクリックします。
![onamae-com-dns-name-server-setting-02](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/101-onamae-com-dns-name-server-setting-02-640x360.jpg)
次に「ネームサーバーの設定」→「ネームサーバーの設定」をクリックします。
![onamae-com-dns-name-server-setting-03](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/101-onamae-com-dns-name-server-setting-03-640x360.jpg)
該当するドメイン名にチェックを入れ、「他のネームサーバーを利用」タブをクリックします。
![onamae-com-dns-name-server-setting-04](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/101-onamae-com-dns-name-server-setting-04-640x360.jpg)
下図のような画面になるので、ネームサーバー情報に現在設定されているネームサーバーが表示されています。
![onamae-com-dns-name-server-setting-05](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/101-onamae-com-dns-name-server-setting-05-640x360.jpg)
ここで下図のようにXserverのネームサーバー(ns1.xserver.jp ~ ns5.xserver.jp)を追加します。
![onamae-com-dns-name-server-setting-06](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/101-onamae-com-dns-name-server-setting-06-640x360.jpg)
ネームサーバーの変更内容を確認し、「設定する」ボタンをクリックします。
![onamae-com-dns-name-server-setting-07](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/101-onamae-com-dns-name-server-setting-07-640x360.jpg)
下図のようにネームサーバー設定が完了状態になっていたらオッケーです。
![onamae-com-dns-name-server-setting-08](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/101-onamae-com-dns-name-server-setting-08-640x360.jpg)
お名前.comでDNS設定を追加(Aレコード追加)
次は、お名前.com内でDNSレコードを追加していきます。
前章と同様にお名前.comにログインした後、「ネームサーバーの設定」→「ドメインのDNS設定」をクリックします。
![onamae-com-dns-records-setting-01](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/202-onamae-com-dns-records-setting-01-640x360.jpg)
該当するドメイン名にチェックを入れ、「次へ」ボタンをクリックします。
![onamae-com-dns-records-setting-02](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/202-onamae-com-dns-records-setting-02-640x360.jpg)
DNS設定の中の「DNSレコード設定を利用する」項目の「設定する」ボタンをクリックします。
![onamae-com-dns-records-setting-03](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/202-onamae-com-dns-records-setting-03-640x360.jpg)
下図のような画面になるので、ホスト名、TYPE、TTL、VALUE(IPアドレス)を入力し、「追加」ボタンをクリックします。
![onamae-com-dns-records-setting-04](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/202-onamae-com-dns-records-setting-04-640x360.jpg)
下図のように以下の2つのAレコードを追加してください。
![onamae-com-dns-records-setting-05](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/202-onamae-com-dns-records-setting-05-640x360.jpg)
![](https://engineer-lifestyle-blog.com/wp-content/themes/jin/img/rank01.png)
ホスト名:@.<ドメイン名>
TYPE:A
TTL:3600
VALUE: XserverのレンタルサーバーのIPアドレス
![](https://engineer-lifestyle-blog.com/wp-content/themes/jin/img/rank02.png)
ホスト名:www.<ドメイン名>
TYPE:A
TTL:3600
VALUE: XserverのレンタルサーバーのIPアドレス
Aレコードを2つ追加できたら、画面を下にスクロールして下図の赤枠の部分にチェックを入れ、「確認画面に進む」ボタンをクリックします。
![onamae-com-dns-records-setting-06](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/202-onamae-com-dns-records-setting-06-640x360.jpg)
下図の画面が表示された場合は、「設定しない」ボタンをクリックします。
![onamae-com-dns-records-setting-07](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/202-onamae-com-dns-records-setting-07-640x360.jpg)
さきほど追加した2つのAレコードが表示されていることを確認し、次へ進みます。
![onamae-com-dns-records-setting-08](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/202-onamae-com-dns-records-setting-08-640x360.jpg)
下図のようにDNSレコード設定が完了状態になったら、オッケーです。
![onamae-com-dns-records-setting-09](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/202-onamae-com-dns-records-setting-09-640x360.jpg)
Xserverのドメイン設定
次は、Xserver上でお名前.comで取得したドメイン名の設定を行います。
Xserverのサーバー管理画面に入り、下図のように「ドメイン」→「ドメイン設定」をクリックします。
![xserver-domain-setting-01](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/301-xserver-domain-setting-01-640x360.jpg)
「ドメイン設定追加」タブで該当ドメイン名を選択し、「確認画面に進む」ボタンをクリックします。
![xserver-domain-setting-02](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/301-xserver-domain-setting-02-640x360.jpg)
下図の赤枠の内容で間違いないか確認し、「追加する」ボタンをクリックします。
![xserver-domain-setting-03](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/301-xserver-domain-setting-03-640x360.jpg)
下図のようにドメイン設定の追加が完了したメッセージが表示されたら、オッケーです。
![xserver-domain-setting-04](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/301-xserver-domain-setting-04-640x360.jpg)
下図のように「ドメイン設定一覧」タブで該当ドメイン名を確認すると、「反映待ち」となっていると思います。
![xserver-domain-setting-05](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/301-xserver-domain-setting-05-640x360.jpg)
「反映待ち」が消えるまで、1時間~24時間ほどしばらく待ちましょう。
WordPress簡単インストール
ドメイン設定が終わったら、WordPressをインストールしていきましょう。
Xserverのサーバー管理画面に入り、下図のように「WordPress」→「WordPress簡単インストール」をクリックします。
![xserver-wordpress-simple-install-01](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/501-xserver-wordpress-simple-install-01-640x360.jpg)
「WordPressインストール」タブで、下図のように必要事項を記入してください。
![xserver-wordpress-simple-install-02](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/501-xserver-wordpress-simple-install-02-640x360.jpg)
ブログ名、ユーザー名、パスワード、メールアドレスを入力すれば、あとはデフォルト設定のままで大丈夫です。
![xserver-wordpress-simple-install-03](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/501-xserver-wordpress-simple-install-03-640x360.jpg)
「確認画面に進む」ボタンをクリックし、下図のような確認画面の内容を確認しましょう。
![xserver-wordpress-simple-install-04](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/501-xserver-wordpress-simple-install-04-640x360.jpg)
間違い等なければ、「インストールする」ボタンをクリックします。
![xserver-wordpress-simple-install-05](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/501-xserver-wordpress-simple-install-05-640x360.jpg)
下図のようにWordPressのインストール完了のメッセージがでていたら、オッケーです。
![xserver-wordpress-simple-install-06](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/501-xserver-wordpress-simple-install-06-640x360.jpg)
WordPress Webサイト動作確認(httpアクセス編)
Google Chrome等のWebブラウザで「http://<ドメイン名>」にアクセスすると、下図のようにWordPressのサイトが表示されれば、httpアクセスまで確認できたことになります。
![xserver-wordpress-http-access-confirmation-01](https://engineer-lifestyle-blog.com/wp-content/uploads/2022/10/601-xserver-wordpress-http-access-confirmation-01-640x360.jpg)
WordPressのテーマは、WordPress簡単インストールでデフォルトテーマをインストールしましたが、その他のテーマや有料テーマをインストールすれば簡単に会社ホームページを作成できます。
まとめ
いかがでしたでしょうか。
お名前.comで取得した独自ドメインとXserverのレンタルサーバーでホームページを作成する手順をまとめてみました。
お名前.comとXserverの組み合わせでサーバーをたてるときは、ぜひ本記事を参考にして頂ければと思います。
【関連記事】
【TIPS】お名前.com独自ドメインのメールアドレスをGmailで扱う手順(Google Workspace連携編)