ホームページ

【徹底解説】エックスサーバー・ドメイン取得からWordPress簡単インストールの手順

エックスサーバー簡単インストール
すでにエックスサーバーの契約をしちゃってクイックスタートが使えなかった…どうしたらWordPressでホームページ・ブログを作れる?
or
エックスサーバーで別のドメインを取って新しくWordPressを立ち上げたい

 

そんなWordPress初心者さん、主にこれからホームページを作りたい個人事業主さん向けに記事を書いています。

 

もしまだエックスサーバーの契約をしていなければ、申し込みするだけ!10分で全てが完了するクイックスタートを使うのが一番速くて簡単です。

【たった10分】WordPressをエックスサーバーのクイックスタートで始める方法専門知識がなくてもWordPress(ワードプレス)でホームページは作れる! 個人事業主さん、一人社長さんのためのWeb活用の第一...

 

WordPressインストールまでのステップ
  1. ドメインを取得する
  2. ドメインをサーバーパネルで設定する
    →1時間以上あけて③へ
  3. WordPress簡単インストールをする
  4. 常時SSLの設定をする
  5. WordPressやプラグイン・テーマをアップデートする

こちらを一つずつ解説していきます〜!

 

用意するもの
  • エックスサーバーのログイン情報(最初に届くメール)
  • クレジットカード(コンビニ払いなども可能)

 

この記事は・・・
泉谷梨恵

  • WebデザイナーとしてWordPressサイト制作実績(20件以上)
  • 全11回のホームページ作成講座運営(2019年)
  • 個別レッスンなどで20名以上の方にWordPressレッスン

を行ってきたWebデザイナー&Web活用アドバイザーのリエ( @olioli_web )が書いています。

 

\動画でサクッと見たい方は/

 

記事ではより詳しく解説していますので、じっくり取り組みたい方は記事を読んでいただくのがオススメです!

①エックスドメインで独自ドメインを取得しよう

まず独自ドメインを取得していきます。

独自ドメインとは?

最初に少しドメインについてご説明します。

独自ドメインとは・・・

ホームページのURLのことです。
例えば今見ていただいている私のこのサイトは

freelance-mama-life.com

これは世界に一つの住所のようなもので「オリジナルの名前(英数字)」「.com(他にも.jpや.netなど色々ある)」との組み合わせで構成されています。

どんなのがいいのかな?
基本的に好きなもので同じドメインがすでに使われていなければなんでもOKなんだけど・・・

 

独自ドメインの決め方
  • 屋号名・個人名
  • サービス名や地域名を入れても
  • 短くて覚えやすい(3文字以上63文字以内)
  • 半角英数字(A~Z、0~9)
  • 半角のハイフン「-」

※日本語も使えるのですが、記号変換されてしまうためオススメしません

同業者のホームページのURLなどを見てみるのもオススメですっ

エックスドメインでドメインを取得する

この「独自ドメイン」を売っている会社はたくさんあります。

 

今回はエックスサーバーを契約しているという前提で進めていきますので、エックスドメインというエックスサーバーの中のサービスを使います。

 

新たに登録し直したりしなくていいので便利だよ♪

 

まずエックスドメイン(エックスサーバーの中のドメインサービス)にアクセスします。

↓エックスドメイン公式サイト
https://www.xdomain.ne.jp/

エックスドメインにアクセス

▲トップページの右側にある、取得希望のドメイン名を検索というところに取得したいドメインを入れてみます。

この時は「.com」とかは入れなくて大丈夫だよ!

 

そうすると次の画面で以下の画像のようになると思います。

検索結果で希望の「.com」などが「取得可能です」になっていればOK!
「取得できません」となっているものはすでに使われているドメインなので取得できません。

取得したいドメイン名をチェック

ちなみに「.ドット」以下によって値段が異なります。

一般的なドメインの価格です
↓↓↓

2020.6時点

.com・・・858円/年
.net・・・1298円/年
.jp・・・3102円/年
.xyz・・・33円/年
.site・・・99円/年

迷ったら「.com」にしておけば、まず間違いないです。
あまり馴染みのないドメインだと「怪しい!」と思われてしまう場合もあるので・・・

 

もしすでに取得されていて希望のドメインが取れない場合は、

  • 「.ドット」以下を変える
  • 「ハイフン(-)」をいれたりして微妙に変える

という方法で試してみましょう。

 

取得したいドメイン名をチェック

取得するドメインを決めたら、左にチェックをいれて登録年数を選び「取得手続きに進む」を選択しましょう。

 

登録年数は任意ですが、例えば1年を選ぶと1年後に更新をすることになります(あとで自動更新の設定もできます)。

エックスドメインを取得

 

次の画面で、右側の「Xserverアカウントをお持ちの方」からログインをします。

エックスドメインにログイン

▲このログインIDとパスワードですが、エックスサーバーを契約した時に届いたメールを探してください。

 

↓タイトルがこんなメールです(大切なので保護しておきましょう)!

【Xserver】■重要■サーバーアカウント設定完了のお知らせ

エックスサーバーのログイン情報

 

そのメールを少し下にスクロールして、こんな箇所を探してくださいっ!

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【2】管理ツールのログイン情報
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

エックスサーバーのご利用に必要となる管理ツールおよびログイン情報は
以下のとおりです。

───────────────────────────────────
◆『Xserverアカウント』ログイン情報

XserverアカウントID     :*****
メールアドレス       : ABCDE@gmail.com
Xserverアカウントパスワード : *****
ログインURL         : https://www.xserver.ne.jp/login_info.php

この赤字のアカウントID(メールアドレスでも可)とパスワードが「Xserverアカウント」のログイン情報になります。

 

ちなみにこのメールの下にある「サーバーパネルログイン情報」もこの後の設定で使うのでメールは、そのまま開いておくとGoodです!

 

IDとパスワードを入れて無事にログインできると、このような画面に移ると思います。

ドメインの名前や契約内容を確認して、お支払い情報を入力していきます。

エックスドメインを確認

次の画面で最終確認です。
規約に同意するにチェックを入れて「申し込む」で完了すると、お申し込みIDが表示されると思います。

エックスドメインを確認

メールも確認してみると、このような「ご利用料金お支払い確認のお知らせ」というメールが届いてると思います。

エックスドメインを確認
やった〜!これでドメインが取れたね♪

 

ではそのドメインをエックスサーバーで使えるように設定していきます〜

②取得したドメインをサーバーに設定しよう

エックスサーバー公式サイトからサーバーパネルというところにログインをします。
↓↓↓
https://www.xserver.ne.jp/

エックスサーバーサーバーパネルにログイン
先ほどログインしたIDとパスワードとは異なるので再度メールを確認します。
メールでサーバーパネルのログイン情報を確認

先ほどのドメイン取得で使用した「Xserverアカウント」ではなくその下にある「サーバーパネル」ログイン情報というところになります。

◆『サーバーパネル』ログイン情報

サーバーID     : ABCDE
サーバーパスワード : abcde
サーバーパネル   : https://www.xserver.ne.jp/login_server.php

 

このサーバーパネルはWordPressの設定でもよく開く画面なので、パスワードなど記憶させておくと楽です!

 

↓IDとパスワードを入れてログインできたらこのような管理画面になると思います。

エックスサーバーサーバーパネル
うわっなんか一気に専門的な感じになった・・・謎の用語がいっぱいだ・・・(不安)
大丈夫!使うところは一部で決まっているから(全部使わないよ〜!)手順通りに進めていけば難しくないよ〜!

 

サーバーパネルを少し下にスクロールして(もしくは右の方)「ドメイン」というところを探してください。
その中の「ドメイン設定」をクリックです。

エックスサーバードメイン設定

開くと「ドメイン設定一覧」のタブになっているので「ドメイン設定追加」というところをクリックして開きます。

エックスサーバードメイン設定

ちなみに・・・

ここで初期ドメインとして入っている「****(サーバーID).xsrv.jp」というのは契約時に自動で作られるドメインです。

基本的に公式ホームページやブログに使うことはありませんが、練習やテストなどで使っても良いです。

 

ここのドメイン設定に先ほど取得した独自ドメインを入力します。

この時に「***.com」と「.(ドット)」のあとまで全部入れます。

エックスサーバー独自ドメインの設定

左下にある

  • 無料独自SSLを利用する(推奨)
  • 高速化・アクセス数拡張機能「Xアクセラレータ」を有効にする(推奨)

そのままチェックを入れておいて大丈夫です。

入力できたら右下の確認画面へ進むをクリックです。

 

次の確認画面で問題がなければ「追加する」をクリック。

エックスサーバー独自ドメインの設定

↑このように「ドメイン設定の追加を完了しました」と表示されればOKです。

 

ちなみにこの画面のURLというところから青字になっている独自ドメイン(あなたのホームページのURL)をクリックして実際のホームページを開くと、このような画面で「無効なURLです」と出てきます。

エックスサーバー独自ドメイン無効なURL?
え!?設定したのに無効?どういうこと?
大丈夫!書いてある通りドメインがサーバーに反映されるまで少し時間がかかるよ。少し待ってから次に進もう(目安:1時間)!

ドメイン設定後、すぐに反映はされません。
設定が終わったら1時間以上空けてから次の作業(WordPressのインストール)へ進みましょう。

③WordPress簡単インストールをしよう

まず②のドメイン設定ができているか確認します。

 

②のドメイン設定作業が完了し、1時間以上おいて再び独自ドメイン(あなたのホームページのURL)を開いてみるとこのような表示になると思います。

エックスサーバー初期画面
こちらはエックスサーバーでホームページを設置する前の初期画面。
この表示になっていれば進めてOKです。

※ちなみに「保護されていない通信」と出ていますが最後に設定するので今は気にしなくて大丈夫です。

 

設定ができているかは、エックスサーバーのサーバーパネル→「ドメイン設定」からも確認ができます。

↓この独自ドメインの後ろに「反映待ち」が表示されているときはもう少し待ちましょう。

ドメイン設定確認

ドメイン設定が完了したことを確認したら次に進みます。

 

では再びエックスサーバーのサーバーパネルを開きます。

エックスサーバーサーバーパネルにログイン

ログインできたらパネルの中の「WordPress」「WordPress簡単インストール」を探してクリックします。

WordPress簡単インストール

開いたらドメイン選択画面が出ると思うので対象のドメイン(今回設定したホームページを作るURL)を選択します。

もしくはすでにドメインが選択されている状態だと上の写真のようにすでに一つのドメインが「設定対象ドメイン」と出ると思いますが、それでもOKです。

 

対象のドメインを選択したら右側のタブ「WordPressインストール」をクリックして開きます。

このような画面になると思いますので一つずつ入力していきます。

WordPress簡単インストール

入力する内容は以下の通りです。

サイトURL そのままでOK(特に何もしない)
ブログ名 ホームページ(ブログ)のタイトル
(例)フリーランスママライフ※変更可能なので仮でもOK
ユーザー名 WordPressにログインするID
英数字のみ※変更不可&セキュリティ対策のため推測されやすいものは汎用的なもの(masterとかadminとか)は避ける
パスワード WordPressにログインするパスワード
英数字のみ※セキュリティ対策のためできるだけ複雑なものを!後から変更は可能
メールアドレス なんでも大丈夫。後から変更も可能。
キャッシュ自動消去 そのままでOK(ONにする)
データベース そのままでOK(自動で生成する)

 

パスワードに関しては、WordPressのセキュリティを守る上で特に重要なので複雑なもの(英数字、大文字小文字を混ぜて12文字以上)にしましょう!

 

良いものが思い浮かばない人は、パスワード生成ツールなどを使って作るのもオススメです!

↓強度はカスタム、記号のチェックを外し、12文字以上で作りましょう!
パスワード生成

 

参考までに、こんな感じ↓↓で入力したら「確認画面へ進む」をクリックです。

WordPress簡単インストール

内容を確認したら右下のインストールをクリックしてしばらく待ちます。

WordPress簡単インストール

インストールしているので、少し時間がかかりますが画面が切り替わるまでいじらずに待ちましょう!!

 

 

↓このような画面に切り替わればOKです。
そしてこの画面の情報、コピー&ペーストするなり(心配な方は印刷しても!)して必ず大切に保管しましょう。

WordPress基本情報
メモ必須な情報
  • ユーザー名
  • パスワード
  • MySQLデータベース名
  • MySQLユーザー名
  • MySQLパスワード

WordPressのログインに必要なのは、ユーザー名&パスワード(自分で決めたもの)ですが、MySQLの情報も万が一のために必ずメモします。

 

メモはいつもどこにしたらいいの?
一番簡単なのは、Windowsのかたは「メモ帳」、Macの方もメモアプリがあるよね。
でもWordとかExcelでもいいしとにかくきちんと保存されれば大丈夫だよ。

MySQL?データベースとは?

WordPressはブログ更新ができるシステムのため、たくさんブログや写真を保管・整理できるように「データベース」と呼ばれる書庫みたいなものを一緒に作る必要があります。
WordPress簡単インストールではそれを自動で生成してくれます。

基本的に直接触ることはないですが、運営していく上で何かトラブルがあった場合必要になることもあるので、念のためパスワードなどは保管しておくようにします。

 

せっかくなので、このままWordPressにログインをしてみましょう!

今開いている画面の中の「管理画面URL」という青字になっているところをポチッとクリックします。

WordPress簡単インストールログイン

そうすると、ユーザー名(またはメールアドレス)とパスワードを入れる画面になるので、ここに先ほどメモした情報をコピー&ペーストして入れてログインしましょう。

(そのままGoogle Chromeに記憶させてしまうと次から楽です)

 

WordPressは、全てのサイトの管理画面が

ドメイン名(ホームページのURL/wp-admin/

となります!

え?そうなの!じゃあ誰でもこの管理画面の手前までは入れるんだね・・・
良い気づきだね!
そうなの。だからこそまずこのユーザーIDとパスワードでセキュリティを守る必要があるんだよ。

 

ログインしてこの画面にいけばひとまずOKです!

WordPressクイックスタート

まだ完了ではないので、次へ進んでくださいね〜!

 

WordPressと実際のホームページは開いたまま、またエックスサーバーのサーバーパネルへ戻ります。

④常時SSL化をしよう

しかしまだ続きますのでもう少し頑張りましょう!

次にホームページが「保護されていない通信」となっていたものを「保護されている通信」に直す作業をしていきます。

(1)SSL化ってなに?

まず実際のホームページを見て確認してみましょう!

 

WordPress管理画面左上の「家のマーク:ホームページ名」にマウスを持っていきます。
(この画面でいうと「おうちWeb教室」と書いてあるところ)

「サイトを表示」をクリック!
(右クリックして「新しいタブで開く」にすると管理画面と実際のホームページと同時に2つひらけます)

WordPressクイックスタート

この状態でURL(アドレス)が入っているところを見るとおそらく「保護されていない通信」になっているかと思います。

保護されていない通信

こちらを「保護されている通信」に直す作業をしていきます。
この「保護されている通信」にする作業をSSL化と言います。

SSL化とは・・・

SSL(Secure Sockets Layer)とはインターネット上の通信を暗号化する技術のこと。

なぜ設定する必要があるのか?は、ざっくりいうと「セキュリティ対策」のためとインターネット界を仕切っている「Googleの御達しのため」です。

 

↓これです!

常時SSL化あなたのホームページを守るためというのと、この「保護されていない通信」(他にも見ている端末によっては「安全ではありません」など)と出てしまうと見た目にもよくないですよね・・・

 

年配の方はこれが出るから「怖い!」とホームページを閉じてしまう人もいらっしゃると聞いたこともあります。

 

保護されていない通信は、http://freelance-mama-life.com
保護されている通信になると、https://freelance-mama-life.com
になります。

→WordPressをインストールする最初の段階で必ず設定しておきます

 

正確にいうとエックスドメインでドメインを取得するときにドメイン自体はSSL化されているのですが、全ページで「保護されている通信」にするためにこの「常時SSL化」という作業をしていきます!

 

(2)サーバーパネルからドメインのSSL化の確認をしよう

まずあなたのホームページのドメインがSSL化されているか確認してみましょう。

先ほどから開いている、エックスサーバーのサーバーパネルのドメインSSL設定を開きます。

SSL化されているか確認

▲あなたのホームページのURLを選択して「無料独自SSL一覧」というところに出てくれば問題ありません。

(万が一ここで出てこない場合は、「独自SSL追加」というところから設定する必要があります)

 

(3)サーバーパネルから「.htaccess」の編集をしよう

次に同じくサーバーパネルの中のホームページというところの「.htaccess」をクリックします。

「.htaccess」エックスサーバーで編集する

▲ドメイン選択画面になったらあなたのホームページのドメインを「選択する」(もしくはすでに選択されていた場合は、画像下の画面になると思います)をクリックします。

 

そして右の「.htaccess編集」というところをクリックして開きましょう。

「.htaccess」エックスサーバーで編集する
え、やばいやばい!!!
上級者向けって書いてあるし、なんかわけわかんない暗号出てきたし・・・・

 

大丈夫!
確かにちょっと怖いけど触るのは最初の設定の時だけだよ。
この通りにやればおかしくなったりしないから安心して〜!

 

.htaccess(ドットエイチティーアクセス)の中に以下の文字を貼り付けます。

 

↓このピンクの枠の中をそっくりそのままコピーしてください!
(ctrl+Cでコピーできます)

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

 

<参考>Webサイトの常時SSL化 (エックスサーバー公式サイト)https://www.xserver.ne.jp/manual/man_server_fullssl.php

 

↓そしてこの画像のように一番上に貼り付けます。
ここで一番先頭に貼り付けないと正しく動作しないので注意!!!
(ctrl+Vでペーストできます)

「.htaccess」エックスサーバーで編集する

元々文字が入っていますがそれらを消さないように上に少し空行をあけて貼り付けます(空行は入っていても問題ないです)。

 

できたら「確認画面へ進む」です。
確認できたら右下の「実行する」をクリック。

「.htaccess」エックスサーバーで編集する

 

このように「.htaccessの編集が完了しました」と出ればOKです。

.htaccessの編集が完了しました

 

わぁ〜〜なんとかできたっ
・・・でこれって何をやったの?

 

最初に説明したSSL化(httpsにする設定)だけでは、一見保護されている通信になるのですが実はちょっと不十分なのです。
基本的には問題ないのですが、仮にhttpでアクセスをしたら「保護されていない通信」と出てしまいます。
なので常にhttps、保護されている通信でアクセスしてもらうためにこの常時SSL化をする必要があります。

 

この「.htaccessの編集」をで命令を追加することで強制的にhttpsにしてね!っていう信号を送っているようなイメージだよ!!

(4)実際のホームページで常時SSLの確認をしてみよう

では、実際のホームページをもう一度開いてみましょう。

開いている人は更新(F5ボタンまたはctrl(⌘)+R)してみましょう

 

恐らく開くときちんと鍵マークがついており、httpsになっていると思います。

こちらを一旦手動でhttpにしてみて強制的にhttpsになるか(常時SSL化)のチェックをします。

常時SSLの確認

▲画像のようにアドレスバーのあたりをダブルクリックして、httpsのsを消してEnterを押してみましょう。

 

自動的に鍵マークがつけばOKです。

(5)WordPress側の設定を変更する

最後にWordPressの管理画面の設定をします。

WordPressの管理画面を開いて、左のツールバーの設定から一般というところをクリックして開きます。

常時SSL化、WordPressの設定

この中の

  • WordPressアドレス(URL)
  • サイトアドレス(URL)

を変更していきます。

 

httpとなっているものにsをつけてhttpsにするだけです!

常時SSL化、WordPressの設定

▲できたら下にスクロールして「変更を保存」すると再びログイン画面になるはずです。
再度ログインしてみます。

 

ログインすると「変更を保存しました」となっており、アドレスが「https」にちゃんとなっていると思います。

常時SSL化、WordPressの設定

これで常時SSL化の設定は全て完了です。

ここで触った一般設定の中の

  • WordPressアドレス(URL)
  • サイトアドレス(URL)

については、基本的に初期設定のこの操作でしか触ることはありません。
特にWordPressアドレスを間違って変えてしまったりすると、画面が真っ白になったりもするので基本的に今後は触らないようにしましょう。

わ〜やっと終わった!
ここまでくればもう大丈夫だよね!
お疲れさま〜!
ここまでできれば素晴らしい〜!難しいことはクリアした感じ。
やっとスタート地点に立った感じで終わりではないけどね(笑)

⑤WordPressやプラグインをアップデート(更新)しよう

最後にWordPress本体やプラグインのバージョンを確認していきます。

ここまでくればもう簡単。
あと一息です!

 

管理画面左上、ダッシュボードの下の「更新」というところを確認すると恐らく赤字で数字が出ていると思います(出ない場合もあります)。

「更新」をクリックして開きます。

WordPress本体の更新

▲まずWordPress本体のアップデートが必要な場合は更新します。
「今すぐ更新」をクリックして少し待つだけ。

 

このような画面(バージョンによってデザインは変わります)になればOKです。

WordPress5.4.2
WordPress自体はシステム(パソコンやスマホみたいなイメージ)なので、定期的にバージョンのアップデートがあります

 

再び、「更新」というところをクリックしてもらうと下の方に

  • プラグイン
  • テーマ

こちらも更新してください〜というメッセージが恐らく出ていると思います。

練習も兼ねて更新してみましょう。

プラグインの更新

▲画像のようにチェックをいれて「更新」をクリックするだけです。
とりあえず全部更新してしまってOKです。

 

「更新に成功しました」と表示されればOK。

WordPress更新
たまに「失敗しました」というエラーが出る場合がありますがたま〜にあることなので焦らずもう一度同じ操作を繰り返してみてください。

 

プラグイン→WordPressに様々な機能を追加するアプリみたいなもの。
テーマ→WordPressのデザインを作るテンプレートみたいなもの。

です。
これは別記事で詳しく解説していくのでここでは「ふ〜ん」くらいに思っていただけたらOKです。

 

これでWordPress簡単インストールの全ての操作が完了です。

わ〜やった〜お疲れ様〜!!!

エックスサーバーのWordPress簡単インストールまとめ

お疲れ様でした。
最後にもう一度手順をまとめます。

 

  1. ドメインを取得する
  2. ドメインをサーバーパネルで設定する
  3. WordPress簡単インストールをする
  4. 常時SSLの設定をする
  5. WordPressやプラグイン・テーマをアップデートする

 

少し大変だったかもしれませんが、一番難しくでも一番重要なところなのでゆっくりじっくり進めてみてください〜!

でもこれをマスターすればWordPressのホームページが何個でも作れちゃうってことだよね!
そうそう!
基本的にサーバーを契約すると複数のWordPressのサイトが作れるよ(サーバーのプランにもよりますが)。
慣れるとサクサクできるはず〜!

 

↓次のステップはこちら!

【初心者必見】WordPressのインストール後にすぐやっておきたい初期設定6個 そんなWordPress初心者さん、これからホームページを作りたい個人事業主さん向けに記事を書いています。 ...

 

↓もっと簡単にWordPressを始めたい方はクイックスタートを利用しましょう

【たった10分】WordPressをエックスサーバーのクイックスタートで始める方法専門知識がなくてもWordPress(ワードプレス)でホームページは作れる! 個人事業主さん、一人社長さんのためのWeb活用の第一...
ABOUT ME
イズミヤリエ
長男出産後にWebデザインの世界へ飛び込み未経験・コネなしから開業。 一人ブラック企業、2人目出産も乗り越え現在フリーランスママ3年目。 「フリーランス・個人事業主がWebを楽しく活用してご機嫌に生きる」をテーマに発信&Webサポート・制作、講座開催などを行う。 とにかくPC作業が、ブログや講座&資料作りが大好き。 スタバのラテとカカオ70%チョコがあれば生き抜ける。 転勤妻で4歳&0歳男の子ママ。
EBookダウンロード

【無料E-Book】頑張らない!週1投稿でも!
ファンが集まるインスタグラムアカウントの作り方

無理してフォロワーさんを増やさなくても・・・
毎日投稿しなくても・・・

あなたのファンが集まって
ちゃんとお仕事につながるアカウント

そんなインスタグラムの活用法を1冊のBookにまとめました♡