僕は自分のブログ「DIGIROMA」の運営には「さくらインターネット（以下さくら）」のサーバーを借りて運営しているのですが、そのさくらが本日から無料SSLサーバー証明書「Let’s Encrypt」のサービスを開始したので「乗るしかない！このビッグウェーブに！」ということで、早速ブログをSSL化してみました。
SSL化は非常に簡単！
SSL化というと一昔前ならお金がかかるというイメージが大きく、ただでさえサーバー代や独自ドメイン代でお金を使うというのにさらにSSLの料金を取られるのはなぁ…という感じでした。が、今回さくらの開始したLet’s Encryptは無料で、設定も簡単でした。
参考：さくらサーバの設定
サーバーの設定は上記さくらのヘルプページに書かれている通りの方法でおこないました。大雑把に書くとコントロールパネルのドメイン一覧から使っているドメインの証明書登録を申請するだけ。10分くらいで設定完了のメールが届きました。その後ブログにログインし、WordPressにさくら独自の「常時SSL化プラグイン」をインストールします。
これはさくらのレンタルサーバーで稼働しているWordPressのみに効果が出るプラグインですので、他のサーバーで稼働しているWordPressには意味がありません。
ともかくこれを「常時SSL化プラグインの使い方」に書かれている通り設定すると（ただチェックマークを入れるだけなので簡単です）、これまでhttpだったページがhttpsになり、画像のアドレスがhttpsに自動的に置き換えられます。また記事中の画像アドレス指定がhttp〜であっても通常通り表示されますので、わざわざ過去記事の再編集をする必要はありません。すべて自動的に進み、設定自体はすぐ終わりました。
SSL化設定終了！しかし鍵アイコンが表示されない！？
というわけで設定自体はすぐ終わったのですが、問題が起こりました。それは、ブログのトップページアドレスにSSL化の鍵アイコンが表示されないということです。アドレスには「https」と表示されても、「！」アイコンが出るだけで鍵アイコンが出ないんですね。「設定にミスがあったのか？」と焦ったのですが、WordPressのログイン画面では鍵アイコンが表示されていました。つまり部分的にはSSL化が成功しているわけです。
「この違いはなんだろう？」と、「SSL化 鍵アイコンが出ない」で検索してみたら、「画像の読み込みがhttpsパスで読み込まれているのではなく、httpパスで読み込まれているためSSL判定がなされず鍵アイコンが表示されないケースが多い」、という問題が指摘されていました。
そこで改めてWordPressにログインして画像のライブラリを確認してみましたが、先ほどのさくらのプラグインで画像アドレスはhttps〜に置き換えられており、画像自体には問題はなさそうなんです。そこでブラウザ「Chrome」の「Console機能」を使って、どこに問題があるのか調べてみることにしました。
Console機能
Chromeの「Console機能」は、ブラウザ上部のメニューバーから「表示>開発/管理>デベロッパーツール」の順にクリックすることで起動させることができます。
問題発生中の画像じゃなくてアレなのですが、もしSSL化に対応していない問題がある部分は、その問題箇所がConsoleタブの空白欄に表示されます。僕の場合ですと、ブログの左上に表示させているロゴ画像がhttpの絶対パスで呼び出されており、それが原因で完全にSSL化していないと判定されていることが分かりました。
修正方
修正は簡単で、テンプレートのカスタマイズ画面で改めてロゴ画像を指定してやるだけでした。僕はWordPressのテンプレートにOPENCAGEさんの「アルバトロス」を使っているのですが、どうやらサーバーとWordPressの設定変更のほかにテンプレートの方でも設定変更を行う必要があったんですね。これは盲点でした。
一時はなぜ鍵アイコンが出ないのか焦りもしましたが、こうして無事PCのブラウザ上で鍵アイコンが表示されるようになりました。
またiOSのSafari上でもちゃんと鍵アイコンが表示されているのを確認、ホッとしました。工事、完了です…。
僕と同じようにSSL化したのになぜか鍵アイコンが出ないという人は、ChromeのConsole機能で何が問題か調べてみること、そしてテンプレート側でブログのロゴなどなんらかの画像を設定している場合は改めて設定し直してみる、といったところから確認してみてください。こんな簡単にSSL化できて、なんかちょっとした感動です！
最近のコメント