Xサーバーに申込 [Xサーバー でWordPressをはじめようStep1.] (編集中)

Xサーバー とWP

XサーバーとWordPress

ここではエックスサーバー でWordPressを始める方法を解説します。

Xサーバー は、レンタルサーバーの中でも値段が手頃(月額1000円くらい〜)で、なおかつ、同時に多くのアクセスが集まっても安定しています。
wp(ワードプレス)もボタン一つでインストールできます。
また、多くの人が使っているので困った時にも検索すれば、解決策を見つけやすいのでお勧めします。

WordPressとは、無料で使えるブログ機能(ソフトウェア)です。
本来はHTMLやCSSといったコードを書いて表示するwebページ(HTMLページ)を簡単に作成、編集することができます。

ブログを始めるまでの大きな流れ

STEP.1
サーバー申込
エックスサーバーに申込
サーバー代を支払う
STEP.2
ドメイン取得
お名前.comでドメインを取得する
STEP.3
WordPressインストールと設定
エックスサーバーに独自ドメインを設定する
独自SSLの設定をする
WordPressをインストールする
WordPressでURL設定をする
エックスサーバーでhttp⇒httpsのリダイレクト設定

エックスサーバーに申込

xサーバー
Xサーバー トップページ

1. Xサーバー へGo

まずはじめに、Xサーバー へ行って申し込みをします。
10日間のお試しがあるので、そこからやってみましょう。

▶︎エックスサーバー へ GO


2. 「10日間お試し 新規お申し込み」をクリック

xserver2
お申し込みフォーム

オレンジ色の「10日間無料お試し、新規お申し込み」ボタンをクリックします。


3. お客様情報入力

申し込みフォームサンプル
「お客様情報入力」記入例。
クリックすると実寸で見れます。

申し込みフォームにお客様情報を入力します。
必要なのは

  • ドメイン名を考える(後述)
  • プランを選ぶ (月額1000円程度のx10プランで良いと思います。)

です。
ただし、ドメインは後でお名前.comで取ったものを使うので、ここでは練習のつもりで気軽に考えてみましょう。

ドメイン名はサイトの名前を英字にしたものが良いと思います。
また、ドメイン名は重複することができない名前です。
たいていの単語はすでに誰かが使っている、または業者に押さえられていると思うので、多少アレンジが必要になると思います。
こちらのページで具体的な対策を書いています。)
ここでは「independent(自立・独立)」で試してみましたが、すでに使われていたので、「indepe」にしました。

ドメイン取得にはお名前.com ムームードメイン がよく使われています。

(今回はXサーバー の「ドメイン名がずっと無料」というキャンペーンを利用したいと思いましたが、このキャンペーンの適用はx20、x30プランのみでした。)


完了画面
申し込み完了画面
(クリックで実寸表示)

4. Eメールを確認します。

申し込みが完了すると、登録したメールアドレスに、サーバー 情報がメールで送られてきます。

Eメール/
【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間]

Eメール
件名/【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間]
(クリックで実寸表示できます。)

5.『Xサーバー アカウント(旧インフォパネル)』にログイン

メール確認
『Xserverアカウント』と『サーバーパネル』の
2種類のログイン情報があるので間違えないように注意。

Emailに記載されているログイン情報を確認します。
① 『Xserverアカウント』ログイン情報のログインURLをクリック
② 開いたページのフォームに、
XserverアカウントID と
Xserverアカウントパスワード を入力します。


Screenshot_2020-02-12-Xserverアカウント---ログイン-レンタルサーバー【エックスサーバー】_01
Xserverアカウント』ログイン画面

6. 『Xサーバー アカウント(旧インフォパネル)』ページの表示

ログインすると以下のページが開きます。

Xサーバーアカウントトップページ

エックスサーバーで料金を支払う

エックスサーバーのスタンダードプラン(X10)の料金は以下のようになります(2020年2月26日時点)。
12ヶ月分×月額1000円が基準で、契約期間によって料金が増減する感じです。

X10プラン
2020年2月26日時点

これに加え、初回申込時には初期費用が¥3,000円かかるのでご注意ください(参考:料金プラン)。


Xserverアカウント(旧インフォパネル)にログイン

ログイン

Xserverアカウント(旧インフォパネル)

4.メールを確認、5.『Xサーバー アカウント(旧インフォパネル)』にログインを参考に、もう一度ログインしてみましょう。


「料金のお支払い/請求書発行」をクリック

お支払いクリック
XSERVERアカウント/トップページ

XSERVERアカウント/トップページの左ナビから、「料金のお支払い/請求書発行」をクリックします。


「料金のお支払い/請求書発行」画面で手続き

「料金のお支払い/請求書発行」 画面の中程に「サーバー」欄があります。

プラン選択
「料金のお支払い/請求書発行」 画面

10日間の無料お試し期限が過ぎてしまっていました。
10日間って、忙しいとあっという間にすぎてしまうので、先に申し込む事をお勧めします。
今回はまだ表示されていたので、申し込みできそうです。

チェックボックスにチェックを入れます。


「お支払い方法を選択する」をクリック

支払い
12ヶ月を選択しました。

「クレジットカード決済画面へ進む」をクリック

支払い選択

カード情報を入力

また、自動更新設定を行うにチェックを入れることをお勧めします。

カード情報入力

私は以前、ブログの自動更新をオフにして、自分で更新していましたが、ある時忘れてしまい、大事なブログを無くしてしまいました。
始めた当時は、「飽きてしまった頃に自動でお金取られるのやだなあ〜」と思っていましたが、失って始めて、過去の記録の価値気がつきました
出産当時の気持ちとか、色々綴っていたので本当に残念です。

ちょっと無駄に思える時もあるかもしれませんが、その先の将来、記録があってよかったと思う日が必ずくると思いますので、未来への投資だと思って、自動更新にすることをもう一度おすすめします。


内容を確認して、「カードでの支払い(確定)」をクリック

確定

支払いが完了しました。

完了

お名前.comでドメインを取得する

ドメインの取得はこちらの記事にまとめました。

おなまえ_02 お名前.comでドメインを取得しよう [Xサーバー でWordPressをはじめようStep2.] (編集中)

Xサーバーにドメインを設定する

Xserverアカウント(旧インフォパネル)にログイン

4.メールを確認、5.『Xサーバー アカウント(旧インフォパネル)』にログインを参考に、もう一度ログインしてみましょう。

サーバーパネルにログイン

サーバー管理クリック

ページ中程の「ご契約一覧」/「サーバー」欄 / 操作メニュー「サーバー管理」をクリックします。


サーバーパネルが開いたら、「ドメイン設定」をクリックします。


ドメイン追加クリック

「ドメイン設定追加」をクリック。


お名前.comで取得したドメインを入力します。
入力ができたら[確認画面へ進む]をクリックします。


追加するクリック
後でネームサーバーを指定のものにします。
[追加する]をクリックします。


追加完了

ドメイン設定の追加が完了しました。

お名前.comでネームサーバー設定

最後に、ネームサーバー設定をすることで「サーバー」と「取得したドメイン」が結び付けられるようになります。
ネームサーバーとはドメインとサーバーを結びつけるための仕組みです。

エックスサーバーで独自ドメインを使用するためには、ドメインのネームサーバーをエックスサーバー指定のものに変更する必要があります。

お名前.comにログイン

ログイン
パスワードを忘れた場合はこちらをクリックするとパスワードを再設定できます。

お名前.comの管理画面にログインします。


[DNS]タブをクリックします。


DNS設定クリック_02_02
「このページを離れますか?」という胸のダイアログが出るかもしれません。
その場合は「離れる」をクリックします。
[ドメインのDNS関連機能設定]にチェックを入れ、[次へ]をクリックします。


左メニューから、[ネームサーバーの変更]をクリックします。

左メニューから、[ネームサーバーの変更]をクリックします。


[他のネームサーバーを利用]をクリックします。
[他のネームサーバーを利用]をクリックします。


DNS情報入力

入力欄に、ns1.xserver.jp〜ns5.xserver.jpを上から順番に入力していきます。

 ■エックスサーバー指定のネームサーバー
 ——————————————————–
     ネームサーバー1: ns1.xserver.jp ( 219.94.200.246 )
     ネームサーバー2: ns2.xserver.jp ( 210.188.201.246 )
     ネームサーバー3: ns3.xserver.jp ( 219.94.200.247 )
     ネームサーバー4: ns4.xserver.jp ( 219.94.203.247 )
     ネームサーバー5: ns5.xserver.jp ( 210.188.201.247 )
 ——————————————————–
 ※ネームサーバーの変更が完全に反映されるまでには一定時間必要と
  なります。数時間~24時間程度を目安としてお待ちください。


ドメイン名にチェックを入れるのを忘れずに

DNS確定
[確定する]をクリックします。


これでネームサーバーの変更は完了です。

反映されるのを待つ

ネームサーバーの変更が完全に反映されるまでには一定時間必要となります。
数時間~24時間程度を目安としてお待ください。
インターネットの環境により、反映完了まで24時間から72時間程度かかる場合があるようです。


エックスサーバーで独自SSL設定

SSLはSecure Socket Layerの略で、インターネット上で情報を暗号化し送受信できるプロトコルです。
サーバとクライアントPC間で、クレジットカード情報などの機密性の高い情報を安全にやり取りできます。

サイトのURLの冒頭の部分が http:///〜 が https:// になります。
この設定をしておくと、ユーザーがより安全にWebサイトやブログを見ることができるようになります。

サーバーパネルにログイン

ここまでの手続きはエックスサーバーの「Xサーバーアカウント(旧インフォパネル)」で行ってきました。ここからは「サーバーパネル」で行います。

サーバーパネルログイン)

SSL
Xserverアカウントのログインページは青色、
サーバーパネルのログインページはオレンジ色です。

※サーバーパネルのログインは、Xserverアカウントページからもできます。

サーバー管理クリック
Xserverアカウントの [サーバー管理] をクリックしてサーバーパネルを表示することもできます。

SSL設定クリック
[SSL設定]をクリックします。


選択する

先ほど追加した独自ドメインの [選択する] をクリック。


[独自SSL設定追加]をクリック


[追加する]をクリック

[確認画面]へ進むをクリック


SSLの設定が完了しました。

エックスサーバーにWordPressをインストール

いよいよブログ(WordPress)のインストールです。

簡単インストール
[WordPress簡単インストール]をクリックします。


WordPressのインストール先を選びます。


インストールタブクリック

ブログ設定

①インストールURL:ドメイン=ブログのトップページのURLとしたい場合には空欄のままでOKです。sainou.tokyo/blog/というように自由に指定することもできます。

②ブログ名:後から簡単に変更できます。

③ユーザー名:WordPressへのログイン時に必要となります。

④パスワード:パスワードを決めましょう。

⑤メールアドレス:メールがバンバン届くようなことは無いのでご安心ください。


インストールする_03
[インストールする]をクリック


表示されるログインURLなどを控えておこう

インストールが完了すると、ログイン用URLや、データベースパスワード等が表示されます。
赤枠の中の情報を全て控えておきましょう。

WordPressにログインする

管理画面URLにアクセスしてみましょう。

wpログイン画面

ダッシュボード

 WordPressのダッシュボードが開きます。ここから記事を書いたり、デザインテーマをインストールしたり、設定を行ったり、プラグインをインストールしたりします。

URLをhttpsに変えておこう

最後にURLを忘れずにhttps://~に変えておきましょう。
ダッシュボードの左側にあるサイドバーから「設定」をクリックします。

設定をクリック

WordPressアドレス(URL)とサイトアドレス(URL)のhttpの後にsを加えましょう。

入力したら、ページ左下の [変更を保存] をクリックします。


保護されてます_03

URLバーの先頭に、🔓マークが出ていればOKです。
URLバーをクリックするとhttpsになっていると思います。

エックスサーバーでhttp⇒httpsのリダイレクト設定をしておこう

リダイレクトとは

リダイレクトとは

さきほど、SSLの設定をしたのでURLがhttps://に変更されました。
しかしここで、ブログを訪れる人が、もしもhttp://〜でアクセスした場合、ブログが表示されないという結果になってしまいます。
http://でアクセスしてきた人はhttps://〜に転送(リダイレクト)する設定をして、ブログを表示できるようにしましょう。

http⇒httpsのリダイレクトの設定手順

設定はエックスサーバーの「サーバーパネル」から行います。
ログイン情報は、
Emailの「【Xserver】■重要■サーバーアカウント設定完了のお知らせ」
を確認しましょう。

htaccess_03

 次に画面下の方にある「.htaccess編集」をクリックします。


独自ドメインを選択します。


[.htaccess編集]タブを選択します。


 表示される枠内に、リダイレクト用のコードを貼り付けます。

ここで書き間違えをすると、サイトが表示されなくなってしまうこともあります。編集前に枠内の文字列を全てコピーして、メモ帳などに貼り付けておくことをおすすめします。いざというときは、そのコピペから復元をしましょう。

 .htaccessの枠内の先頭に、こちらのコードを貼り付けましょう。↓

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

 貼付けができたら、右下にある「確認画面へ進む」をクリックします。


実行するをクリックしして、.taccess編集を完了します。

自分のブログを見てみよう

ブラウザのURL入力欄に独自ドメインを入力してみましょう。
初期設定のデザインのブログが表示されるはずです。

ついでに、リダイレクト設定もチェックしましょう。
http(sなし)のドメインを入力しても、httpsの方に自動で切り替わと思います。

これで、WordPressのインストールは完了です。
あとは、デザインを変更したり記事を書いたりしていきましょう。

初心者でもテーマでデザインをおしゃれに

WPにはいろんなテーマが用意されています。
BabyMobileは「SANGO(サンゴ)」というテーマを使っています。
有料ですが、とてもわかりやすく、使いやすいのでお勧めします。

参考 【2019年版】おすすめのWordPressテーマ50選:無料と有料まとめて紹介サルワカ

WPテーマSANGOをインストールしよう

コメントを残す