tkd放浪記

tkd放浪記

アニメ好き三十路ドラマーによる、趣味だけで生きるためのブログ

【はてなブログ】https(SSL)化して保護された通信にする方法と注意点

スポンサーリンク

f:id:tkd_drum:20180701144107p:plain

 

どうも、tkd(@tkd_drum)です!

 

ブログのhttps(SSL)化は、もうお済ですか?

自分がいつも使っているはてなブログも、徐々にではありますがhttps(SSL)配信に対応してきている状態です。

 

天下のGoogle様も推奨しており、今後は検索順位が有利に働くのではないかと言われています。

 

また、ブラウザがChromeの場合はhttps(SSL)化してないサイトは1度警告が出る仕様になると発表されてます。

ほとんどの人は、そんな警告が出てくるサイトなんて即閉じてしまうでしょうね。

 

そうならないためにも、メジャーになりつつあるhttps(SSL)化は必須ですよね!

(はてなブログ公式からもhttps配信について発表されているので、そちらもチェックしてみてください。はてなブログへの接続をすべてHTTPSにできる機能の実装予定と、利用を検討するユーザー様に準備いただきたいこと - はてなブログ開発ブログ)

 

今回は、はてなブログをhttps(SSL)化して保護された通信にするための方法と注意点を解説していきます!!

 

スポンサーリンク

 

はてなブログをhttps(SSL)配信するメリット

https(SSL)化して配信することにはいくつかメリットがあります。

  • ブログのセキュリティが強化される
  • ブログの表示が早くなる
  • SEO的に有利になる(と言われている)

 

そして冒頭でもお伝えして通り、今後はhttps(SSL)化することでサイト表示時に警告が出ないようになるため、ブログ訪問者へ安心感を与える事が出来ます。

 

それでは、早速作業に取り掛かってみましょう!

 

スポンサーリンク

 

https(SSL)配信する方法

まずは、いきなりhttps(SSL)配信する前にいくつか準備しておいた方が良い項目があるので、そちらを済ませてしまいましょう。

 

https(SSL)化するための準備

ブログのバックアップを取得

何をするにしてもバックアップは重要!

よほどのことが無い限り大丈夫だとは思いますが「あのときバックアップしときゃよかった~;;」なんてならないためにも、バックアップはしておきましょう。

 

ブログの管理画面(ダッシュボード)を開き、『設定』の中にある『詳細設定』を開きます。

はてなブログ-設定-詳細設定

 

 

『詳細設定』の下の方に『記事のバックアップと製本サービス』があるので、そこをクリックします。

はてなブログ-詳細設定-記事のバックアップと製本サービス

 

 

そうすると『〇〇(ブログ名)をエクスポートする』というボタンが出てくるので、それをクリックします。

はてなブログ-バックアップ-エクスポート

 

 

最後にダウンロードするというボタンが出てくるので、それをクリックしてダウンロードしたら終了です。

はてなブログ-バックアップ-ダウンロ―ド

 

たったのこれだけでバックアップファイルが取得できます。

簡単すぎ!

(ちなみにバックアップファイルはテキスト形式になります)

 

使用中のテーマがhttps(SSL)配信に対応しているか調べる

はてなブログでは無料のブログテーマを公開してますが、そのすべてがhttps(SSL)化に対応しているわけではありません。

できるものとできない物があるようなのでちょっと厄介・・・

 

自分はこちらのサイトを参考にさせてもらいました!

はてなブログで人気のテーマ20種類のHTTPS化対応状況を調べてみる - FOXISM

 

https(SSL)化する方法

さて、いよいよブログをhttps(SSL)化させましょうか

 

ちなみに1度httpsにするともうhttpへは戻れないそうなので、最後の覚悟が必要です。

(といっても、いずれはやらなければならない作業なのでサクッとやっちゃいましょう。)

 

再び管理画面(ダッシュボード)→『設定』→『詳細設定』を開くと『無効 HTTPS配信状況を確認する』のリンクがあるのでそれをクリックしましょう。

はてなブログ-https配信

 

そうすると『変更する』というボタンが出てきます。

(稀にですが、はてなの対応が遅れててボタンが出てこないことがあります。数日たってから再トライしてみましょう。)

コレを押せばhttps化完了です!

はてなブログ-https配信


何も問題が無ければ『有効』の文字が表示されます。これでOKです!

はてなブログ-https配信-完了

http配信のときは警告マーク(丸に!が入ったやつ)があったのに対し

https配信になると『保護された通信』の文字が表示されます!

安心感半端ないw

http配信-保護されてない配信-警告マーク

http配信だと保護されてないので警告マークが付く

https配信-保護された配信

https配信-保護された配信

 

「https化無事終了!お疲れ様でした!」

っと言いたいところですが、本番はここからです。

マジで地味な作業が待ち構えてますから・・・

 

https(SSL)化した後にやること

さて、ここからhttps化の残作業がはじまります。

 

先程のアドレスバーの右側をよーく見てください。

盾にバツが付いたマークがありませんか?

混在コンテンツ

これは、まだhttps配信が不完全な状態であることを表してるので、調整が必要になってきます。

 

基本的に記事数に比例して作業時間が増減するので、まだ記事数が少なかったらラッキーと思って取り組んでみてください。

 

Mixed Content(混在コンテンツ)を調べる

混在コンテンツってなんぞ?って思ってしまわれそうなので説明します。

簡潔に言ってしまうと、https配信してるのにhttpから始まるコンテンツが混じってるよ~ってことです。

 

混在コンテンツの調べ方としては、混在コンテンツがあるか調べたいページで『F12』を押して、デベロッパーツールなる表示モードにします。

 

そうしたら右の方に『Console』という文字があるので、そこをクリックして詳細を確認します。

F12-デベロッパーツール-Console

tkd放浪記ではこの様な表示が出ました

しかし残念ながら、あまり具体的には書かれてないことが多いようなので、これをヒントにして混在コンテンツを駆逐していきましょう。

 

GoogleAnalytics(グーグルアナリティクス)を設定

アドレスが『http』から『https』へ変わったので、Googleアナリティクスを設定していきます。

(っといっても、クリックしていくだけの作業です。)

 

Googleアナリティクスにログインしたら、左側メニューの1番下にある『管理』をクリックします。

Googleアナリティクス-管理

 

そしたら『プロパティ設定』へと進んでいきます。

Googleアナリティクス-管理-プロパティ設定

 

そしらた『デフォルトのURL』にある『http』をクリックして『https』を選択します。

Googleアナリティクス-デフォルトのURL

 

Googleアナリティクス-デフォルトのURL-https

 

そして最後に『保存』のボタンを押せば完了です!

 

GoogleSearchConsole(グーグルサーチコンソール)を追加

Googleアナリティクスを設定したら、今度はサーチコンソール(通称サチコ)も追加しましょう!

 

やり方は以前書いた『【2018年 7月 完全版】はてなブログにGoogle Search Console導入!』を参考にしてみてください。

 

あと、サーチコンソールに登録したらサイトマップの送信もお忘れななく!

参考記事:【超簡単!】はてなブログのサイトマップ登録方法!サーチコンソールの後に!

 

SNSボタン等の確認

SNSボタンを実際に使用してきちんとhttps化されているかを確認しましょう。

もし不具合があるようでしたら、cssを修正して対応しましょう。

 

メールフォームの確認

お問い合わせはコチラ等のリンクでメールフォームを設定設定している場合、そちらもきちんと動作するか確認しておきましょう。

 

GoogleAdSense(グーグルアドセンス)やアフィリエイトの修正

アドセンスやアフィリエイトリンクの貼り替えが必要な場合があります。

とはいっても、よほど前に設置したものでない限りはhttpsに対応したリンクになっているので、もし何年も前に設置したものがあれば確認しておきましょう。

 

あと、ASPに登録しているブログのURLもついでにhttpsへ変更しておきましょう。

 

画像やリンクの『https』を『https』へ変更

さて、最後です。

これが最後の作業です。

 

いままで書いた記事内にある『http』を地道に検索していき『s』をつけ足していくだけの簡単なお仕事・・・

 

手順はシンプルです。

  1. 記事編集画面を開く
  2. 『HTML編集』の画面にする
  3. 『Ctrl+F』を押す
  4. 索ウィンドウに『http』と入力して検索

そうしたら『http』とだけ表記されているコードがちらほらあるので、語尾に『s』を追加していきます。

※『http』と検索すると『https』もヒットするので、間違って『httpss』と入力しないように注意しましょう。

 

スポンサーリンク

 

実際にやってみた結果、思わぬ落とし穴が・・・

実際に自分がやってみて思ったのは、どのくらいブログをカスタマイズしているかで時間が未知数になるということ。

 

自分の場合ですが、記事をすべて編集した後もバツ印入り盾のマークにがアドレスバーの右側からなかなか消えませんでした。

 

ブログテーマを変更してみけど効果なしだったり、css調べても駄目だったんです。

 

そこでもう1度よく混在するコンテンツの文字を見てて、カテゴリー階層化コードと同じことに気づきスタイルシートから削除した結果、無事SSL化が正常にできました!

 

終了して安心はできましたが「カテゴリー階層化どうすっぺさ」ってなってしまい、ダメもとで階層化のコードを再入力して更新したら特に不具合等起きずSSL化+階層化もできました。

 

マジ、やばくね?

 

【総評】https(SSL)化は簡単!記事数に応じて作業時間は変わる!

ブログに来てくれた訪問者のために、安心して利用できるユーザビリティの高いブログにするためには、遅かれ早かれhttps(SSL)化して保護された通信にするのは必須です。

 

 

どうせやることになるんだから、早めにやっとくべきだと自分は思います。

 

記事数に応じてhttps化の作業時間が比例するので、ブログ立ち上げ段階でやってしまうことを強くオススメします!

 

 

https化失敗 or https化が面倒くさくなってブログをつぶしてしまう方も結構いるみたいで、そんなもったいないことにならないために、今すぐにでも行動を起こしましょう!

 

それでは!

あなたへのおすすめ記事!

www.tkd-wanderer.com