SSL設定がうまくできない!原因の見つけ方

WordPressでSSL設定がうまくできない!アドレスに「!」が出る場合の直し方

 

WordPressの
セキュリティの設定(SSL化)はお済みですか?

うまく設定できない…とお困りの方は
いらっしゃいませんでしょうか?

 

SSLの設定をしたのに、

「!」マークがついたまま
正しい緑の表示にならないこと
があります。

 

 

1)正しい表示

鍵マークがついて、緑色になります。

 

2)設定したのに「!」の状態

httpsと表示はされているけど
緑色にならず、「!」マークがついています。

 

これは、httpsの設定はしたけれど

「どこかにまだhttpのものが含まれている」など
完全に設定が終わっていない場合に
この表示になります。

これを直す方法をご案内しますね^^

 

SSLってなぁに?
先に確認したい方は、こちらの記事へどうぞ
 ↓ ↓

SSLって何?やっていなかったら大変!セキュリティの設定【エックスサーバー編】

 

WordPressでSSL設定をする方法

まずはWordPressで
SSL設定をする手順をおさらいします。

ここでは詳細は省きますが、
上手くい書ない場合、念のため
この手順ができているかどうかも確認してみてください。

 

1)お使いのサーバーで
「SSLを使う」という設定をする。

サーバーによって異なりますが
SSL設定を有効にして
反映するまでしばらく待ちます。

 

※エックスサーバーの画面です

 

2)WordPressの設定画面で
httpアドレスにsをつけたす

この2つができると、
それだけで設定は完了なのですが、

 

それでも、ブログを表示したら、

httpsエラー表示

緑色にならず、「!」マークが
ついてしまうことが稀にあります。

こんな場合、いったいどこを
治したらよいのでしょうか?

 

「!」マークが出ている原因とは

ブログを表示させたときに「!」が出てしまうのは、

そのページのどこかに
「http」Sなしの
画像(またはリンク)がある

ということなんです。

 

なので、対策は

 

問題の画像を削除して
同じ画像を貼りなおすだけ

httpsになるので、簡単に治せます♪

しかし…

 

どの画像を貼りなおすのか調べる方法

そうは言われても、
どの画像を貼りなおせばいいの?

 

片っ端からやるわけにもいきませんよね。

 

次は、
問題の画像を特定する方法
ご説明します。

 

■画像が少ない場合

1)これかな?という画像を右クリックして
「新しいタブで画像を表示」を選択してください。

 

 

その画像が新しいタブで表示されたとき、
アドレスが緑色になっていれば、その画像はOKです

 

黒で「!」だったら…それが犯人です!!!

 

あびちゃんが犯人でした(笑)!!!

 

原因の画像がわかったら…

その画像をいったん設定からクリアして
同じ画像を貼りなおします。

※操作は画像の場所によって異なります

 

すると…あびちゃんも緑のhttpsになりました^^

 

 

 

■画像がたくさんある場合

 

画像が多い場合、一つ一つ見るのも大変なので
まとめて検挙する方法をお知らせしますね。

「検証機能」を使って原因を探ります。

・Windowsの方は F12キー
・Macの方は command + option + I 

を押すと、

画面の下半分に、なんかややこしい画面が出てきます。

(画像はWindowsの場合です)

 

こちら「検証機能」といいまして
ホームページの内部を調べることができる機能です。

これで「Sなし」がどこにあるかを探し出すんです。

左から2番目の
「console」(コンソール)と言うところをクリックします。

そうすると、sなしの画像やリンクがある場合は
赤や黄色で警告文が出てきます。

Mixed Content: The page at
‘<ブログのアドレス>’
was loaded over HTTPS,

but requested an insecure image
‘<問題の画像リンク>.
This request has been blocked;
the content must be served over HTTPS.

というのが見つかりましたでしょうか?

 

これは

「httpsって言われたけれど、
この画像はhttpsじゃないですよ。
httpsにしてね」

というような意味の警告です。

※警告が多いときは、
矢印マークで隠れている場合もあります。
そんな時は矢印マークを
クリックすると中身が全部見れますよ。

▶5というところをクリック

 

   ↓ ↓ ↓

1段落開いて、5枚の詳細がわかる

 

ここで出てきた画像のアドレスをクリックすると、
どの画像なのか表示されますので

どの画像が原因かが分かったら、
それぞれの画像を設定した画面にもどって、
画像を再設定してください。

5つもあった…(笑)

どうやら、お使いのテーマによっては
「ウィジェット」の中に入れた画像やリンクが
httpsに置き換わらず、修正が必要な場合がある
うです。

 

無事完了すると、
httpsが正しい表示になるはずです^^

 

ちょっと手間はかかりますが

SSLは検索結果にも影響してきますので
ひと頑張りする価値ありですよ!!

 

 

もしどうしてもできなくてお困りの方は、
SSL化だけでも承りますので、お気軽にご相談ください。

お問い合わせはこちらからどうぞ
https://wp-firststep.com/contact/

村重 敦子

「猫でもわかる!」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。

Follow me!