45 For Trash

しごうするのか、されるのか。

WordPressでhttps化したサイトを作る(初心者向け)~さくらインターネット 無料SSL Let's Encrypt利用)~

WordPressで新しくサイトを作ることになりました。これまでいくつも作っているのですが、最近はhttps化が必要になってきて今までと違う手順があるため少し戸惑います。いつまで経っても初心者ですね。そこでメモしておきます。

GoogleがhttpだとChromeで警告を出すようになっていますし、httpとhttpsの違いを検索順位の評価に影響させるとアナウンスしているため、サイトを作るなら最初からhttps化はしておきたいところです。

Chromeの警告は現状こんなやつです。

Google Chromeでhttpサイトに対して出る警告の画像

サイトのhttps化のために必要となるSSL証明書はほとんどの場合有料ですが、今回はコストをかけないために無料SSLの「Let's Encrypt」を利用することにします。レンタルサーバーの「さくらインターネット」ではどのプランでも「Let's Encrypt」で無料SSLが利用できますのでこれを使うことを前提にしています。なお、今回は「お名前.com」で取得済のドメインを使います。

f:id:shigo45:20180511114617j:plain
Photo credit: @cdharrison on VisualHunt.com / CC BY

おおまかな手順

この記事では、WordPressをインストールしてhttps化するところまでを説明します。大まかな手順は下記の通りです。

  1. さくらインターネットのサーバーにドメインを追加
  2. ドメインのネームサーバーをお名前.comで変更
  3. さくらインターネットのサーバーでドメインの無料SSLを設定
  4. ドメインのディレクトリを設定
  5. サーバーにデータベースを作成
  6. WordPressのファイルをダウンロード入手
  7. ドメインのディレクトリにWordPressのファイルをアップロード
  8. WordPressのインストール設定
  9. プラグイン「SAKURA RS WP SSL」をインストール・設定
  10. WordPressの一般設定の確認

なお、「さくらインターネット」や「お名前.com」への申込方法などは説明していませんが、各社のサイトに行けば簡単にわかると思います。

「さくらインターネット」はこちら。

「お名前.com」はこちら。

では始めましょう。

さくらインターネットのサーバーにドメインを追加

今回私は、「お名前.com」で取得したものの遊ばせていたドメインを使い、既に使用中の「さくらインターネット」のサーバーにWordPressをインストールします。「さくらインターネット」のサーバー契約プランは「ビジネスプロ」ですが、「スタンダード」以上のプランであればWordPressのインストールも無料SSLの利用も可能です。

まずは「さくらインターネット」にログインします。

さくらインターネットの「会員ログイン」の画像

「契約情報」をクリック。

さくらインターネット会員メニュー「契約情報」ボタンの画像

「契約サービスの確認」をクリック。

さくらインターネット会員メニュー「契約サービスの確認」ボタンの画像

目的のサーバーの「サーバ設定」をクリックしてサーバーコントロールパネルに移動します。

さくらインターネット会員メニュー「サーバー設定」ボタンの画像

「ドメイン/SSL設定」をクリックして開いた画面で「新しいドメインを追加」をクリック。

さくらインターネットサーバーコントロールパネル「ドメイン/SSL設定」「新しいドメインの追加」ボタンの画像

今回は「お名前.com」で取得・管理しているドメインを「さくらインターネット」に移管しないで使いますので、「5. 他社で取得したドメインを移管せずに使う」を選びます。「ドメインの追加へ進む」をクリックします。

さくらインターネットサーバーコントロールパネル「他社で取得したドメインを移管せずに使う」「ドメインの追加へ進む」リンクの画像

開いた画面の「他社で取得した独自ドメインの追加」にドメインを入力して「送信する」をクリック。なお、下にある「ネームサーバ1」「ネームサーバ2」については後で使うのでコピーしておきましょう。

さくらインターネットサーバーコントロールパネル「ドメイン名追加」画面の画像

確認画面が表示されるので確認の上「送信する」をクリック。

さくらインターネットサーバーコントロールパネル「ドメインの追加ー確認」画面の画像

これでサーバーにドメインが追加されました。

ドメインのネームサーバーをお名前.comで変更

次にドメインのネームサーバーを変更します。ネームサーバーの変更は、上記のサーバーへのドメイン追加をした後に行わなければならないことに注意が必要です。

今回のドメインは「お名前.com」で取得・管理しているので、ネームサーバーの変更は「お名前.com」のユーザーページにログインして行います。

お名前.com にアクセスしてページ右上の「お名前.com Navi ログイン」をクリックします。

「お名前.com」トップページのログインリンク画像

「ドメイン設定」タブを開いて「ネームサーバーの設定」内の「ネームサーバーの変更」をクリックします。

「お名前.com Navi」の「ドメイン設定」タブ内「ネームサーバー設定」の「ネームサーバー変更」ボタンの画像

「ネームサーバー変更」画面で、変更したいドメインを選択します(画像に処理を施しているのでわかりにくいですが、右に自分の取得しているドメインが一覧で表示されています)。

「お名前.com Navi」の「ネームサーバー変更」内でのドメイン選択画面の画像

開いた画面の下の方に、ネームサーバー情報を入力する欄があります。「他社のネームサーバーを利用」タブをまず選び、先ほど「さくらインターネット」でサーバーにドメインを追加した際にコピーしておいたネームサーバー情報を入力します。プライマリネームサーバーが「ns1.dns.ne.jp」、セカンダリネームサーバーが「ns2.dns.ne.jp」です。入力したら下の「確認画面へ進む」ボタンをクリックします。

「お名前.com Navi」の「ネームサーバー変更」内でネームサーバー情報を入力する画面の画像

確認画面で「対象ドメイン」「ネームサーバー情報」の両方が正しいことを確認の上、「設定する」ボタンをクリックします。

「お名前.com Navi」の「ネームサーバー変更」内でネームサーバー情報入力後の確認画面画像

これで、ドメインのネームサーバー情報が変更されました。

ただし、ネームサーバーの変更情報がネット上に行き渡るまでに最大で72時間かかると言われています。乱暴にいえば、ネームサーバー情報を変更してもそれが完全に反映されるまでには時間がかかるということです。経験上の体感としては24時間もすれば大丈夫な感じですが、ネームサーバー情報変更後時間が経っていない場合には、ドメインに関する各種の設定(無料SSLの設定など)がうまく行えません。すぐに作業を継続したいところですがここまで作業したら1日程度放置してから作業を再開しましょう慌てて作業をして「うまくいかないなあ…」とあれこれいじっているうちに不要な問題を起こす可能性もあるので注意しましょう。

さくらインターネットのサーバーでドメインの無料SSLを設定

「さくらインターネット」のサーバーにドメインを追加し、ドメインのネームサーバーを「お名前.com」で変更してから1日程度待って作業再開です。次は無料SSLの設定です。これも「さくらインターネット」のサーバーコントロールパネルから行います。

左の「ドメイン/SSL設定」をクリックして開いた画面から、該当するドメインの「SSL」欄にある「証明書」の「登録」というリンクをクリックします。

さくらインターネットサーバーコントロールパネル「ドメイン/SSL設定」画面の画像

開いた画面の「無料SSLの設定へ進む」ボタンをクリックします。

さくらインターネットサーバーコントロールパネル「SSL証明書概要」画面の画像

すると、次のような画面になりますので、「SNI SSL」のラジオボタンをクリックの上、「無料SSLを設定する」ボタンをクリックします。

さくらインターネットサーバーコントロールパネル「無料SSL証明書設定」画面の画像

下の図のように無料SSL証明書の発行には数十分から数時間かかると書かれています。ただ、経験上は何時間もかかるということはない気がします。証明書の取得が完了したら「さくらインターネット」からメールが届きますので、それを確認してから次の作業にうつりましょう。

さくらインターネットサーバーコントロールパネル「無料SSL証明書発行中の案内」画面の画像

「お客様のドメインの名前解決ができないため無料SSL機能をご利用いただけません」などと表示される場合

「さくらインターネット」の無料SSL機能を利用しようとして、「無料SSLの設定へ進む」ボタンを押すと、次のような画面になる場合があります。

お客様のドメインの名前解決ができないため無料SSL機能をご利用いただけません。」という警告が表示されたり、

さくらインターネットサーバーコントロールパネル「お客様のドメインの名前解決ができないため無料SSL機能をご利用いただけません。」画面の画像

お客様のドメインのサーバ設定が利用中のサーバとは異なるIPアドレスに設定されているため、無料SSL機能はご利用いただけません。」という警告が表示されたりします。

さくらインターネットサーバーコントロールパネル「お客様のドメインのサーバ設定が利用中のサーバとは異なるIPアドレスに設定されているため、無料SSL機能はご利用いただけません。」画面の画像

ドメイン追加やネームサーバーの変更に問題がないのにこれらのメッセージが出るのは、ネームサーバー情報を変更してから時間が経っていない場合がほとんどです。実は私、以前さくらの無料SSLを使用した際はこの警告に遭遇しなかったので、今回このメッセージを見た時は「??」となりました。しかし、あれこれいじってもろくなことがないので1日放置して再度トライしてみると問題なく次の画面に移ることができました。

さくらインターネットサーバーコントロールパネル「無料SSL証明書設定」画面の画像

同じような警告メッセージに遭遇した人は、24時間以上時間をおいてから再度トライしてみてください。

ドメインのディレクトリを設定

次にワードプレスをインストールするディレクトリを指定します。「さくらインターネット」のサーバーコントロールパネルの左側のメニューから「ドメイン/SSL設定」をクリックし、ドメインの一覧から設定するドメインの「変更」ボタンをクリックします。

さくらインターネットサーバーコントロールパネル「ドメイン/SSL設定」の「変更」ボタン画像

すると「ドメイン詳細設定」の画面が開きます。そこで「マルチドメインとして使用する(推奨)」のラジオボタンにチェックをし、下の「指定フォルダ」の欄でワードプレスをインストールするディレクトリを指定します。ここで指定した通りに、後ほどFTPクライアントを使ってサーバー内にディレクトリを作成します。

さくらインターネットサーバコントロールパネル「ドメイン詳細設定」画面の画像

サーバーにデータベースを作成

インストールするWordPressで使用するデータベースを作成します。既にあるデータベースを使っても構いません(ただしその場合は「テーブル接頭辞」を既存のものとは別のものに指定することが必要)。

サーバーコントロールパネルの左側のメニューから「データベースの設定」をクリックし、開いた画面から上の「データベースの新規作成」をクリックします。

さくらインターネットサーバコントロールパネル「データベースの新規作成」リンクの画像

次の画面でデータベースを作成します。
①の「データベースバージョン」は選択できる最新バージョンで問題ないでしょう。
②の「データベース名」、③の「接続用パスワード」は任意のものを入力します。
④のデータベース文字コードは「UTF-8」が推奨されています。「UTF-8(UTF8)」と「UTF-8(utf8mb4)」が選択できますが、どちらでも良いと思います。ここでは「UTF-8(utf8mb4)」を選んでいます。 これらの情報はWordPressインストール時に必要になるので、コピーするなりメモするなりで残しておきます。
入力し終わったら、下の「同意する」にチェックを入れてから「データベースを作成する」ボタンをクリックします。

さくらインターネットサーバコントロールパネル「データベースの新規作成」画面の画像

これでデータベースの作成は完了です。

WordPressのファイルをダウンロード入手

WordPress本体のファイルを公式ページからダウンロードします。「日本語―WordPress」のサイトにアクセスし、右上の「WordPressをダウンロード」ボタンをクリックします。

日本語―WordPressサイトの「WordPressをダウンロード」ボタン画像

次のページの「WordPress4.9.5をダウンロード」ボタンをクリックします。WordPressのバージョンは時期によって異なります。

WordPress日本語公式サイトのWordPressダウンロードボタンの画像

ダウンロードしたZIPファイルは解凍しておきます。

ドメインのディレクトリにWordPressのファイルをアップロード

先にドメインの詳細設定で指定したディレクトリをサーバー内に作成し、その中にWordPressのファイルをアップロードします。

FTPクライアントを使用してサーバーにアクセスします。ここではFFFTPというFTPクライアントを使っています。FTPクライアントの使い方はここでは説明しません。サーバーへのアクセスにはサーバー名、アカウント名、接続パスワードなどの情報が必要です(FFFTPの使い方はこちら→FFFTPを利用する – さくらのサポート情報)。

サーバーの中にドメインの詳細設定で指定したディレクトリ(フォルダ)を作成して開きます。そこに先ほど解凍したWordPressのファイルをすべてアップロードします。回線の速さによりますが、すべてのファイルをアップロードするには数分から数十分かかるでしょう。

FFFTPでWordPressのファイルをすべてアップロードしている画像

WordPressのインストール設定

WordPressファイルのアップロード完了後、今回使用するドメインにブラウザでアクセスすると次のような画面になります。

WordPressファイルアップロード後にブラウザでアクセスすると表示される「さあ始めましょう」ボタンの画像

下の「さあ始めましょう」ボタンをクリックするとWordPressで使用するデータベースに関する情報を入力する下のような画面になります。ここには先ほどデータベースの新規作成で入力した情報を入れていきます。

WordPressインストール時のデータベース接続設定画面の画像

①の「データベース名」はデータベースの新規作成の②で入力したものをそのまま入力します。
②の「ユーザー名」は、データベース新規作成時に表示されていたユーザー名で初期アカウント名です。
③の「パスワード」はデータベースの新規作成で入力した③の「接続用パスワード」を入力します。
④の「データベースのホスト名」は、さくらインターネットのサーバーコントロールパネル「データベースの設定」から見ることができます。さくらのデータベース名はだいたい「mysql○○○.db.sakura.ne.jp」(○は数字)になっているはずです。これを入力します。

さくらインターネットサーバコントロールパネルから確認するデータベースホスト名の画像

⑤にはインストールするデータベースで使用するテーブル接頭辞を入力します。

wp_

が使われることが多いようですが、同じデータベースに複数のWordPressをインストールする可能性がある場合は、重複しないようにしなければなりません。

example_ 

のように任意のものを設定しても良いでしょう。

これらを入力したら、下の「送信」ボタンをクリックします。問題がなければ下のような画面に移ります。「インストール実行」ボタンをクリックします。

WordPressインストール時のデータベース設定完了後の画面画像

すると、サイト名・ユーザー名・パスワードなどを設定する画面に移ります。これは今後WordPressユーザーとしてダッシュボードにアクセスする際に入力が必要になる情報です。

WordPressインストール時のサイト名・ユーザー名・パスワードなどを設定する画面の画像

「検索エンジンでの表示」はとりあえずGoogleなどにインデックスされたくない場合はチェックを入れておきましょう。ここに入力した内容は後ほど必要になるのでコピーかメモ。入力完了したら下の「WordPressをインストール」ボタンをクリックします。問題なければ次の画面になります。下の「ログイン」ボタンを押してダッシュボードにアクセスしましょう。

WordPressインストール成功の画面画像

先ほど設定したユーザー名とパスワードを入力してログインします。

WordPressのユーザーログイン画面

プラグイン「SAKURA RS WP SSL」のインストール・設定

ここまで来たら、「https://ドメイン名」でサイトにアクセスできるようになっているはずですが、SSLを利用しているのでもう1つ作業が必要です。「http://ドメイン名」でのアクセスを「https://ドメイン名」にリダイレクトするように設定する必要があります。これは「.htaccess」というファイルを編集して行いますが、「さくらインターネット」の無料SSLを利用している場合には、WordPressのプラグインを利用すれば「.htaccess」の編集を行わずに簡単に設定が行えます。

ダッシュボード左側のメニューから「プラグイン→新規追加」をクリックします。

WordPressダッシュボード「プラグイン→新規追加」を選択している画面の画像

プラグインの検索窓で「SAKURA RS WP SSL」と入力し検索します。このプラグインは「さくらインターネット」がWordPressプラグインの公式ディレクトリから提供しているものです。

検索結果で「さくらのレンタルサーバ 簡単SSL化プラグイン」が出てきたら「今すぐインストール」ボタンをクリックします。

プラグイン検 索結果で「さくらのレンタルサーバ 簡単SSL化プラグイン」が表示されている画面の画像

プラグインのインストールが完了したら、次はプラグインの設定です。

ダッシュボード左側から「設定→SAKURA RS SSL」を選択します。

WordPressダッシュボードの「設定→ SAKURA RS SSL」を選択している画面の画像

次のような画面になります。3カ所チェックするところがあります。

WordPressダッシュボード「さくらレンタルサーバ 簡単SSL化プラグイン」設定画面の画像

まず「共有SSLを利用している、もしくはSSL証明書をレンタルサーバコントロールパネルから設定した」にチェック。

次の「利用しているSSL証明書の種類を選択してください」の項目は「SNI SSL/共有SSL」の方を選択します。

最後に「実際にSSLを利用してサイトと管理画面にアクセスできる」の項目は、下に表示されている2つのリンクを実際にクリックしてみてアクセスできるかどうかを確認してからチェックします。

3カ所すべてにチェックをしたら一番下の「SSL化を実行する」ボタンをクリックしてプラグインの設定は終了です。

WordPressの一般設定の確認

最後にWordPressの一般設定を確認してみましょう。ダッシュボード左側の「設定→一般」をクリックします。

「WordPressアドレス(URL)」と「サイトアドレス(URL)」は基本的に同じアドレスになりますが、これらが「https://ドメイン名」になっているか一応確認しておきます。

WordPressダッシュボード一般設定画面の画像

さくらインターネットの無料SSL Let's Encryptは気軽に利用できる

これでWordPressでhttps化したサイトができました。サイトにアクセスすると下のように表示されるはずです(Google Chromeの場合)。

https化したWordPressサイトにアクセスした場合のGoogle Chrome アドレスバーの表示画像

「http://ドメイン名」でアクセスしても「https://ドメイン名」にリダイレクトされます。

無料SSLのLet's Encryptを使用すれば、費用をかけることなくhttps化したWordPressサイトを作成できます。Let's Encryptを利用できるレンタルサーバーは「さくらインターネット」に限りませんので、ほかのレンタルサーバーを探してみても良いでしょう。

私はもう10年近く「さくらインターネット」を利用しており、スタンダードやビジネスプロのプランなど複数契約していますが、これまで大きな問題が生じたことはありません。プラグインの提供などLet's Encryptを気軽に利用できるようになったタイミングも、Googleがhttps化に関するアナウンスを強めてきた時期と重なっていて、痒いところに手が届くと感じました。

「お名前.com」で安いドメインを取得して、「さくらインターネット」でサーバーをレンタルしてWordPressをインストールするなら、この記事に書いたような簡単な手順で費用をかけずにhttps化したサイトを作成できます。

WordPressでのサイト作成は、カスタマイズの自由度が非常に高く、思いついたことのほとんどは実現できます。コストもドメイン代が年間2000円程度(ドメインによる)、サーバーレンタル代が月額500円程度(プランによる)です。ただし、サイト開設当初のアクセス獲得は別途課題になります。

このブログは「はてなブログPRO」を利用していますが、独自ドメインを利用している場合のhttps化についてははてな側がまだ対応していません(もうすぐ対応らしい…)。すでにある画像やら広告やらを考えるとhttps対応になっても面倒な作業は回避できそうにありませんが仕方ありません。私自身ははてなブログを利用しているメリットをそれなりに享受してきたと思っているからです。ただ、単なるブログではないサイトを作ろうと思ったらやっぱりWordPressが第1候補にあがります。

今回のサイトはまだ使用するテーマも決めておらずこれからちょびちょびと作業する予定ですが、何かあればまた記事にしたいと思います。


This is a post from 45 For Trash

POLICY :1. このサイトへのリンクは自由です。 2. できるだけ誤りのないように書いているつもりですが、当サイトに掲載する情報の正確性は保証できません。また掲載している情報は執筆日現在の情報です。 3. 当サイト、当サイトリンク先、広告リンク先の利用によって生じたいかなる損害についても一切の責任を負いません。 4. 当サイトはGoogleアドセンス、Amazonアソシエイト、その他アフィリエイトの広告を掲載している場合があります。 5. 当サイトご利用の場合は上記の事項に同意したものとみなします。