さくらサーバーでSSL化したのに鍵マークが出ない…混在コンテンツの直し方まで

記事内に商品プロモーションが含まれる場合があります。

※ 本記事は2020年12月の記事をリライトしました。

あなたのサイト、まだ「http://」のままになっていませんか?

以前、さくらレンタルサーバーで運営していた当サイトをリニューアルした際に、無料SSL化の設定を行いました。(現在はエックスサーバーを利用しています)

この記事では、さくらレンタルサーバーでの無料SSL化の設定手順から、SSL化したあとにやっておくべき設定まで、一通りまとめています。新コントロールパネルに対応した内容に整理し直しました。

目次

常時SSL化とは?なぜ必要なの?

サイト全体を暗号化する「常時SSL化」は、いまや当たり前の時代になっています。

暗号化によって、通信データが盗聴から保護されます。ユーザーがウェブサイトを閲覧している間、誰かがそのやり取りを「聞き取る」こと、複数ページにわたる操作を追跡すること、情報を盗むことはいずれも阻止されます。

ウェブサイトの「安全性」は、訪問者を守るための必須条件です。世界標準のセキュリティ技術であるSSL(Secure Sockets Layer)/ TLS(Transport Layer Security)を、しっかり設定しておきましょう。

SSLありとなしの見分け方

■ サイトのアドレスバーを見てください。
「https://~」— http の後に「s」が付いていれば、SSL化されていて保護されたサイトです。

■ SSL化されていないサイトは、アドレスバーに「⚠️ 保護されていない通信」と表示されます。Googleは2018年以降、非SSLサイトに警告を表示するようにしており、訪問者が離脱する原因にもなります。

Chromeのアドレスバーに「保護されていない通信」と表示されている例
「保護されていない通信」をクリックしたときの詳細ポップアップ

さくらレンタルサーバーで無料SSL化する手順

2017年10月以降、さくらレンタルサーバーでは独自ドメインにも無料SSL(Let’s Encrypt)が利用できるようになりました。それでは設定を進めていきましょう。

まず必ずバックアップを取りましょう

作業前に必ずバックアップを取ってください。データベースのバックアップには BackWPup が便利です。万一のトラブルに備えて、必ず実施してください。

※ 利用しているWordPressのバージョン、プラグインの競合、サーバ環境によっては、エラーや不具合が発生する可能性があります。テスト環境で試した上で導入することをお勧めします。SSLの設定については自己責任にて行ってください。

⚠️ ご注意:Facebookのいいねなど、SNSのシェア数が「0」にリセットされます。シェア数を保持したい方は、事前に「SNS Count Cache」などのプラグインを調べておいてください。

さくらコントロールパネルでSSL証明書を登録する

■ さくらレンタルサーバーの新コントロールパネルにログインします。

さくらサーバー 新コントロールパネル

さくらレンタルサーバー新コントロールパネルのトップ画面

■ 左メニューまたはトップ画面から「ドメイン/SSL」をクリックします。

さくらコントロールパネルのドメイン/SSLメニューの場所

■ ドメイン一覧の中からSSL化したいドメインの行を探し、「証明書」列の「登録」をクリックします。

ドメイン一覧から登録ボタンをクリックする画面

※ さくらインターネット提供のドメイン(〇〇.sakura.ne.jpなど)をSSL化したい場合は、下記をご覧ください。
👉 さくらサーバのサブドメイン無料常時SSL化が可能!

■ 「無料SSL証明書」の「無料SSLの設定へ進む」をクリックします。

無料SSLの設定へ進むボタンが表示された画面

■ Let’s Encrypt(無料SSL)の「利用する」をクリックします。

Let's Encrypt「利用する」を選択する画面

■ 無料SSL証明書登録画面が表示されます。Let’s Encryptの利用ポリシーに同意のチェックを入れ、「無料SSLを設定する」ボタンをクリックします。

Let's Encryptポリシー同意チェックと設定ボタン

■ クリックすると「ただいま無料SSL証明書の発行手続き中です」と表示されます。しばらくお待ちください。

無料SSL証明書発行手続き中の画面

■ 秘亭のネタの場合は5分ほどで完了メールが届きました。以前は数時間かかることもありましたが、いまはさくらのシステム改修により概ね10分以内で発行されることがほとんどです。

SSL証明書発行完了メールの例(差出人・件名が分かるもの)

リダイレクト設定(HTTPからHTTPSへ転送する)

証明書を発行しただけでは、サイト全体のSSL化は完了していません。「http://~」で来た訪問者を「https://~」へ転送するリダイレクト設定が必要です。

さくらサーバーをご利用の方は、プラグイン「さくらレンタルサーバ 簡単SSL化プラグイン(SAKURA RS WP SSL)」をインストールするだけで、.htaccessの編集や過去のURL置換を自動で行ってくれます。

■ WordPress管理画面の「プラグイン」→「新規追加」で 「SAKURA RS WP SSL」 を検索してインストールします。

SAKURA RS WP SSLプラグインをWordPressの新規追加画面で検索している様子

■ プラグインを有効化して設定画面を開き、「SSL化を実行する」をクリックします。

SAKURA RS WP SSLプラグインの「SSL化を実行する」ボタン

このプラグインが自動でやってくれること:

  • .htaccess を書き換えてhttpsへ自動リダイレクト
  • サイト内の投稿URLをhttpsに置換
  • WordPressのサイトURLをhttpsに変更
  • wwwあり・なし混在によるリダイレクトループの防止

なお、このプラグインを使う場合、301リダイレクトを別途設定する必要はありません。プラグインが自動で処理してくれます。

WordPressのURL設定を確認する

■ 「ダッシュボード」→「設定」→「一般」を開きます。
「WordPressアドレス(URL)」と「サイトアドレス(URL)」がどちらも https:// になっているか確認してください。

WordPressの一般設定でURLがhttpsになっているか確認する画面

■ メディアライブラリの画像を1枚クリックして、URLが https:// になっていれば画像すべてのURLが変わっているはずです。

■ IPv6アドレスの使用は「利用する」にチェックを入れておきましょう。

ここまで問題なければ基本設定は完了です。鍵マークが消える・画像が表示されないといったトラブルが出た方は、次のセクションへ。

鍵マークが表示されない!混在コンテンツのトラブル対処

「https://」になったのに、鍵マークが消えてしまった…というケースがあります。これは「混在コンテンツ(Mixed Content)」が原因です。

「https://」と「http://」がサイト内に混在しているため、ブラウザが「このサイトは完全に安全ではない」と判断してしまいます。特に画像のURLが残ったままになっていることが多いです。

Search RegexでURLを一括置換する

貼られた全リンクや画像を手動で直すのは現実的ではありません。URLを置換してくれるプラグイン 「Search Regex」 を使います。

■ プラグインをインストールして「ツール」→「Search Regex」をクリックします。

WordPress管理画面「ツール」メニューからSearch Regexを開く画面
◀️ 画像変更:現在のWordPress管理画面「ツール」→「Search Regex」のスクショに差し替え

■ 設定はこのようにします。

  • Search patternhttp://あなたのドメイン(変換前のURL)
  • Replace patternhttps://あなたのドメイン(変換後のURL)
  • Source:まず「Post content」から実行し、必要に応じて「Post meta value」なども対象にする
Search RegexのSearch patternとReplace patternの設定例

⚠️「Replace & Save」の前に必ず「Search」ボタンで対象件数を確認してから実行してください。

それでも鍵マークが消える場合:Chrome DevToolsで特定する

Search Regexを使っても残っているものがある場合、Chrome の DevTools(F12)で特定できます。

■ 問題のあるページを開いて「F12」を押します。
「Console」タブをクリックします。
http:// のまま読み込まれているリソースのURLが赤字で表示されます。

Chrome DevToolsのConsoleタブに Mixed Content エラーが表示されている画面

■ URL部をクリックすると問題の画像が特定できます。私は画像をダウンロードして保存し、メディアから削除→再アップロードする方法で対処しました。

⚠️ 特に疑うべき場所:ヘッダー・背景画像・スライドショーなど「カスタマイズ」から設定した画像http:// のまま残っていることが多いです。「外観」→「カスタマイズ」から確認・変更してください。

おー!できました!!

格闘すること5時間。やっとこさ鍵マークがつきました!

Chromeアドレスバーにhttpsの鍵マークが正常に表示されている成功例

SSL化したあとにやっておくべき設定

SSL化が完了したら、まだやることがあります。URLが「http://」から「https://」に変わったことを、Googleの各ツールに反映させる必要があります。

Google AnalyticsのURLをhttpsに変更する

Googleアナリティクスにはサイトのデフォルトドメインが登録されています。SSL化後は「https://」に変更しておかないと、計測の精度が落ちることがあります。

Google Analytics にログインします。
■「管理」→「プロパティ設定」からデフォルトURLを https:// に変更します。
■ 必ず「保存」してください。

Google AnalyticsでデフォルトURLをhttpsに変更する設定画面
Google Analytics設定の保存ボタン

Google Search ConsoleにHTTPSのURLを登録する

Search Consoleは「http://」と「https://」を別のサイトとして扱います。SSL化後は「https://」のURLを新しくプロパティとして追加する必要があります。

Google Search Console にログインします。
■「プロパティを追加」から https:// のURLを登録します。
■ サイトの所有権確認を済ませたら登録完了です。

Search ConsoleにhttpsのURLを新しく追加するプロパティ追加画面

すでに「http://」でSearch Consoleを設定していた方は、そちらは残したまま「https://」を追加する形で問題ありません。過去のデータを参照したいときに使えます。

無料SSL証明書と有料SSL証明書の違い

「本当に無料の証明書で大丈夫?」という方へ。結論として、個人ブログや中小企業サイトなら無料SSL(DV証明書)で十分です。暗号化の強度は有料・無料で差はありません。

詳しくはさくら公式の解説をご覧ください。
👉 無料SSL証明書と有料SSL証明書の違い(さくらインターネット)

そのほか:補足プラグイン情報

「Broken Link Checker」でリンク切れを確認する方法もあります。また、SNSのシェア数がリセットされた場合は「SNS Count Cache」プラグインで復元できるそうです。

あとがき

さくらレンタルサーバーでの常時SSL化から、完了後にやっておくべき設定まで、一通りの手順をまとめました。

関連URL

10年以上利用したさくらサーバよりエックスサーバに移転させた時の試行錯誤の記録です。

あわせて読みたい
⭐️⭐️初心者の挑戦: さくらサーバーからエックスサーバーへの移行、トラブルだらけだったけれども解決... 「無料の移行代行を頼んだのにほぼ全部自分でやる羽目になった」年末10日間のサーバー移行奮闘記と、FTPエラー・DBエラーの解決記録。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次