完全には保護されていません?WordPressのSSL(https)エラー原因は画像など

Pocket

ワードプレスのブログをHTTPS化して、SSL化しよう!

 

 

日々の作業やお勉強、お疲れさまです!

元社畜ゲーマー姉弟のアネオトです。

 

 

ちょっとアドレスバーを見てみてください。

 

SSL化していて、保護された通信と表示が出た状態

 

 

このブログでは、icon-lock緑色の鍵マークや
「保護された通信(安全な接続)」
と出ていると思います。

(表示メッセージはブラウザごとに異なります)

 

 

 

逆に、自分のサイトが『保護されていない通信』
呼ばわりされていると恐怖を感じますよね(笑)

 

SSL化できていなくて、このサイトへの接続は完全には保護されていませんと表示が出た状態

 

 

「保護されていないってどういうこと!?」から、
保護(https化=SSL化)のメリット・デメリットについて、
そしてそのhttps化の設定方法と注意点まで、
ここでご説明します。

 

 

 

今回は『エックスサーバー』×『ワードプレス』における
ブログ設定のお話になりますので、
同じ環境でしたら参考になれば幸いです!

 

 

※エックスサーバーをお使いでない場合、
「エックスサーバー側でやること編」だけとばして読んで、
ご自分が使っているサーバーでの設定については
別の詳しい解説サイトを調べてみてください!><

 

※サーバーによってはSSL化に対応していない場合があります。

 

SSL(https化)って何?いいことあるの?

 

SSLのカンタンな概要と、導入するメリット

 

『SSL(Secure Sockets Layer)』とは、
インターネット上で、データを
“暗号化”して扱うという仕組みです。

 

 

URLの先頭ってふつう「http://~」ですよね。

 

 

これに「セキュリティ」の「s」が増えて
「https://~」になっている状態、
つまり「HTTPS化」している状態が
SSL通信になっているということです。

 

 

icon-book 覚えなくてもいい豆知識

『SSL』というのは昔の呼び方で、
今ならホントは『TLS(Transport Layer Security)』と呼びます。

 

といってもSSLという言い方のほうが広まっているので、
これからもSSL呼びで使っていってOKです!

 

 

 

 

メリット1:セキュリティが強化される

 

『通信を安全に行う』

SSL化の主な目的はコレです!

 

 

データが“暗号化”されると先ほどお話しましたね。

 

 

名前や住所、クレジットカード情報、
IDやパスワードなどの、重要な個人情報

暗号化してやりとりしてくれるのです。

 

 

 

暗号化することで、
ハッキングなど悪いことをしようとする
第三者から、データを盗み見られたり、
改ざんされたりすることを防ぐ
ことができます。

 

 

ネットで買い物をするときなんかに記入する、
個人情報入力フォームのページは、
必ずURLがhttpsになっている……はずです!

(よっぽど古いサイトでなければ笑)

 

 

 

 

メリット2:信頼性が上がる

 

SSLを導入しているページなら、
アドレスバーのURLの左にicon-lock鍵マークや
『保護された通信』
というステータスが表示されます。

 

 

「うちは安心して利用できるサイトです!」

と信頼感をアピールできるわけです。

 

 

サイトの安全性についてのステータスは3種類

icon-lock保護された通信

完全にSSL化(https化)できている状態です。

 

 

icon-exclamation-circle情報、または保護されていない通信

https化していない、httpのページ。

 

もしくはhttps化しているつもりだけれど、
一部httpファイルが混ざっている……といった
不完全なSSL状態のときにもこの表示になります。

 

 

icon-exclamation-triangle保護されていない通信、または危険

危険度の高いページだという警告です。

 

入力フォームがあるページにも関わらず、
SSL化されていないときなどに見られます。

 

 

icon-paperclip おまけ:『avast!』使用時の検索結果画面

無料アンチウイルスソフト『avast!』
を使っている場合、グーグル検索結果を見ると、
安全と判断されたサイトにはリンクの横に
緑色の安全マークが表示されます。

 

無料アンチウイルスソフトのアバストを使用しているときの検索結果画面。Amazonのサイト名の右側に安全マークがついている

 

しっかりSSL化していても、
avastの評価が間に合っていないと
安全マークが表示されませんが……(苦笑)

 

また、サイト名が長いと表示が隠れてしまう
という特徴がありますが……(笑止)

 

 

多少はクリック率に影響するので、
ふんわり確認しておくといいかもです!

 

アネオトは正直気にしていないのですが(笑)

 

 

 

 

メリット3:SEOにちょっと有利になる

 

SSL化されているサイトは、検索エンジンに評価されます。

 

 

「ユーザーが安心して利用できる、優良なコンテンツである!」

と認められ、掲載順位もちょっとヒイキしてくれます。

 

 

Googleさんの公式ブログでも、
httpsページを優先することを表明しています!

 

 

参考icon-caret-rightHTTPS をランキング シグナルに使用します

 

参考icon-caret-rightHTTPS ページが優先的にインデックスに登録されるようになります

 

 

 

 

メリット4:ほぼ全てのブラウザで表示が早くなる

 

ちょっと聞きなれない言葉かもですが、
『HTTP/2』に対応しているブラウザから
閲覧している場合、httpsページは表示が早くなります。

 

 

Safari、Mozilla Firefox、Google Chrome、
Internet Explorer、Microsoft Edge……
といった主要ブラウザの最新バージョンが、
すべて『HTTP/2』に対応しています。

 

 

この『HTTP/2』というのは、
いままでの『HTTP/1.1』から進化した、
データのやりとりにムダのない優れた通信形式のことです。

(覚えなくても大丈夫ですw)

 

 

 

そして『HTTP/2』による高速化が、
httpsページに対して適用されているのです!

 

 

やはり表示がスムーズだと、
お客さんはイライラしなくて済むし、
ページの離脱率(すぐ帰っちゃう確率)が減りますね。

 

 

 

 

 

SSLを導入するうえでのデメリット

 

httpsに対応していないツールや広告は、非表示になってしまう

 

一応、怖いのはこれですかね……

 

 

少し前までは、ニコニコ動画や
各ASPのバナー広告なんかが、HTTPS非対応でした。

 

 

 

https化したページにコードを貼りつけたとき
「広告が表示されない!」
「これじゃアフィリエイトできねえ!」
と困っている方が多かったです。

 

 

今ならもう、ASP各社もSSLに対応してくれましたし、
ニコニコの埋め込み動画もきちんと表示されます。

 

 

 

なので、今のところピンポイントで
困っていることはない
かな……?

 

 

とアネオトは思っているのですが、
何かしらあるかもしれません><

 

 

しかし、これからはSSL化の時代なので、
今はhttpsに対応できていないサービスでも、
はやめに対応を進めてくれるはず、です……!

 

 

 

 

Googleサーチコンソールに再登録が必要

 

これは既に『Google Search Console(サーチコンソール)』
あなたのブログを登録していた場合の話です。

 

 

サーチコンソールの仕様上、
httpとhttpsは別サイト扱いになっています。

 

 

ですので「http~」のURLで登録していたなら、
「https~」のURLで新規登録し直さなければいけません。

 

 

 

また、サーチコンソール内にあるツール
『リンクの否認』を利用している場合は、
否認用テキストファイルの再アップロードも必要です。

 

 

 

 

 

ブログ完全SSL化の手順

 

icon-arrow-down こんな流れになります

サーバー側で、SSL化設定をする

 

ワードプレス側で、ブログの基本URLをhttpsにする

 

ブログに掲載済みのhttpリンクをすべてhttpsに書き直す

 

これから細かく説明していきますね!

 

 

 

 

まずエックスサーバー側でやること

 

エックスサーバー』にログインして、
自分のブログのSSL化設定をしましょう!

 

 

設定できるページの場所はこちらなのですが……

 

サーバーパネル > SSL設定 > 独自SSL設定の追加

 

ちょっと複雑で迷子になりやすい構造なので、
スクショでもご案内しますね!

 

 

 

エックスサーバーのトップページ
メインメニュー右側の「ログイン」を触ると
びろ~んとプルダウンが出てきます。

 

 

その中の『サーバーパネル』をクリックしてください。

 

エックスサーバーのトップページ、ヘッダーメニューのログインのプルダウンの中からサーバーパネルをクリック

 

 

IDとパスワードを入れてログインし、
サーバーパネルの画面に入ると、
右側に「ドメイン」のメニュー一覧があります。

 

 

その中の『SSL設定』をクリックしてください。

 

エックスサーバーのサーバーパネル画面から、ドメインメニューのSSL設定をクリック

 

 

ドメイン選択画面に入りますので、
所持しているドメイン一覧から、
今回SSL化したいブログのドメイン名を選びます。

 

エックスサーバーのドメイン一覧画面。SSL化したいブログのドメイン名を選択する

 

 

SSL設定画面が表示されるので、
『独自SSL設定の追加』タブをクリックします。

 

 

そして設定対象ドメインが合っていることを確認し、
『独自SSL設定を追加する(確定)』ボタンを押せば完了!

 

 

icon-meh-o ちょっと気になる注意点

設定対象ドメイン名には、本来ついてないはずでも
「www」が入っていることがあります。

 

違和感スゴイですが、ここは気にしなくてOK!

「www」つきで問題ありません。

 

 

SSL設定がちゃんと反映されるまで
30分~1時間ほどかかります。

 

 

即、自分のブログを確認しにいって
さっそくURLを「https」に打ち直してみると、
「保護されていません!危険です!」的な
表示が出てビビると思います(笑)

 

しばらくは我慢して待ちましょう!

 

 

そのあと無事、SSL化完了が確認できたら、
ワードプレス側の作業に入ります。

 

 

 

 

 

次にワードプレス側でやること

 

あなたのWordPressの管理画面にログインして、
一般設定画面へ行ってみましょう!

 

(左メニュー)設定 > 一般

 

 

『WordPressアドレス(URL)』
『サイトアドレス(URL)』
「http://~」になっていたら、両方とも
「https://~」に直して、『変更を保存』します!

 

ワードプレスの設定画面で、WordPressアドレスとサイトアドレスをhttpからhttpsに書きかえる

 

 

各ページのパーマリンクや、
記事投稿画面でのプレビュー先のURLが、
今まで「http」でしたがこれ以降は「https」になってくれます!

 

 

さてここからがちょっと大変です><

 

 

 

 

 

エラーを探して、完全SSL化を完了させるには

 

面倒だけど、ブログ内のリンクを全部httpsに直そう!

 

ブログ内にはってある
すべての内部リンク(別記事へのリンク)や
画像のURLを、httpsに書きかえないといけません!

 

※ワードプレスのプラグインには
記事内の文字列を一括置換できるものもあるので、
手間がかかりそうなら使ってみるといいかも!

 

 

記事内だけでなく、メニューやウィジェット
手動ではりつけたリンクがあればチェックです!

 

 

追加CSSやテンプレートをいじっていた場合は
背景画像のURLをhttpで入れてないか確認しましょう!

 

 

 

心当たりのある個所をすべて「https://~」に
変更できたと思ったら、アドレスバーを見てください。

 

 

icon-lock緑の鍵マークが出ていればそのページはSSL化完了です!

 

icon-exclamation-circle情報アイコンのままだったら、どこかにhttpが残っています。

 

たいてい犯人は画像ファイルです!

 

 

「どの画像がダメなんだろう~?」てっとりばやく調べる方法

ページを開いた状態で、

(Windowsなら)F12を押す

(Macなら)optioncommandIを押す

コンソール(Console)タブを開く

 

 

もしくは、ページのどこかで右クリック

「検証(要素を調査)(要素の検査)」をクリック(※)

コンソール(Console)タブを開く

の方が覚えやすいかな?

 

※ブラウザによって表記が異なります。

 

 

 

コンソール画面で「Mixed Content:」という
注意表示があったら、それが犯人です!

 

コンソールでhttpsになっていない画像ファイルを探し当てている画面

 

英語でちょっとウッてなるかもですが、
「この画像(image)のURLがhttpですよ!」
と指摘してくれているのがわかります。

 

↑この例で発見した2つの画像ファイルは、
どちらもCSSに自分で追加していた背景画像でした(笑)

 

 

 

 

 

外部ツールに登録したリンクも忘れずに変更!

 

あと一息です!!

 

ブログを既にどこかに登録してしまっていたら、
URLを書き直しておきましょう!

 

 

先ほども言ったとおり、
サーチコンソールに既に「http~」で登録していた場合、
「https~」で新規登録することになります。

 

 

 

グーグルアナリティクスの方は、
既に登録している情報のURL変更だけでいけます。

 

 

ただ変更箇所が2つあるのでお気をつけください。

 

 

 

まずはGoogleアナリティクスの管理画面にログインします。

 

左メニューの一番下のicon-gear歯車マーク > 中央の「プロパティ設定」

 

プロパティ設定画面に入ると、
「デフォルトのURL」という項目があり、
「http」か「https」か選択できるようになっているので、
「https」に変更してください。

 

 

最後にもう1点。

 

左メニューの一番下のicon-gear歯車マーク > 右側の「ビュー設定」

 

さっきとほぼ一緒の似た画面です!

「ウェブサイトのURL」という項目があり、
「http」か「https」か選択できるようになっているので、
これも「https」に変更してください。

 

 

これでGoogleアナリティクスでの変更は完了です!

 

 

 

今回はちょっとあっちいったりこっちいったり
ダルい作業でしたよね、お疲れさまでした。

 

 

最後まで読んでくださってありがとうございます!

自由化メルマガ無料講座はこちら。好きなこと×ブログ×メルマガ=自動収入!趣味ブログと秘伝の技で成功し、社畜を脱出したノウハウを全て教えます!ネットビジネス自動化のしくみ&始めかたガイドブック計3冊、200ページ以上をメルマガ限定無料プレゼント
Pocket

アネオト

元社畜デザイナーのゲーマー姉弟ふたり組です。
会社で人生に絶望……
そこからネットビジネスで生活が一転し、
今はノンストレスで好きなことをして日々すごしています。

どうやって変わったのか、詳しい経緯はこちら!

あわせて読みたい

1件の返信

  1. 2018-10-29

    […] 完全には保護されていません?WordPressのSSL(https)エラー原因は画像など […]