エンジニアライフスタイルブログを運営しているミウラ(@miumiu06171)です。
普段はフリーランスでシステムエンジニアをしております。
今回は、XserverとXdomainの同時契約でビジネスサイトを爆速で構築する方法をまとめてみました。
これからビジネスサイト、ホームページ、個人ブログ等を作成する予定の方は、ぜひ参考にしてみてください。
Xserver(エックスサーバー)とXdomain(エックスドメイン)の同時契約手順
本章では、Xserver(エックスサーバー)とXdomain(エックスドメイン)を同時契約し、WordPressデフォルトテーマのホームページを簡単に作成するまでの手順を紹介します。
WordPressをビジネステーマに変更する手順については、後述しておりますので、XserverとXdomainをすでに契約済みの方は本章はスキップして大丈夫です。
Xserverアカウント作成
Xserverを契約するためにまずはXserverアカウントを作成していきましょう。
こちら
のXserverのサイトへアクセスし、「ログイン」または「まずはお試し10日間無料」リンクをクリックします。
下図のように「初めてご利用のお客様」（左側）と「XserverアカウントIDをお持ちのお客様」（右側）の２つからログインの選択が表示されます。
初めての方は、左側の「10日間無料お試し、新規お申込み」ボタンをクリックし、下図のXserverアカウント登録情報を入力し、Xserverアカウントを新規作成してください。
すでにXserverアカウントをお持ちの方は、右側からIDとパスワードでログインしてください。
XserverとXdomainの同時申し込み(WordPressクイックスタート)
XserverとXdomain同時契約し、WordPressクイックスタートを使って爆速でWordPressサイトを作成していきます。
ログインに成功すると、下図のお申し込み画面になるので、
・プランの選択
・クイックスタートオプションにチェックを入れる
・契約期間を選択
します。
通常、契約期間が長いほど割引価格になるので、長期運用が決まっている場合は、長い期間を選択してください。
ここでは、筆者が手順をまとめるために短期使用を想定しているので、3ヶ月を選択しています。
Xdomainで独自ドメイン名の検索・取得・決定
次に同じお申し込み画面を下にスクロールしていくと、下図のように独自ドメイン名を検索し、検索したドメインが使用可能か調べてくれる項目があります。
独自ドメイン名には、あなたが好きなドメイン名を入れたあと、他の人が取得済みで利用不可能なのか「検索」ボタンを押して調べてみてください。
上図の青字部分に「取得可能」という文言があれば、取得可能なドメイン名であることを指します。
次に以下の項目も入力し、
・ブログ名
・ユーザー名
・パスワード
・メールアドレス
WordPressテーマは「WordPressデフォルトテーマ」を選択してください。
ユーザー名とパスワードは、のちほどWordPress管理画面にログインするために使用しますので、覚えておいてください。
お支払い方法の設定
さらに同じお申し込み画面を下にスクロールしていくと、下図のようにお支払い方法を選択する項目があります。
クレジットカード情報を入力し、下図のように利用規約に同意したあと、「お申し込み内容を確認する」ボタンをクリックしてください。
お申し込み内容確認
次に下図のようなお申し込み内容確認画面になるので、内容に相違ないか確認してください。
お申し込み確定
お申し込み確認画面を下にスクロールしていき、下図のお支払い内容も確認の上、「申し込む」ボタンをクリックし、申し込みを確定します。
下図のような画面になれば、お申し込みの確定が完了しています。
さきほど入力したメールアドレス宛にもお申し込み完了メールが届いているかと思います。
Xserverレンタルサーバー管理画面で申し込み内容を再確認
XserverとXdomainの同時契約申し込みが完了したところで、Xserverアカウントページへログインしてみてください。
下図のようにログイン直後のXserverレンタルサーバー管理画面を開くと、サーバー欄に契約したXserverの情報、およびドメイン欄にXdomainの情報が一覧表示されているので、契約内容を再確認することができます。
XserverおよびXdomainの契約期間の更新は、デフォルトで「自動更新」となっているので、長期で運用しない方は必ず利用期限内に自動更新設定をOFFにしてください。
Xdomain(エックスドメイン)のドメイン設定反映確認
ここでは、Xdomainのドメイン設定の反映が完了したか否か確認する方法を紹介していきます。
XserverとXdomainの同時契約が完了すると、すぐにXdomainの独自ドメインでアクセスが可能になるわけではありません。
そこで、Xdomainのドメイン設定が終わったか否か確認する方法をみていきましょう。
まずは、Xserverアカウントにログインしてレンタルサーバー管理画面に入り、サーバー欄の「サーバー管理」ボタンをクリックすると、下図のようなサーバーパネル画面になります。
下図のようにサーバーパネル画面に遷移したら、「ドメイン」→「ドメイン設定」をクリックします。
下図のようなドメイン設定画面になるので、Xserverの初期ドメイン(xsXXXXX.xsrv.jp)の状態が「Aレコード相違」、独自ドメイン(ここではhogehoge777.net)の状態が「反映待ち」となっていると、ドメイン設定の反映中を指し、まだサイトへアクセスできません。
筆者が操作した経験ですと、XserverとXdomainの同時お申し込み完了から１～２時間ほどすると、下図のようにXserverの初期ドメインと独自ドメインの状態表示が消えます。
ここまで確認できましたら、ドメイン設定の反映が完了し、サイトへアクセス可能となっています。
次章でホームページへアクセスする方法を確認していきましょう。
Xserver(エックスサーバー)とXdomain(エックスドメイン)で構築したWordPressのホームページ確認
Xserver(WordPressデフォルトテーマ)のホームページURLと管理画面ログインURLを確認
Xserver(WordPressデフォルトテーマ)のホームページURLと管理画面URLを確認していきましょう。
下図のようにサーバーパネル画面から「WordPress」→「WordPress簡単インストール」をクリックします。
あなたがXdomainで取得した独自ドメイン名欄の「選択する」リンクをクリックします。
下図のように「インストール済みWordPress一覧」タブが開くので、WordPressクイックスタートで作成したホームページURLを指す「サイトURL」と、ホームページの管理画面にログインするためのURLを指す「管理画面URL」を確認してください。
ここまでで注意したいことは、以下の２つの管理画面があることを認識しておくことです。
・Xserverレンタルサーバーの管理画面
Xserver、Xdomain等のエックスサーバー社が提供するすべてのサービスを一元管理する管理画面
・WordPressのホームページ(サイト)を管理する管理画面
Xserver上で動作中のWordPressのホームページ(サイト)を管理する管理画面
Xserver(WordPressデフォルトテーマ)のホームページURLへのアクセス確認
さきほど確認した「サイトURL」にブラウザでアクセスしてみてください。
下図のようなWordPressデフォルトテーマのホームページが表示されていたらオッケーです。
Xserver(WordPressデフォルトテーマ)のホームページ管理画面へのログイン確認
さきほど確認した「管理画面URL」にもブラウザでアクセスしてみてください。
下図のようなログイン画面が表示されていればオッケーで、お申し込み時に設定した「ユーザー名」と「パスワード」を入力し、「ログイン」ボタンをクリックします。
下図のようなホームページ管理画面（ダッシュボードともいう）が表示されればオッケーです。
念のため、ホームページ管理画面上の設定でサイトURLが正しいか確認しておきましょう。
下図のように「設定」→「一般設定」をクリックし、「WordPressアドレス(URL)」欄と「サイトアドレス(URL)」欄にhttpsの独自ドメインのアドレスが記載されていればオッケーです。
httpsではなく、httpが表示されている場合は、httpsにアドレスを変更してください。
Xserver(WordPressデフォルトテーマ)のサイトをビジネスサイトテーマLightningへ変更
WordPressのホームページをビジネスサイトテーマ(Lightning)に変更する方法を紹介していきます。
まずは、下図のようにサーバーパネル画面を開き、「WordPress」→「WordPressテーマ管理」リンクをクリックします。
下図のように「テーマのインストール」欄を確認し、プルダウンメニューから「Lightning/無料」を選択し、「インストール」ボタンをクリックします。
下図のような確認画面になるので、内容を確認の上、「インストールする」ボタンをクリックします。
下図のように「テーマのインストールが完了しました」と表示されればオッケーです。
Lightningテーマをインストールできたところで、下図のようにホームページ管理画面にログインし、「外観」→「テーマ」をクリックします。
さきほどインストールした「Lightning」を見つけ出し、下図のようにLightningの最新バージョンが利用可能というメッセージがあれば、「今すぐ更新」リンクを押してテーマを最新バージョンにアップデートしましょう。
Lightningテーマの最新バージョンへ更新が完了すると、下図のように「更新しました」と表示されます。
Lightningテーマが最新バージョンになったところで、下図のようにLightningテーマの下側にある「有効化」ボタンをクリックし、Lightningテーマを有効化してください。
これでLightningテーマへの変更は完了です。
ちなみに、Xserverが無料で提供してくれているビジネスサイト向けテーマ「Lightning」を使用しましたが、その他外部サイトから有料WordPressテーマを購入した場合も同じ作業でテーマを有効化できますので、テーマ変更手順として参考にして頂けます。
Xserver(WordPress Lightningテーマ)のビジネスサイトURLへのアクセス確認
サイトURLにアクセスし、Lightningテーマに変更できているか確認してみましょう。
WordPressテーマを変更しても、サイトURLは変わりません。
下図のようにサイトが表示されれば、Lightningテーマへの変更が完了しています。
Xserver(WordPress Lightningテーマ)のサイト管理画面へのアクセス確認
WordPressテーマを変更しても、サイト管理画面のURLは変わらないので、再度アクセスできるか確認しておきましょう。
下図のようなサイト管理画面が表示されればオッケーです。
Xserver(WordPress Lightningテーマ)のビジネスサイトのhttpsリダイレクト設定確認(http→https)
次にSEO対策では必須であるhttpsリダイレクト設定が正しく行われているか確認しておきましょう。
httpsリダイレクトとは、httpアクセスした場合に自動的にhttpsアクセスに転送される機能です。
つまり、「http://<ドメイン名>」のサイトURLにアクセスすると、自動的に「https://<ドメイン名>」に転送されることを意味します。
それでは、早速あなたが取得した独自ドメイン名を使って、httpアクセスしてみてください。
すると、httpsアクセスしたサイトURLに自動的に転送されて、前章と同じサイトが表示されればオッケーです。
まとめ
いかがでしたでしょうか。
XserverとXdomainでビジネスサイトを構築する手順を多数の図解で解説してきました。
WordPressのテーマを変えれば、ビジネスサイト・会社ホームページ・個人ブログも簡単に構築できるため、ぜひ本記事を参考にサイト構築を試してみてください。
【関連記事】
【Google Workspace】利用料金や導入手順から独自ドメインのビジネスメールをGmailと連携する方法まとめ
【TIPS】お名前.com独自ドメインとXserver(WordPress)でホームページ作成手順まとめ
