こんにちは、いなみです(´ω`*)

 

最近このサイトをSSL設定したいなぁとあれこれ調べていてたところに丁度いいタイミングで私が利用しているさくらサーバーにて無料SSL設定サービスが始まったとのお知らせが!!

 

いなみ
凄いグッドタイミング!
早速設定するぞー!

 

・・・・・・さくらサーバーでのSSL化設定は無事完了!

ワクワクしながら、サイトを見てみるも?

いなみ
反映されてない( ゚д゚)ハッ!
警告マークも出ているしなんなんだ!

 

 

・・・・・・よし!警告マークか無事に鍵マークになった!!
これで一安心だー( `ー´)ノ

いなみ
ん?次はブログのデザインテーマが崩れてるじゃないか~
なんでなの~(T_T)

 

 

結果、SSL化によるトラブルが発生し全てが完了するまでに丸1日半という時間が掛かってしまいました・・・

 

私がさくらサーバーにてSSL設定をした際に遭遇したトラブル2点

  • 警告マークが消えない
  • テーマが崩れる

私が解決に至った方法をご紹介します!

スポンサーリンク

警告マークが消えないときの解決法

 

さくらサーバーから「SSLの証明手続きが完了した」といった旨の案内があったのでサイト情報からブログのURLを[https://~ ⇒ https://~」に変更。

 

 

https://~(保護されていないURL)

⇒ https://~(保護されているURL)

 

その後chromeで確認したところ、まさかの警告マークが…

早速Google先生で検索!

SSL 警告
検索

ページ内に保護されていない何かがありますよ」という理由が分かりました。

 

 

私が把握しきれていなかったことが原因なのですが、SSL設定しサイトURLを変更すれば勝手にページ全てが保護されるものと思っていたのがどうやら既に投稿された記事にある画像やリンクされたURLをhttps://に自分で変更する必要があるようです。

 

 

ちまちま1記事ずつURLを変更して回るのは正直大変です。

しかしWordpressには一括変換してくれる有難いプラグイン「Search Rejex」というものがあります。

なので私は今回このプラグインを利用しました!

https://www.adminweb.jp/wordpress-plugin/list/index27.html

このサイトでは変更後のURLをhttps://ドメイン~に設定とありますが、このhttps://を「//ドメイン~」にするとhttps://とhttps://の両方を自動で認識してくれるので便利です。

 

もし外部リンクのURLが「https://~」から始まる記事を張り付けた場合、保護されていないコンテンツが含まれているので警告マークに変わってしまうのでURL始めを//ドメイン~にしておくと警告を防げます。

 

 

が!私が現在利用している「Simplicity」というテーマには便利な機能があり、簡単一括変換してくれるシステムが組み込まれているそうなのです!!

https://wp-simplicity.com/simplicity-ssl/

 

 

これを気付いたのは全て終わった後のこと。。。

いなみ
もっと早くに気付いていれば無駄な時間を使わなくて済んだのに~!
けど学びもあったのでセーフとしときます!

 

 

プラグインSearch Rejexで一通り変更を済ませた後に、サイトを確認します。

万が一まだ、警告マークがある場合は何が原因なのか?詳しく知る必要があります。

そんな時はF12というデベロッパーツールを開いて確認する方法が便利で早いです!

https://nelog.jp/wordpress-ssl#SSL-2

 

 

 

スポンサーリンク

デザインテーマが崩れた問題の解決方法

 

SSL設定を済ませ警告も一通り対応が済んだ後にサイトを確認。

するとトップページ以外のページに移動するとテキストと画像がズラっと並んだようなデザイン性が全くなくなっていてテーマが崩れているのです。

 

 

私は最初、さくらサーバーとWordpressで私が使うテーマとが相性が悪くてデザインが崩れたのか?と思い「Simplicity」のテーマについて調べました。

しかしどうやらテーマが原因ではなかったようなのです。

 

さくらサーバーとWordpressとの相性の関係でSSL化によってテーマが崩れることがあるような記述を見かけましたが、私にはその相性などがわからず・・・(´Д`;)

 

いなみ
とにかく解決法をみつけねば!!( ゚Д゚)

https://tadeee-blog.com/wp/blog-struggles-ssl-of-sakura-internet/

ありました。一番助かる細かい画像付きです。

 

 

参考サイトさんの張り付けるタグがうまくコピーできない場合があるので上記タグをwp-config.phpに張り付ける際にご利用ください(^-^)

 

このタグを張り付けると1発解決しました!

 

SSL設定はサイトを立ち上げた時に!!

 

今回、SSL設定するにあたって思ったことが警告エラーに関しては確実にサイトを立ち上げて記事を更新しだすに済ませておくことをオススメします。

先に設定を済ませて置けば後から何かを変更したり、プラグインを用意する必要もないので本当に手間が省けます。

 

テーマの崩れに関しては記事を更新してからでないとわかりませんが、これも前述したとおり、wp-config.phpというファイルに上記のタグをコピーし張り付けすればいいだけなので私のように1日以上かける必要もないです!

 

管理者も読者さんも両方にとって安心してサイトになるよう工夫し配慮していきたいですね(*^-^*)

ランキング参加中!
クリックしてもらえると喜びます(●´з`●)
 ブログランキング・にほんブログ村へ

スポンサーリンク

Twitterでフォローしよう

こちらの記事もオススメ!