あべろぐぷらす

元SEが半農半Xな暮らしを目指して頑張る様子を福島から発信するブログ

【はてなブログ】SSL対応第4弾!ついにHTTPS配信を有効化させました編レポートです!

f:id:abeshi01:20180802162559j:plain

こんにちは、あべし(@honjituno)です。今日はブログのお話です!

 

ブログSSL対応第4弾!ついにHTTPS配信を有効化させました編レポートをお届けします!

 

今回は、ようやくSSL化させてしまいましたよ(*´▽`*)!

 

結果的に、無事にURLを『https://』に変更することが出来ました(T_T)!

 

最近、少しだけ検索流入が減ってきていたような気がしていたので一安心です。

 

今回のレポートでは、SSL化した際に起こった現象とその修正方法を紹介していきます٩( ''ω'' )و!

  

▼SSL化対応の記録はこちら!

 

www.abelog-plus.com

 

www.abelog-plus.com

 

www.abelog-plus.com

 

SSL対応第4弾!ついにHTTPS配信を有効化させました編レポートです!

前回のレポートでは、クローンサイト上での混在コンテンツを修正していきました!

 

修正箇所も検討がついたわけで、今回はついにSSL化をしてしまいたいと思います!

 

HTTPS配信を有効化!

はてなの設定ページにある『HTTPS配信』 。これまでは万が一失敗してしまった場合の恐怖から、ふれることが出来ずにいました。

 

しかし!これまでブログのバックアップとしてクローンサイトを作り、

 

そこで混在コンテンツの修正箇所の検討をつけてきました!

 

ここまで来たら準備OKですよね!?

 

念のため作業前にはツイートしていましたよ!

 

 

そんなわけで、『えいやっ!』と有効にしてみたのでした((((;゚Д゚))))ガクガクブルブル

 

有効にしてみたら…

有効にしたらすぐ、もっとも恐れていたデザイン崩れが起こっていないかすぐに確認しました。

 

スマホとPCから確認してみましたが、

 

問題ないようでした(*´▽`*)!!

 

こちらがSSLか直後の表示です。

f:id:abeshi01:20180802162635j:plain

 

引き続き、Mixed Content(混在コンテンツ)エラーを確認していきましたが、想定していたものしか出てきませんでした!

 

こんなにすんなりいっていいの??と思いつつ、コードを修正するためにデザインのカスタマイズ画面に行ってみると…

 

デザイン設定の画面で、サイトデザインが崩れてしまう現象が発生してしまっていました( ゚Д゚)!!

 

f:id:abeshi01:20180802162707j:plain

 

こちらのブログで紹介されていた現象です。事前にチェックしていたので落ち着いて対応することが出来ました(T_T)。

 

www.tamashii-yusaburuyo.work

 

これは、サイトの見た目は何も問題がないけど、自分のカスタマイズ画面のデザインのみ崩れてしまう現象らしいです。

 

SSL化する前は「デザイン」を選択し編集画面を見ても特に問題はなかったと思いますが、

 

SSL化してHTTPS配信設定が完了した後だと、なぜか「デザイン」画面を見た時だけ崩れます。

 

実際の画面は問題が無いのに、「デザイン」画面で見た時だけ崩れるこの現象に困っている方は私以外にもおられるのではないかと思います。

 

ややこしいですね笑。

 

デザイン画面のデザイン崩れの対処法!

このままだとカスタイマイズする時などに困ってしまうので、対処していくことにします٩( ''ω'' )و

 

CSSをコピーしておいて、デザインテーマ自体をインストールし直すという対処となるようでしたが、

 

こちらのブログで紹介されていた『テーマURLをブラウザに入力して、リダイレクトされたURLを使ってみる』という方法を試してみました!

 

テーマの再インストールが面倒な場合はデザインCSS冒頭の@import url("テーマURL");のテーマURLをブラウザに貼り付けてリダイレクトされたhttpsのテーマURLに差し替えて下さい。

 

blog.minimal-green.com

 

これで成功すればテーマを再インストールする必要がないようだったので、まずはこちらの方法を試してみたら無事に成功しました!!

 

デザイン崩れを無事乗り越えて、混在コンテンツも修正し終えました。事前にやっていたことなので、迷うことなくサクサクです。

 

これでSSL対応の山を乗り越えたような気がします。今回の作業はここで終了にします!お疲れ様でした!

 

まとめ

ブログSSL対応第4弾!ついにHTTPS配信を有効化させました編をレポートしてみました!

 

大きくデザイン崩れを起こしてしまったり、ブログ自体にアクセスが出来なくなるなどの大事故が起こらなくて一安心でした!

 

次回はGoogleサーチコンソールやアナリティクス設定をしていきます!

 

実はすでに手を付けていますが、少し苦戦中です…_(:3 」∠)_

 

苦戦するとブログに書くことがどんどん増やせるので、いいことなんです!

 

前向きにとらえて頑張りますよ!第5回レポートへ続きます!それではー!