HTTP 配信から HTTPS 配信へ変更。はてなブログ。画面が崩れちゃいました。。

f:id:mikanusagi:20180831190536p:plain ふと思い立って、つい先ほどHTTPSに配信方法を変えました。

 

 

HTTP と HTTPS

HTTP とは?

ホームページのURLって、必ず http:// か、https:// になっていると思います。

httpは、Hypertext Transfer Protocol の略語。

通信プロトコルの一種。Webブラウザとサーバー間の通信を担う。

httpというプロトコルでリクエストしたデータをサーバーからひっぱってくる、

ってことみたいです。(*´Д`) 合ってる…?

 

HTTPS とは?

HTPPS の S は Secure の エス。

つまり HTTPS は、暗号化した通信プロトコルを利用したもの。

それによって、保護された通信、

つまり、通信の過程において、

第三者がデータを盗みみることはできなくなっている。

 

HTTPS のメリット

暗号化されていて、保護された通信が可能になる HTTPS。

https から始まるサイトは、検索にかかりやすくなる可能性がある。

 

はてなブログも独自ドメインでHTTPS配信ができるようになっていた

私がこのブログ始めたころは、

まだ独自ドメインではHTTPSに対応していなかったんですよね。

でも、可能になったので、今日、変更することにしました。

 

設定 > 詳細設定 で、HTTPS配信を有効にするだけ…。

 

カスタマイズした内容がふっとんだら悲しいので、

一応変更したCSSの内容を別途保存して、 

HTTPSに変えたら元にもどせないことを確認して…

HTTPS配信への変更をポチっと。

簡単じゃないか~(≧▽≦)

 

 

…と思ったのもつかの間。

 

 

 

f:id:mikanusagi:20181014002619p:plain

 

Σ( ̄ロ ̄lll)ガーン

 

表示が変…。

 

崩れた表示を直す方法

表示が変なのは、はてなブログのテーマが反映されていないからですねぇ。

 

なんでこんなことになっちゃったか分からず、

いろいろ調べるのも面倒くさいので、

とりあえず、ブログのテーマを再ダウンロードしました。。

(これをやると、デザインCSSとか背景画面が破棄されるので、注意が必要)

とりあえず、これで元にもどりました。

 

まあ、それでもいいのですが…

原因はこれでした。

編集サイドバーの混在コンテンツ(Mixed Content)対応について


HTTPSのページを閲覧するときに、ページ内にHTTPの画像やJavaScriptがある場合は、Webブラウザが混在コンテンツ(Mixed Content)と該当箇所をブロックするため、表示されません。

 

(一部略) 

はてなブログユーザーが投稿したテーマの場合、上記のみでは対応が不完全なことがあります。その場合はテーマが修正されるのをお待ちください。

 

引用元:HTTPSで配信する - はてなブログ ヘルプ

 

原因は混在コンテンツだったんです。 

HTTPS配信にしたのに、ブログの中に、HTTPの部分があると、

そこはブロックされてしまう。

見てみると、このテーマのCSSの部分が

@import url('http://...' .....

になっていたので、

これを

@import url('https://...' .....

に修正すればよかったのでした。(*´Д`)

※ただし、そのテーマが、https に対応している必要があると思います。 

 

 

かくして。。無事にHTTPS配信に移行できたのでした。(*´з`) よかった。

 

 

他に必要なこと

Google analytics や Google Search Console に登録している場合は、

https への変更に伴う修正が必要です。お忘れなく。(*´Д`)/