こんにちは。銀河(@ginga_noguchi)です。

このマニュアルはWordPressを使ったホームページやブログを開設するのが初めてのあなたに向けて作成しています。前回で無事にWordPressのインストールを完了し、世界で1つだけの自分のドメインによる自分のブログサイトを拝めたはずです。

記事を書いたり、デザインを変えたり、テーマをインストールしたり、色々とやりたいことが出てきているとは思いますが、まだ我慢して今日は「常時SSL接続する設定」をおこないましょう。何度も言いますがWordPressを15年続けて何百サイトも作ってきた僕が「このタイミングでやったほうがいい」と思ってるからここで記事にしているのです。

先のばしにすると後で面倒になりますからね。ということで今回は「エックスサーバーにおける常時SSL接続化する設定方法」をお伝えしていきます。

最強最速のブログ開設手順

作業ステップの目次に戻りたくなったら別記事「WordPressブログの始め方|初心者でも本格サイトを作るためのロードマップ」に全行程を載せてあります。

必須設定のSSL / TLSって何?その違いとは?

難しい話になるので細かく覚えておく必要はありませんが、SSLとは(Secure Sockets Layer)の略でインターネット通信を安全に行うためのセキュリティのことです。インターネットがこんなに普及する前はセキュリティに対する配慮が少なかったから、専門知識のある第三者が覗こうと思えば覗けてしまう状態だったですよね。(現在も安全とは言い切れません)

その後、特にインターネットが普及してきた1995年あたりにセキュリティ強化のために開発されたのがSSL。難しい話すると長くなるからやておきますが、TLSはその後継だと認識してもらえればOKです。

でもTLSよりもSSLの方が馴染みがあるから、今でもhttps化=SSL化と言ってます。つまりSSLとTLSに違いはありません。

とりあえずURLがhttp://ではなく、https://になっていればSSL / TLS化してる状態ってことですね

2018年7月から未設定だと警告が出現する?

2018年7月。グーグルが提供するブラウザ『Google Chrome』の最新バージョンである68からは、常時SSL化されていないすべてのサイトに対し警告を表示するという情報がありました。

執筆時(2018年8月10日時点)は僕も、クロームを最新バージョンにアップデートして色々なサイトを見て回りました。「警告」というとかなり深刻な表示をされるかと思いましたが、SSL化されていないサイトでは以下のように表示されます。

URLの頭に「保護されていない通信」と表示されているのがわかりますよね?

常時SSL接続化されているとこのように「保護された通信」と表示されます。

今までは重要なページだけSSL、これからはサイト全体で常時SSL接続

以前までのSSL設定は、サイト全体でおこなうことは少なかったです。

  • オンラインショップなどのECサイトで、クレジットカード情報を入力するページ
  • 問い合わせフォームなどで個人情報を入力するページ
  • パスワードなどを含むログインページ

など、必要箇所を部分的にSSL化してあれば、サイトのトップページやブログ記事ページなんかは必要なかったんですよね。でもこれからは違います。

サイト自体が文字通り「常時」SSL接続していない限り「保護されていない通信」が表示され続けます。ちなみにSSL化の設定は難しくありません。

ただしページ数が多いとそのぶん手間も増えますブログ開設当初であればページ数が少ないので、可能な限り早めにやっておいた方がいいです。

つまりこれを読んでいる今

常時SSL化するやり方図解(エックスサーバー)

では実際に常時SSL接続するための設定方法を図解していきます。今回の説明もサーバーは僕がメインで使っているエックスサーバーです。

エックスサーバーはSSL化が簡単で無料です。SSLが無料のサーバーは増えてきてはいますが当たり前ではありません。

エックスサーバー以外のレンタルサーバーも比較、検討している人はこのあたりも見比べた方がいいですね。

1. エックスサーバーのサーバーパネルからSSL設定を行う

STEP
エックスサーバーのサーバーパネルにログインし、【SSL設定】をクリック
STEP
ドメイン選択画面でSSL設定を行うドメインの【選択する】をクリック
STEP
SSL設定のページが開くので【独自SSL設定の追加】タブをクリック
STEP
【独自SSL設定を追加する(確定)】をクリック

CSR情報(SSL証明書申請情報)を入力する」のチェックは入れなくてOK。

STEP
SSLの申請が完了

「数分かかる」ということですので少し待ってみてください。

STEP
【SSL設定の一覧】タブをクリック

少し待つと「『設定したドメイン』に独自SSL設定を追加しました。」と表示されますので、そしたら【SSL設定の一覧】タブをクリックします。

STEP
SSL設定されてhttpsとなったURLが表示される

試しにクリックしてページを開いてみましょう。

クロームで「保護されていません」とエラー発生


ところが「この接続はプライバシーが保護されません」とエラーが表示されます。不安になると思いますが大丈夫です。

2. WordPressの管理画面からアドレスをSSL化したhttpsに書き換える

STEP
【設定】→【一般】をクリック

WordPressのダッシュボードにログインしたら左のメニューから【設定】→【一般】を開きます。

STEP
アドレスを両方ともhttps://〜に書き換える
  • WordPress アドレス(URL)
  • サイトアドレス(URL)

ともにhttpの後ろにsを足してhttps://とします。【設定を保存】をクリックすることを忘れないように注意してください。

STEP
「保護されていません」のエラーが解消される


簡単ですよね?ただし、この状態だと

  • httpのサイト
  • httpsのサイト

2つが混在してしてしまっている状態です。

httpの状態でアクセスされることを避けなければなりませんので、次に「リダイレクト」という設定をおこないます。

3. 既存のhttpからSSLのhttpsへアクセスをリダイレクトさせる

リダイレクトとはアクセスされたURLとは別の任意のURLへ自動でアクセスを飛ばす設定のことです。

  • httpでアクセス → 自動でhttpsのサイトに飛ばす
  • リニューアル前のサイトにアクセス → 自動で新サイトへ飛ばす

といったときなどに設定するのが一般的です。聞きなれない名前も出てきますし、設定を間違えるとエラーになるような繊細な作業ではありますが、以下の通りに行えば大丈夫です。

STEP
エックスサーバーのサーバーパネルにログインし【.htaccess編集】をクリック。

「.htaccess」と書いて「エイチティーアクセス」と読みます。

STEP
設定を行うドメインの【選択する】をクリック
STEP
.htaccessの編集ページを開く

この機能は上級者向けの機能です」と警告が出ます。それぐらい慎重な作業だということを心しながら【.htaccess編集】タブをクリック。

STEP
.htaccessの編集画面が開く。

本来なら

  • FTPクライアントアプリからサーバーに接続
  • WordPressが格納されているディレクトリから.htaccessのファイルをダウンロード
  • ダウンロードしたファイルをコードエディタで編集して保存
  • 再びFTPでサーバーにアップロード

という作業が必要なのですが、エックスサーバーであればこのようにブラウザ上から.htaccessを編集できます。

わけわかんないですよね?わざと専門用語入れまくりましたからw

専門知識を持った人が複雑なルートで編集するような繊細な箇所だから、多くのサーバーでは素人がアクセスさえもできないようになってるんです。でもエックスサーバーならアクセスできます。

だからエックスサーバーはおすすめなんですよ。今回の作業はそれぐらいシビアな箇所の編集なのに実際はコピペで終わりです。

コピペで済むとはいえ、余計な場所を触ったらアウトだと言うことは覚えておいください

STEP
.htaccessに以下のコードをコピペ

最初から入っているコードはそのままにしてその下に、以下のコードをコピペして【.htaccessを編集する(確認)】をクリック

これをコピペ

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
STEP
【.htaccessを編集する(確定)】をクリック
STEP
リダイレクトの設定が完了

試しにhttpのURLで自分のサイトにアクセスしてみましょう。

自動的にhttpsに接続されればOKです。

エックスサーバーならSSL化の作業自体は簡単!でも注意は必要

以上でエックスサーバーにおける常時SSL化の設定は完了です。慣れない作業なだけで別に難しくないですよね?

「WordPressは難しい」ってよく言われますが決してそんなことありません。触ってみれば「なんだこんなもんか」ってレベルのものばかりです。

これ読んでもわからないことがあれば、お気軽に聞いてください。それではまた。