【図解】Xserverのワードプレスインストールはこれで完璧!

Xサーバー ワードプレスインストール エックスサーバー
この記事は約10分で読めます。

メルマガ

Xserverでレンタルサーバーを登録できたら、次はいよいよワードプレスを導入(インストール)していきます。(登録がまだの方はこちらの記事で図解しているのでXserverの登録から進めてください)

この記事で説明する手順をクリアできれば、あなたのブログが完成するのでモチベーションもグッとあがるはず。

ここでは実際の画面をお見せしながら解説していきますので、同じように操作するだけでワードプレスが簡単にインストールできますよ。

細野
細野

わかりにくい用語も、イメージしやすいようにその都度説明していきますので、着実にコツコツと自分のペースで進めてみてくださいね。

Xserverでワードプレスを設定する前に必要なSSLとは?

あなたはブログやサイトを見ている時に、こんな鍵の形をしたマークを見たことがありませんか?

SSL証明書

使用しているブラウザによって多少表示は変わりますが、この鍵マークは「SSL化が完了しているサイト」だという証です。

「SSL」というのは、簡単に言うとブログやサイトとユーザー間での個人情報やクレジットカード情報、ログインに必要なID・パスワードなどのやり取りを暗号化して、盗聴や情報の改ざんを防ぐためのもの。

つまり、この鍵マークは「安全なサイトである」と判断される基準にもなります。

SSL化をしないとどうなるの?

ということはSSLの設定をしっかりしていないと「このブログは危ない!怪しいサイトだ!」と勘違いされてしまうこともあるということですね。

ちなみに、SSL化がされていないブログではこのように表示されます。

SSL未対応のサイト

細野
細野

このように、三角の警告マークに加え「保護されていない通信」と表示されると「このブログ大丈夫かな?」と思ってしまいませんか?

せっかく苦労して設定したブログが怪しいと思われてしまうのは悔しいので、今から一緒にSSL化の設定をキッチリ進めていきましょう。

【図解】XserverのSSL化をやってみよう

まずは、Xserverのトップページからログインしています。

Xserverログイン

登録したメールアドレスとパスワードを入れて「ログイン」をクリックします。

Xサーバーワードプレスインストール

SSL化したいサーバーの右側にある「サーバー管理」を選びます。

Xサーバーワードプレスインストール

ドメインカテゴリーにある「SSL設定」をクリックします。

XサーバーSSL化

SSLを設定するドメインの右側にある「選択する」をクリックします。

XサーバーSSL化

初めて登録したサーバーであったり、現在SSL設定がされているサーバーがなければ、このように表示されます。「独自SSL設定追加」のタブをクリックします。

XサーバーSSL化

対象のドメインとサイトが選択されているかどうかを確認して「確認画面へ進む」をクリックします。

XサーバーSSL化

「CSR情報(SSL証明書申請情報)」はチェックを入れないままでOKです。

CSR情報(SSL証明書申請情報)とは?

「本当にチェックを入れなくてもいいの?」と気になった方もいると思いますので、少しCSR情報についてお話しておきますね。

XサーバーSSL化

CSR情報(SSL証明書申請情報)というのは何なのかというと、認証局と呼ばれるところへ「サーバー証明書を作ってください」と申請するときに入力する情報です。

会社の住所や氏名などのCSR情報を入力すると、証明書にこの情報が組み込まれます。

その情報はブログに来てくれた人にも確認できるようになり、「身元が確かな管理人が運営しているサイトなら安全だろう」と安心してもらえる判断材料にもなります。

XserverでCSR情報の入力は記入しなくてOK

ですが、Xserverでは「Let’s Encrypt」というSSLサーバー証明書が採用されています。

Let’s Encryptは多くのレンタルサーバーで使われていて、有効期限が90日間のSSL証明書を無料で発行してくれる仕組みになっています。

90日間といえば短く感じるかもしれませんが、有効期限は自動更新してくれるので実際は更新の手間をかけなくてもOK。

有料のものと変わらない暗号強度のSSL証明書を提供してもらえるので、XserverのSSL化ではCSR情報を入力しなくても大丈夫です。

SSL設定を追加する

表示された情報を確認したら「追加する」をクリックします。

XサーバーSSL化

少しの間、下記のような文章が表示されますので待ちます。

XサーバーSSL化

SSLの設定が終ると次のような表示がでます。これでエックスサーバーのSSL設定は完了です。

XサーバーSSL化

「SSL設定一覧」をもう一度見てみると、「SSL用アドレス」というところが追加されていますので確認してみてくださいね。

XサーバーSSL化

ちなみに、「反映待ち」という表示も出ていますが、これは時間が経って反映されればちゃんと消えますので気にしなくて大丈夫です。

XサーバーSSL化

しかし、このままではまだSSL化をしていない「http://」のURLでもブログが見れてしまいますので、追加の設定作業も後半にやっていきます。

細野
細野

その前に、まずはサクッとワードプレスをインストールしていきましょう。

【簡単】Xserverにワードプレスをインストールしよう!

サーバー管理画面に戻り「Wordpress簡単インストール」をクリックします。

Xサーバーワードプレスインストール

ワードプレスをインストールするドメインが表示されているか確認して「選択する」をクリックします。

Xサーバーワードプレスインストール

インストール済みのワードプレス一覧が表示されますが、初めての場合はこのような画面になりますので、「WordPressインストール」タブをクリックします。

Xサーバーワードプレスインストール

次のような画面が表示されますので、必要な情報を入力していきます。

Xサーバーワードプレスインストール

まずはサイトURLの部分。「http://」の後に対象のドメインを選びます。その隣は空白のままでOKです。

Xサーバーワードプレスインストール

ブログ名はあとからでも変更可能

次にブログ名をいれる欄がありますので、ブログのタイトルが決まっている方はここに入力してください。

まだ決まっていない場合はあとで変更できますので、あまり時間をかけず「〇〇のブログ」など適当なタイトルを入れて次へ進みましょう。

Xサーバーワードプレスインストール

ユーザー名とパスワードはメモしておこう

次にワードプレスで使うユーザー名とパスワード、メールアドレスを入力します。

Xサーバーワードプレスインストール

このユーザー名とパスワードを使ってワードプレスにログインするのでメモしておきましょう。

また、ワードプレスから連絡がある場合はここに入力したメールアドレスに届きます。

キャッシュ自動削除やデータベースとは?

最後に、キャッシュ自動削除は「ON」のまま、データベースは「自動でデータベースを生成する」のまま「確認画面へ進む」をクリックします。

Xサーバーワードプレスインストール

「キャッシュ自動削除」とは、古いデータを自動で削除するかどうかという意味です。
「データベース」とは、ワードプレスのデータが集まる場所です。
入力した情報を確認したら「インストールする」をクリックします。
Xサーバーワードプレスインストール
一番下に「インストール先ディレクトリ内のindex.htmlが削除されます」と表示されますが、初めてワードプレスをインストールする場合はもともと「index.html」がない状態なので心配しなくて大丈夫ですよ。

ワードプレスのインストール完了!

最後にこの完了画面が表示されればインストール成功です。
Xサーバーワードプレスインストール
繰り返しになりますが、必要な情報はメモしておくことをおすすめします。スクリーンショットを取っておくのもいい方法ですよ。

ワードプレスのURLを変更しよう

前半の手順でサーバーのSSL化は完了しているので、ワードプレスのURLを「https://~」に変更しておきましょう。

まずはワードプレスにログインします。インストールをした時に設定したユーザー名とパスワードを入力して「ログイン」をクリックします。

ワードプレスのSSL化

「ログイン情報を保存する」にチェックを入れておくと、次回ログインする際にユーザー名とパスワードの入力を省略することができます。
ログインするとワードプレスのダッシュボードが開きますので、「設定」をクリックします。

ワードプレスのSSL化

「一般」というメニューが出てくるのでクリックします。

ワードプレスのSSL化

一般設定の画面が開きますので、WordPressアドレス(URL)とサイトアドレス(URL)の「http://」と書かれた部分を「https://」に変更します。

ワードプレスのSSL化

このように「https://~」のURLになります。

ワードプレスのSSL化

右下にある「変更を保存」をクリックします。

ワードプレスのSSL化

一度自動的にログアウトされてしまうので、再度ワードプレスにログインします。

ワードプレスのSSL化

再度ワードプレスにログインすると、ブラウザのURL付近に「鍵マーク」がついていますので確認してください。「設定」→「一般」を開くと、先ほど変更した情報が保存されています。

ワードプレスのSSL化

細野
細野

次の設定で最後です。がんばりましょう!

.htaccessファイルとは?

最後に「.htaccessファイル」というものを編集します。

.htaccessファイルはWebページをリクエスト通りにそのまま表示させるのか、指定したページを表示させるのかなど「どのページを表示させるのか」をコントロールできるファイルです。

 

現段階では、サーバーのSSL化とワードプレスのURL変更は完了していますが、まだ「http://~」と「https://~」のどちらのURLでもアクセスできてしまう状態。

前半でも書きましたが、「http://」のURLにアクセスされてしまうと「保護されていない通信」という表示が出て、ユーザーに「これは怪しいサイトだ」と勘違いされてしまいます。

SSL未対応のサイト

.htaccessファイルは何のために編集するの?

つまり.htaccessを編集することで、同じように「http://」のURLにアクセスされたとしても、自動的に「https://」をユーザーさんに表示できるようにするということです。

このように、アクセスしたURLから指定したURLへ転送することを「リダイレクト」と言います。
また、このファイルは間違った編集をしてしまうと、ワードプレスが開かくなってしまう恐れもありますので慎重に作業してください。

初めての方にとっては「そんなファイルを編集してもいいのかな」「少し怖いな」と思ってしまうかもしれませんが大丈夫です。

この項目はSSL化の最終関門となりますので、一緒にサクッと終わらせてしまいましょう。

細野
細野

ここまでしっかり手順を踏めたあなたなら、落ち着いてやれば簡単な作業なので安心して取り掛かってください。

【図解】.htaccessファイルの編集方法

Xserverの「サーバー管理画面」を開き、「.htaccess編集」をクリックします。

.htaccess設定

先ほどワードプレスをインストールしたドメインを選び「選択する」をクリックします。

.htaccess設定

「この機能は上級者向けの機能です」という注意書きが表示されますが、画像の通りにやれば大丈夫です。「.htaccess編集」のタブをクリックします。

.htaccess設定

現在の.htaccessファイルに書かれているコードが表示されます。

.htaccess設定

間違って編集してしまった場合に備え、メモ帳に元のコードをそのままコピー(Ctrl+C)&貼り付け(Ctrl+V)して保存しておきましょう。

.htaccess設定

もしワードプレスが変になってしまった場合は、メモ帳から元のコードをコピーしてまた元に戻せばいいだけです。

 

Xserverの画面に戻りコードを追加しますが、もともとあったコードは消さないように注意してください。

.htaccess設定

元のコードの上に、

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

という3行のコードを追加します。(↑こちらをドラッグし、コピーして貼り付けてください)

.htaccess設定

貼り付けできたら「確認画面へ進む」をクリックします。

.htaccess設定

「実行する」をクリックします。

.htaccess設定

最後に「http://自分のブログのURL」を開いてみて、出てきた画面が「https://自分のブログのURL」に代わっているかどうかチェックしてみてください。

SSL化 リダイレクト

上の画像の「リダイレクト成功」のように、鍵マークと共に「https://~」のURLで表示されれば設定完了です。

細野
細野

慣れないと大変な作業だったと思いますが、達成感がありますよね。本当におつかれさまでした!これでブログを運営していく基礎が完成しましたよ。

ワードプレスにテーマを設定してみよう!

この後は、ブログの見た目を好きなデザインに変えられる「テーマ」を設定してみてください。

やり方が不安な方は、こちらの記事をみてやってみてくださいね。

【簡単】WordPressにテーマをインストールするやり方
WordPressにテーマをインストールする方法が知りたい この記事ではWordPressにテーマをインストールする方法を解説していきます。 WordPressには最初から利用できるテーマ...

これからあなたの資産になっていくブログですので、大切に育てていきましょう。

コメント

タイトルとURLをコピーしました