本記事は常時SSL化作業手順の解説です（エックスサーバー環境）。
私がSSL化作業を行った際に引っ掛かったポイントなども解説していますので、
是非参考にして頂ければと思います。
先にざっくり手順を示すと以下の通りとなります。
| no. | 作業場所 | 作業内容 | 備考 |
|---|---|---|---|
| 1 | サーバー | ウェブサイトSSL化設定 | 新規の場合WordPressインストールも実施 |
| 2 | WordPress管理画面 | URL書き換え （http⇒https） | WP管理画面⇒ 設定⇒一般設定 |
| 3 | WordPress管理画面 | プラグインを使用して画像やリンクをhttp⇒httpsへ一括変換 | 新規の場合、この作業は不要 |
| 4 | サーバー | htaccessファイルにリダイレクト用コード追加 | 要FTPソフト |
| 5 | 仕上げ（PC上） | サイトをブラウザ上で確認し、不具合を修正 | ブラウザのデベロッパーツールを使用 |
…見ると難しいと思うかもしれませんが、
実際にやってみるとそんなに難しい作業はないのでご安心下さい。
因みに私は運営している全てのサイトをSSL化していますが、
若干トラブったのは最初（運営中のサイトをSSL化した）のみです。
エックスサーバーでいうサーバーパネルへのアクセスやちょっとした作業は、
ウェブサイトを運営していればちょこちょこ発生します。
この作業を良い機会として、サーバー上での作業にも慣れて貰えればと思います。
新規サイトのSSL化作業を行う場合は、以下手順で作業して下さい。
①以下手順に従い、まずウェブサイトをSSL化してしまう
②SSL化が完了した後でGoogle Analytics／Search Consoleの登録を行う
※SSL化したURLでAnalyticsやSearch Consoleの登録が必要なため
目次
作業1：ウェブサイトSSL化設定
この作業は、本記事執筆時点ではあって無いようなものです（朗報）。
2017年10月25日以降にエックスサーバーで新たにウェブサイトを立ち上げる方は、
サーバー上でのSSL化作業は実質無くなりました。
具体的にはドメイン設定の際にサーバーパネルにログインしますが、
ドメイン設定画面のチェックボタンにチェックが入っていることを確認するだけです。
恐らく、mixhostがほぼ同じ手順で簡単にSSL化出来るのでエックスサーバーも対抗策を取ったのでしょう。
いずれにせよ、ユーザーに取っては嬉しい改良ですね。
SSL化をはじめると、数時間はアクセス出来なくなります。
私が初めてSSL化した時は、ブラウザにこんな表示が出て怯えた記憶があります(笑)。
SSL化が終わるまではしばし待ちの時間になりますので、
寝る前や1~2時間別なことをしたいときなどを狙って作業することをお勧めします。
作業2：WordPressの管理画面からURLを変更する
【注意】この手順は、確実に行って下さい。
…と言っても全く難しくありませんのでご心配なく(笑)
手順
WordPressの管理画面から、設定⇒一般と進みます。
すると、①WordPressアドレス (URL) ②サイトアドレス (URL)
という欄があり、URLが記載されているはずです（下図参照下さい）。
このURLをhttpからhttpsに修正するだけです。…簡単ですよね(笑)
修正が終わったら「変更を保存」ボタンをクリックしてこの作業は終了です。
作業3：プラグイン「Search Regex」でURLを一括変換する（既存サイトのみ）
◎本作業は、既存サイトをSSL化する際の手順となります。
新規サイトをSSL化する場合には、次の作業4に進んで下さい。
新規ウェブサイトをSSL化する場合、次に行う「.htaccess」ファイルの編集でほぼSSL化が完了します。
しかし、運営中のウェブサイトは使用している画像やリンクがhttpのままになっているため、
今まで説明してきた作業だけではSSL化出来ないケースがほとんどです。
その対策として、ウェブサイト内の画像やリンクをhttpsに変換する作業を行う必要があります。
ただ、そんなに悲観する必要はありません。
「Search Regex」というプラグインを使えばhttp⇒httpsに一括置換出来るからです。
…時間は結構掛かりますが。
「Search Regex」をお勧めする理由は、
「作業が終わったら停止／削除してOK」ということ。
この1点に尽きます。
なお、mixhostでは「Really Simple SSL」というプラグインを使ったSSL化を推奨しています。
「Really Simple SSL」は「.htaccess」の編集や後述するhttp⇒httpsへのURL一括置換など、
SSL化作業のほぼ全てを自動的に行ってくれる便利なプラグインです。
しかし、「Really Simple SSL」を使ってSSL化すると大きな問題が1つ発生します。
それは…
プラグインは極力使わない方がウェブサイト高速化にも効果的です。
ですので、私は用が済んだら停止／削除が可能な「Search Regex」による一括変換を推奨します。
手順
手順は以下の通りです。難しい内容ではありません。
①「Search Regex」をインストール
②「Search Regex」を有効化し、http⇒httpsへ変換する候補を検索して貰う
③変換候補を確認し、問題がないか確認する
④変換処理を実行⇒終了
キャプチャーを取っていないのと、既に「Search Regex」を削除しているため、
申し訳ないですが本作業はこれ以上詳しい説明は出来ません。
詳細を確認したい場合は、寝ログのわいひらさんが書いた以下記事をご覧下さい。
私は初めてSSL化を行った際、この記事を手順書にして作業を行いました。
WordPressをhttpからhttpsにSSL化した全手順まとめ（エックスサーバー環境）
作業4：サーバー上で「.htaccess」ファイルを編集する
本作業に失敗すると、画面真っ白orエラーとなりWordPressが正常動作しなくなります。
ですので、万が一に備え必ずバックアップを取得してから作業するようにして下さい。
また、サーバーへのアップロードに備え、FTPソフトも準備しておきましょう。
手順
作業手順ですが、以下の通りとなります。
①FTPソフトでサーバーにアクセス
②編集前の「.htaccess」をダウンロード（バックアップ用）
③サーバーパネルにログイン
④「.htaccess編集」ボタンをクリック
⑤編集するドメインの「選択する」リンクをクリック
⑥「.htaccessを編集」タブをクリック
⑦リダイレクトコードをファイルにコピペ
⑧「.htaccessを編集（確定）」ボタンをクリック
・ダウンロードしたファイルをコピーしてバックアップ用と上書き用に分ける
・上書き用ファイルにテキストエディタでリダイレクトコードを追記する
・FTPソフトでアップロードする
上書きするリダイレクトコードは以下の通りです。
「.htaccess」ファイルの先頭にコピペすればOK。
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
いずれにせよ、「.htaccess」ファイルのバックアップさえ取っておけば仮に失敗しても元に戻せます。
安心して作業して下さい。
作業5：ブラウザ上でサイトを確認する
「.htaccess」ファイルの更新作業が終わったら、
一度ブラウザ上でウェブサイトを確認してみましょう。
新規立ち上げの場合は、ここまで来ればアドレスバーが鍵マークに変わっているはずです。
…古いテーマを使っている場合はダメかもしれませんが。
事前準備編で説明した通り、目指すゴールは以下の通りです。
①アドレスバー左に緑色の鍵アイコンが表示される
②アドレスバー右側にエラー表示がされていない
・アドレスバー左に灰色の鍵アイコンが表示される
①アドレスバー左に緑色の鍵アイコンが表示される
②アドレスバー左の「ⓘ」アイコンをクリックしてエラーメッセージが表示されないこと
あなたのサイトが上記の状態になっていれば…
お疲れ様でした！SSL化作業は終了です。
Google AnalyticsとSearch Consoleの設定（修正or登録）を行って下さい。
但し、上記の状態になっていなければ…
これから説明する作業でエラーを解消していく必要があります。
作業6：デベロッパーツールでエラーを特定・解消する
さて、いよいよ最後の作業となります。
この作業が一番の難関なのですが。。。
今まで説明してきた作業を実施したにもかかわらず、エラーが出ている…
この原因は大きく2つあって、
①外部リンク（SNSやRSS、アフィリエイトリンク等）に問題がある
②WordPressテーマそのものに問題がある
上記2つが主な原因となります。
これらのエラーを確認・解消する為に使うのが、
ブラウザの「デベロッパーツール（開発者ツール）」です。
因みにChromeは全部英語です…
英語が不得意な人はひと手間増えますが、翻訳して内容を確認しましょう。。。
デベロッパーツールの使い方と確認方法
メッセージが全て英語なのは痛いですが、使い方は簡単ですのでご安心下さい。
確認したいサイトを表示させてPCの「F12」キーを押すだけです。
すると、こういう画面が出てきます（以下はGoogle Chromeの例）。
ここで、「Security」タブを開くとサイトのセキュリティ状態を見ることが出来ます。
上記画像はSSL化が完了している状態です。
反対にエラーが出ている場合はどうするか？というと、
まず、デベロッパーツールの「Console」タブを開きます。
そうすると、以下画像のようにエラーとなっている個所が表示されます。
エラーメッセージをコピペして翻訳してみると、以下の通りとなります。
このようにエラーメッセージを確認し、１つずつ対処していく必要があります。
参考まで、私がSSL化を実施した中で具体的に引っ掛かった個所は以下4点です。
①Feedly購読ボタン設置コードがhttpになっていた（ウィジェット）
②SNSボタンの設置コードがhttpになっていた（テーマそのもの）
③アフィリエイトリンクがhttpになっていた（本文、ウィジェット）
④jQuery呼び出しURLがhttpだった（テーマそのもの）
エラー解消法について
エラーが発生している箇所を特定出来たら、以下手順を実施して下さい。
これで殆どの場合クリア出来ると思います。
一部のアフィリエイトリンクがhttpsに対応していないという話を聞きますが、
そのアフィリエイトリンクを外さない場合でもhttpsにURLを変えて問題ない箇所は、
今のうちに全てSSL化しておくことをお勧めします。
因みに、何度か書いている
・アドレスバー左側には鍵アイコンが表示されている
・しかし、アドレスバー右にエラーが出ている
というケースですが、
具体的にはアドレスバーの右端にこのような怪しいアイコンが出ます。
（画像はGoogle Chrome）
このアイコンをクリックすると画像に記載のある通り
という警告が出ます。
これをうっかりクリックしてしまうと、
SSL化どころか「保護されていません」と警告が出るので要注意です。
絶対にクリックせず、エラーを消し込むようにして下さい。
もっと詳しく知りたい、と思ったら以下記事をご覧下さい。
【対処法】「安全でないスクリプトを読み込む」をクリックしたらhttps化されなくなった
SSL化の作業手順の説明は以上です。
無事、SSL化出来たでしょうか？
日に日にSSL化されたサイトが増えている様に思います。
既存サイトの場合は結構手間が掛かりますが、今からコツコツと準備を進めておくべきです。
WordPressに詳しい方ならまだしも、ある日急に思い立って出来る作業ではありませんので。
余裕を持って対応しておくことが、後々吉と出ると思っています。
追伸：既存サイトの場合はもう少し後始末がある
結構な長文となってきたので一旦ここで締めますが、
既存サイトの場合は作業後にGoogle AnalyticsやSearch Consoleの設定変更も必要となります。
これらのツールの設定変更については別途投稿します。
Google Analytics：以下の記事に設定変更内容を追記しました。
Google Search Console：再現不可だったので、以下記事を手順書として設定変更して下さい。
サイトのHTTPS化で必要となるGoogleサーチコンソールの再登録方法
次回投稿でお会いしましょう。
それでは。
【ウェブサイト常時SSL化 関連記事】
【UX関連記事】
