13
10月
0

httpをhttpsに変えてみた

XサーバーはSSL設定が無料で出来る。

せっかく無料で使えるのなら、
是非ともこれ機に使わにゃソン・ソン♪

そんなわけで挑んだSSL設定だーがー…

カスタマイズや記事を増やす前にhttp://からhttps://に変更しておけば手間は半分以下で済んだのに、モノを増やした後にこの作業をすると、とてもめんどくさいことを学んだ、昨日の夜の話。

取り敢えず、躓いた部分を忘れないうちにメモメモ。

まずはSSL設定をする

こちらのサイトさんを参考に作業を進めていく。
Xサーバー以外の人は、やり方を掲載しているサイトさんを探してくださひ。

WordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)

こちらのサイトさんに出会えたお陰で、切り替え作業自体は無茶苦茶スムーズにいったのだーがー………

ここから先はデベロッパーさんとお友達タイム。
ツールの出し方で苦戦した(Fキーで出せなかった)ので一応メモ。

右クリック > 検証
またはF12キー でデベロッパーツールを表示
ツール(メニューバー) > ウェブ開発 > 開発ツール
またはOption +Command(Alt?) +I でデベロッパーツールを表示

(キーボードの設定によってはFキーで違うものが呼び出されるヨ)

以下、スクショ取り忘れまくりの防備録。

 

画像のリンクは手動で変更

SSLに設定を切り替えて、Search Regexでhttp://からhttps://に置き換えたところで、セキュリティチェックをするためにデベロッパーツールと睨めっこ。

すると、こんな風に真っ赤っかに。

これは既に画像を修正した後なので、画像のエラーは消えてる状態なのだが、実際はいくつかの画像がこんな風に赤い表示になってた。

これを修正していくわけだが、ずぶのド素人には、やりかたが分からない訳だよ。

htmlをFTPでサーバースペースにアップしているだけなら、単純にhtmlを書き換えて上書きすればいいのだが、WordPressの場合はそういう感じでもないし…。

そうやって途方に暮れているときに、何となくエラーになっている画像がある記事の編集画面に移動してみた。

で、そこでやったのが、画像をクリックすること。


引っかかっていたエラーは、http://で画像を呼び出してますよというものなのだが、これを修正するのはクリックして編集するだけ。

画像の編集画面に移動すると、自動的にhttp://となっていた画像のURLがhttps://に直ってくれるのだよね。

あとは、画像編集画面を閉じ、記事を再保存すればエラーが消える。

画像のURLを修正したい時は、画像の編集画面を起動すると自動的に直る。

 

Light Boxはプラグインによってエラーになるかも?

どうにか画像の呼び出しエラーを潰せたところで、再びデベロッパーと見つめ合う。


残ったエラーは2つ。
そのうち、1つはどうやらLightBoxっぽいことは何となく分かった。

でも、どうやって修正するんだよ、これ…

再び途方に暮れること数時間。

使っていたLightBoxのプラグインはWP jQuery LightBoxってやつだったんだが、どんなに悩んでも修正する術を思い付かないので、いっそのことプラグイン自体を変えてしまえ!という暴挙に出る。

シンプルで使いやすいと紹介されていても、真っ赤になるからしょうがないよー

というわけで、ハイサヨウナラ。

代わりに入れたのは、FooBox。特に何か設定するわけじゃないし、ついでにFooGalleryも使おうと思ってこれに変更したところ、拍子抜けするくらい簡単に解決した。

プラグインのエラーは自力で直すより、別のプラグインをインストールする方が早いこともある。

 

Open+Sans:000に悩まされる

で、最後に残ったのがコレ。

Mixed Content: The page at ‘https://ドメイン’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,700’. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at ‘https://ドメイン’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://fonts.googleapis.com/css?family=Open+Sans:800’. This request has been blocked; the content must be served over HTTPS.

↑書いてある内容はこんな感じなのだが、全くもってコレなんだよわっかんね。

調べてみると、どうやらGoogle Web Fontsの読み込みが上手くいっていないってことらしいが、探してもhttp://fonts.googleapis.com/が見つからないのだよ、コレが。

もう、どうしようもないな、お手上げ!

って不貞寝しようとしたところで、この記事を見つける。

SSL化によるエラーを解消できない

この質問の中に、

このスタイルシートの冒頭に/*
Name: オレンジメニュー(サブメニューなし)
Priority: 90
Author: yhira
Author URI: http://nelog.jp/
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);

という部分があるわけだが……ひょっとして、コレと同じ現象が起きてるのか?

と言う事に気付く。

で、早速スタイルシートを見直すが、やっぱり無い、無い!無い!!

一体どこにあるんだよ!!!!!

とやさぐれたところで、引用元の親テーマにあるのか?ということを思いつき見てみると……

 

あ。

 

あったぁああああああああああああ!!!!!

子テーマとヘッダーやフッターなどのファイルばかり探していて気付かなかったけど、実は親テーマのスタイルシートにこの記述があったことを漸く突き止めたわけで。

早速修正してみると……

綺麗さっぱり真っ赤が消えました!

やったぁああああああ!!!

どうしても見つからない記述は、意外と元ファイル(親テーマ)にあったりすることがある。

 

と、いうわけで、無事SSL設定終了。

ついでにファビコンをくっつけて

おまけにパンくずリストをちょっと弄ってカスタマイズ終了である。

つ…疲れた…

 

参考サイト

WordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)/寝ログ

SSL化によるエラーを解消できない

タグ: ,

スポンサーリンク