常時SSL化の設定をしたのに「保護された通信」が表示されない時はパスにHTTPが残っているのかも?

最近このブログを常時SSL化したのですが、ある程度設定を終えてHTTPSでアクセスしてみたのですが「保護された通信」が表示されなくて困ってましたが物凄く初歩的な事を忘れていました。
そもそも常時SSLとは?
SSL(Secure Sockets Layer)は、ネット上のデータの通信を暗号化して、データの盗聴や改ざんを防ぐ仕組みの事です。(特徴として、SSL化したページのURLはhttps://〜〜になります)
よく、ネットで買い物を行ったりする時に「アドレスバーに緑の鍵アイコンが付いてるのを確認してから情報を入力するようにしましょう」という話をよく聞きますよね。あの緑の鍵アイコンが付いているのが、SSLを導入しているページです。もし、SSLを導入していないページで買い物をしたり情報を入力して送信してしまうと、そのサイトの運営者に悪意は無くとも、悪意ある第三者によって情報を抜き取られたり、改ざんされてしまうのです。
今までは何か情報を入力するページのみSSL化するのが一般的だったのですが、最近は全てのページをSSL化する動きがあり、これを「常時SSL化」と言います。何も情報を入力しないならSSLにする必要無いんじゃないの?と思うかもしれませんが、全てのページをSSLにする事でCookieへの不正アクセスを防止する事ができます。
また、GoogleがHTTPSページ(SSL化したページ)を優先的にインデックスに追加すると公式に発表した事によって更に注目されました。やはりGoogleとしても安全なページをユーザーに利用して欲しいんですよね。
サイト内にHTTPのパスが残っていると駄目
さて、SSLの手続きを済ませたのにhttpsで接続しても「このサイトへの接続は完全には保護されていません」と表示されてしまいました。
いわゆる緑色の鍵アイコンが表示されていなかったのです。

ふと、Chromeのディベロッパーツールを開いてみるとコンソールにメッセージが来ていました。

どうやらページ内の画像パスが「HTTP」のままだというのです。という事でこの画像パスを「HTTPS」に置き換えていきます。
Search Regexで一括置換
僕が利用しているCMSはWordPressなので、「Search Regex」というWordPressプラグインを使用しました。このプラグインは記事の本文やコメントの内容を一括で置換する事ができるので画像やリンクのパスを一気に変更してしまうというわけです。
新規プラグインから検索するか、上記リンクからダウンロードしてサーバーにアップして、SearchRegexをインストールしましょう。
インストールし終わったら、WordPressの[ツール]内に[Search Regex]という項目が増えているので、クリックします。
(このプラグインで一度置換してしまうと元に戻す事が出来なくなるので、作業する前にバックアップを必ず取るようにしておきましょう。)

SearchRegexのページが開くので、それぞれ設定していきましょう。
| Source | どの部分から文字の検索を行うのか。デフォルトは「Post content(記事本文)」 |
|---|---|
| Limit to | 一度に置換する上限。デフォルトは「No limit(上限なし)」 |
| Order By | 検索した文字列の並べ替えの方法。Ascending(昇順)かDescending(降順)で選ぶ事ができる。 |
| Search pattern | 検索する文字列 |
| Replace pattern | 置換する文字列 |
ちなみに検索する文字列は「http://」だけにしてしまうと外部リンク等も全て取得してしまうので自分のサイトのリンクを入力するようにしましょう。

「Search」を押すと「Search pattern」に入力した文字列を探してリスト表示してくれます。
「Replace」を押すと、置き換えた際にどのようになるのかリスト表示してくれます。このボタンを押しても置換されるわけでは無いので注意が必要です。
「Replace & Save」を押すと特に何か表示されるわけではありませんが、置換が実行されます。
その他のロゴ等は手動で変更
その他の細かいロゴのパスやヘッダー画像は自分でさっと変更ます。Chromeにどの画像パスがHTTPのままなのか表示されるのでそれを見ながら変更していきました。
全てパスが変更し終わった頃にはちゃんと「保護された通信」になりました。



CSS疑似要素(::beforeや::after)のcontent内で改行したり半角スペースを複数入力する方法
WordPressで「現在メンテナンス中のため、しばらくの間ご利用いただけません。」の状態でログインできなくなった場合の対処法
iOS Safariで文章の最後の1文字だけ改行されてしまう現象の対処法
コードスニペットの管理方法や命名規則について
Visual Studio Codeで読み込んだCSSで設定されているclass名の入力補完をしてくれる拡張機能「HTML CSS Support」
Movable Typeでコメントアウトして出力時に無視する方法
CSSの読み込みで「its MIME type (‘text/html’) is not a supported stylesheet MIME type」エラーが表示されて読み込みができない場合の解決方法
Local by Flywheelの「Starting Local Machine…」画面から進まないときに試すこと
gulpでPostCSSを使う方法
JavaScriptで簡単にCookie操作ができるライブラリ「js-cookie」
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
AirPodsで片耳を外しても再生が止まらないようにする方法
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
1つのノートアプリにすべて集約するのをやめた理由|2025年時点のノートアプリの使い分け
Notionログイン時の「マジックリンク」「ログインコード」をやめて普通のパスワードを使う
AlfredでNotion内の検索ができるようになるワークフロー「Notion Search」
Gitで1行しか変更していないはずのに全行変更した判定になってしまう
Macでアプリごとに音量を調節できるアプリ「Background Music」
Macのターミナルでパスワード付きのZIPファイルを作成する方法
MacBook Proでディスプレイのサイズ調整をして作業スペースを広げる
SteerMouseの「自動移動」機能で保存ダイアログが表示されたら自動でデフォルトボタンへカーソルを移動させる
iPhoneでタッチが一切効かなくなった場合に強制再起動する方法