完全には保護されていません？WordPressのSSL（https）エラー原因は画像など
日々の作業やお勉強、お疲れさまです！
元社畜ゲーマー姉弟のアネオトです。
ちょっとアドレスバーを見てみてください。
このブログでは、緑色の鍵マークや
「保護された通信（安全な接続）」と出ていると思います。
（表示メッセージはブラウザごとに異なります）
逆に、自分のサイトが『保護されていない通信』
呼ばわりされていると恐怖を感じますよね（笑）
「保護されていないってどういうこと！？」から、
保護（https化＝SSL化）のメリット・デメリットについて、
そしてそのhttps化の設定方法と注意点まで、
ここでご説明します。
今回は『エックスサーバー』×『ワードプレス』における
ブログ設定のお話になりますので、
同じ環境でしたら参考になれば幸いです！
※エックスサーバーをお使いでない場合、
「エックスサーバー側でやること編」だけとばして読んで、
ご自分が使っているサーバーでの設定については
別の詳しい解説サイトを調べてみてください！＞＜
※サーバーによってはSSL化に対応していない場合があります。
もくじ
SSL（https化）って何？いいことあるの？
SSLのカンタンな概要と、導入するメリット
『SSL（Secure Sockets Layer）』とは、
インターネット上で、データを
“暗号化”して扱うという仕組みです。
URLの先頭ってふつう「http://～」ですよね。
これに「セキュリティ」の「s」が増えて
「https://～」になっている状態、
つまり「HTTPS化」している状態が
SSL通信になっているということです。
- 覚えなくてもいい豆知識
-
『SSL』というのは昔の呼び方で、
今ならホントは『TLS（Transport Layer Security）』と呼びます。といってもSSLという言い方のほうが広まっているので、
これからもSSL呼びで使っていってOKです！
メリット１：セキュリティが強化される
『通信を安全に行う』
SSL化の主な目的はコレです！
データが“暗号化”されると先ほどお話しましたね。
名前や住所、クレジットカード情報、
IDやパスワードなどの、重要な個人情報を
暗号化してやりとりしてくれるのです。
暗号化することで、
ハッキングなど悪いことをしようとする
第三者から、データを盗み見られたり、
改ざんされたりすることを防ぐことができます。
ネットで買い物をするときなんかに記入する、
個人情報入力フォームのページは、
必ずURLがhttpsになっている……はずです！
（よっぽど古いサイトでなければ笑）
メリット２：信頼性が上がる
SSLを導入しているページなら、
アドレスバーのURLの左に鍵マークや
『保護された通信』というステータスが表示されます。
「うちは安心して利用できるサイトです！」
と信頼感をアピールできるわけです。
- サイトの安全性についてのステータスは３種類
-
保護された通信
完全にSSL化（https化）できている状態です。
情報、または保護されていない通信
https化していない、httpのページ。
もしくはhttps化しているつもりだけれど、
一部httpファイルが混ざっている……といった
不完全なSSL状態のときにもこの表示になります。保護されていない通信、または危険
危険度の高いページだという警告です。
入力フォームがあるページにも関わらず、
SSL化されていないときなどに見られます。
- おまけ：『avast!』使用時の検索結果画面
-
無料アンチウイルスソフト『avast!』
を使っている場合、グーグル検索結果を見ると、
安全と判断されたサイトにはリンクの横に
緑色の安全マークが表示されます。
しっかりSSL化していても、
avastの評価が間に合っていないと
安全マークが表示されませんが……（苦笑）また、サイト名が長いと表示が隠れてしまう
という特徴がありますが……（笑止）多少はクリック率に影響するので、
ふんわり確認しておくといいかもです！アネオトは正直気にしていないのですが（笑）
メリット３：SEOにちょっと有利になる
SSL化されているサイトは、検索エンジンに評価されます。
「ユーザーが安心して利用できる、優良なコンテンツである！」
と認められ、掲載順位もちょっとヒイキしてくれます。
Googleさんの公式ブログでも、
httpsページを優先することを表明しています！
参考HTTPS ページが優先的にインデックスに登録されるようになります
メリット４：ほぼ全てのブラウザで表示が早くなる
ちょっと聞きなれない言葉かもですが、
『HTTP/2』に対応しているブラウザから
閲覧している場合、httpsページは表示が早くなります。
Safari、Mozilla Firefox、Google Chrome、
Internet Explorer、Microsoft Edge……
といった主要ブラウザの最新バージョンが、
すべて『HTTP/2』に対応しています。
この『HTTP/2』というのは、
いままでの『HTTP/1.1』から進化した、
データのやりとりにムダのない優れた通信形式のことです。
（覚えなくても大丈夫ですｗ）
そして『HTTP/2』による高速化が、
httpsページに対して適用されているのです！
やはり表示がスムーズだと、
お客さんはイライラしなくて済むし、
ページの離脱率（すぐ帰っちゃう確率）が減りますね。
SSLを導入するうえでのデメリット
httpsに対応していないツールや広告は、非表示になってしまう
一応、怖いのはこれですかね……
少し前までは、ニコニコ動画や
各ASPのバナー広告なんかが、HTTPS非対応でした。
https化したページにコードを貼りつけたとき
「広告が表示されない！」
「これじゃアフィリエイトできねえ！」
と困っている方が多かったです。
今ならもう、ASP各社もSSLに対応してくれましたし、
ニコニコの埋め込み動画もきちんと表示されます。
なので、今のところピンポイントで
困っていることはないかな……？
とアネオトは思っているのですが、
何かしらあるかもしれません＞＜
しかし、これからはSSL化の時代なので、
今はhttpsに対応できていないサービスでも、
はやめに対応を進めてくれるはず、です……！
Googleサーチコンソールに再登録が必要
これは既に『Google Search Console（サーチコンソール）』に
あなたのブログを登録していた場合の話です。
サーチコンソールの仕様上、
httpとhttpsは別サイト扱いになっています。
ですので「http～」のURLで登録していたなら、
「https～」のURLで新規登録し直さなければいけません。
また、サーチコンソール内にあるツール
『リンクの否認』を利用している場合は、
否認用テキストファイルの再アップロードも必要です。
ブログ完全SSL化の手順
- こんな流れになります
-
サーバー側で、SSL化設定をする
ワードプレス側で、ブログの基本URLをhttpsにする
ブログに掲載済みのhttpリンクをすべてhttpsに書き直す
これから細かく説明していきますね！
まずエックスサーバー側でやること
『エックスサーバー』にログインして、
自分のブログのSSL化設定をしましょう！
設定できるページの場所はこちらなのですが……
サーバーパネル ＞ SSL設定 ＞ 独自SSL設定の追加
ちょっと複雑で迷子になりやすい構造なので、
スクショでもご案内しますね！
エックスサーバーのトップページの
メインメニュー右側の「ログイン」を触ると
びろ～んとプルダウンが出てきます。
その中の『サーバーパネル』をクリックしてください。
IDとパスワードを入れてログインし、
サーバーパネルの画面に入ると、
右側に「ドメイン」のメニュー一覧があります。
その中の『SSL設定』をクリックしてください。
ドメイン選択画面に入りますので、
所持しているドメイン一覧から、
今回SSL化したいブログのドメイン名を選びます。
SSL設定画面が表示されるので、
『独自SSL設定の追加』タブをクリックします。
そして設定対象ドメインが合っていることを確認し、
『独自SSL設定を追加する（確定）』ボタンを押せば完了！
- ちょっと気になる注意点
-
設定対象ドメイン名には、本来ついてないはずでも
「www」が入っていることがあります。違和感スゴイですが、ここは気にしなくてOK！
「www」つきで問題ありません。
SSL設定がちゃんと反映されるまで
30分～１時間ほどかかります。
即、自分のブログを確認しにいって
さっそくURLを「https」に打ち直してみると、
「保護されていません！危険です！」的な
表示が出てビビると思います（笑）
しばらくは我慢して待ちましょう！
そのあと無事、SSL化完了が確認できたら、
ワードプレス側の作業に入ります。
次にワードプレス側でやること
あなたのWordPressの管理画面にログインして、
一般設定画面へ行ってみましょう！
（左メニュー）設定 ＞ 一般
『WordPressアドレス（URL）』と
『サイトアドレス（URL）』が
「http://～」になっていたら、両方とも
「https://～」に直して、『変更を保存』します！
各ページのパーマリンクや、
記事投稿画面でのプレビュー先のURLが、
今まで「http」でしたがこれ以降は「https」になってくれます！
さてここからがちょっと大変です＞＜
エラーを探して、完全SSL化を完了させるには
面倒だけど、ブログ内のリンクを全部httpsに直そう！
ブログ内にはってある
すべての内部リンク（別記事へのリンク）や
画像のURLを、httpsに書きかえないといけません！
※ワードプレスのプラグインには
記事内の文字列を一括置換できるものもあるので、
手間がかかりそうなら使ってみるといいかも！
記事内だけでなく、メニューやウィジェットに
手動ではりつけたリンクがあればチェックです！
追加CSSやテンプレートをいじっていた場合は
背景画像のURLをhttpで入れてないか確認しましょう！
心当たりのある個所をすべて「https://～」に
変更できたと思ったら、アドレスバーを見てください。
緑の鍵マークが出ていればそのページはSSL化完了です！
情報アイコンのままだったら、どこかにhttpが残っています。
たいてい犯人は画像ファイルです！
- 「どの画像がダメなんだろう～？」てっとりばやく調べる方法
-
ページを開いた状態で、
（Windowsなら）F12を押す
（Macなら）option＋command＋Iを押す
→コンソール（Console）タブを開く
もしくは、ページのどこかで右クリック
→「検証（要素を調査）（要素の検査）」をクリック（※）
→コンソール（Console）タブを開く
の方が覚えやすいかな？
※ブラウザによって表記が異なります。
コンソール画面で「Mixed Content:」という
注意表示があったら、それが犯人です！
英語でちょっとウッてなるかもですが、
「この画像（image）のURLがhttpですよ！」
と指摘してくれているのがわかります。↑この例で発見した２つの画像ファイルは、
どちらもCSSに自分で追加していた背景画像でした（笑）
外部ツールに登録したリンクも忘れずに変更！
あと一息です！！
ブログを既にどこかに登録してしまっていたら、
URLを書き直しておきましょう！
先ほども言ったとおり、
サーチコンソールに既に「http～」で登録していた場合、
「https～」で新規登録することになります。
グーグルアナリティクスの方は、
既に登録している情報のURL変更だけでいけます。
ただ変更箇所が２つあるのでお気をつけください。
まずはGoogleアナリティクスの管理画面にログインします。
左メニューの一番下の歯車マーク ＞ 中央の「プロパティ設定」
プロパティ設定画面に入ると、
「デフォルトのURL」という項目があり、
「http」か「https」か選択できるようになっているので、
「https」に変更してください。
最後にもう１点。
左メニューの一番下の歯車マーク ＞ 右側の「ビュー設定」
さっきとほぼ一緒の似た画面です！
「ウェブサイトのURL」という項目があり、
「http」か「https」か選択できるようになっているので、
これも「https」に変更してください。
これでGoogleアナリティクスでの変更は完了です！
今回はちょっとあっちいったりこっちいったり
ダルい作業でしたよね、お疲れさまでした。
最後まで読んでくださってありがとうございます！
ライフワークの始め方ガイドを準備中！
あなたにとっての趣味のような仕事
略して「趣味ビジネス」を実際に作ろう！
（オープンまで楽しみにお待ちくださいませ）
1件の返信
[…] 完全には保護されていません？WordPressのSSL（https）エラー原因は画像など […]