[業務連絡]ブログの常時SSL化(http→https)工事中

猫のフィグ、シンガプーラ 電脳
アンダー・コンストラクション。ご迷惑をおかけします
猫のフィグ、シンガプーラ

アンダー・コンストラクション。ご迷惑をおかけします

Xサーバーならタダで簡単にhttps化が可能!ちょっと頑張ってみる

今更ながら、当ブログのSSL対応作業を行っております。
グーグル先生がやれやれと五月蠅いhttps化っていうやつです。
そんなことより記事を書くほうが先だろって話ですが、書くことは溜まる一方でアウトプットはまったく出てこない状態。コーラックをひと箱飲んでも出てこないので、とりあえず、ささっと、ペロッと、SSL化を先にしちゃいます。

エックスサーバーなら悩まずできる

幸い、このブログはXサーバーを使っていますので、SSL化は無料で超簡単にできるはず。
手順はシンプル。詳しいことは詳しい人に譲りますが、以下5ステップで完了します。

1 エックスサーバーのサーバーパネルでSSL設定を行う(30分ほどで反映)

2 Wordpressの一般設定でサイトアドレスをhttpsにする

3 Search Regexでhttp://www.ginger~をhttps://www.ginger~に一括置換

4 .htaccessを書き換えhttpsにリダイレクトの設定を行う

5 Chromeの開発者ツールを使い、変換しきれなかったhttp://を潰していく

ウェブ情報を見ながら、上記1~4はすぐに片付きました。
ちょっと面倒なのは5で、ChromeでF12を押して開発者ツールを立ち上げ、「Mixed Content」となっている(httpが混在している)部分をいちいち修正していく作業が必要になります。
うちの例でいうと、SNSのボタンやロゴ画像などがひっかかり、WordpressのCSSやヘッダー、フッター等のphpを書き換えて直しました。

謎の画像が行く手を阻む

作業は順調に進み、トップページはSSL化ができました。しかし、個別記事のページがうまくいかない。
Chromeでチェックすると、どうやらエラーページでは「pawh1.png」という画像が呼び出されていて、これがバッティングしている模様。
でも、この悪さをしている画像が何なのか皆目わかりません。
ソースをみても「pawh1.png」なんて画像を呼び出している様子はありません。

ブログのSSL化、成功した画像

本来なら「保護された通信」となるはずなんだけど…


いろいろ調べてもわからない。
しばらく悩んで、はっと気づきました。
この画像は、見出し(h2)のアイキャッチにつくった、自家製犬の足跡マークでした。

←このPawが悪さをしている。原因は見出しの画像だった

つまり、cssでh2の背景としてリンクを張っているもの。足跡で見出し用だからpawh1て名前を付けた訳ね。当時のボクは。(実際にはh2だけど)

スタイルシートを書き換えてもダメ

ここまでわかれば、CSSを修正すれば万事OK、だが、しかし、ダメでした。
CSSを書き換えても「保護された通信」になってくれない。どうやらCSSだけでなくスクリプトでもいじらないといけなさそうです。

中途半端でご迷惑おかけし申し訳ありません

現状で辿り着いたのは以上のような感じ。現在の当ブログは、h2の見出しのあるページはhttps化できておらず、保護されたページと混在した状態になっています。
もしかしたら、ご覧になられているブラウザによっては変なメッセージが出ているかと思いますが、とりあえず問題ないはずですので安心してください。なるべく早く完全SSL対応できるように努力します。
まぁ、ダメなら最悪、Pawマークをとっちゃえばいいや。
ちなみに、SNSは過去の数字が引き継げていない上にfeedlyはどうも上手く機能してなさそうなので、これらもそのうち撤去するかもしれません。

[追記]

何とかできました。問題の画像の件は、非常につまらないオチで恐縮ですが、キャッシュの問題だったようです。キャッシュクリアしたらcssを読んでくれました。
ほかにもなにか変なところがあれば教えてください。

コメント