イロイロひとりごと

ブログのこと 日々のことをつぶやいています

はてなブログをHTTPS(SSL化)するやり方と注意点

 当ブログには、広告・プロモーションが含まれています

はてなブログが、はてなブログ提供のドメインのHTTPSに対応しました。

そこで、当ブログもHTTPS化してみたので、そのやり方と注意点などをまとめてみます。

今後HTTPS化する場合に参考にしてみてください(*´ω`*)

 

HTTPS化してしばらく経ちましたが、メインブログはじわじわ減っていたアクセスが、じわじわ戻っているように感じます。

このブログは変化はないかな。 

 

はてなブログの公式のアナウンスはこちらの記事でご確認ください

staff.hatenablog.com

 

 

はてなブログをHTTPS配信する

はてなブログをHTTPSで配信するのはすごく簡単で、ボタン1つ押すだけで完了します。

でも、その前に確認と後に必要となってくる設定などが大変なので、時間があるときに慎重に行うことをおすすめします。

一度変更してしまうと、戻すことはできないそうなので。

 

HTTPS化の準備編

バックアップ

まずはブログのバックアップをしておきましょう。

たぶん大丈夫だけど、念の為。

記事のバックアップは、管理画面の設定>詳細設定の下のほう

エクスポート>記事のバックアップと製本サービス

からエクスポートされたものをダウンロードしてPCに保存します。

 

CSSやHTMLも後ほど弄ることになるのでバックアップをしておくと安心です!

 

 非公開ブログでテスト

デザインテーマで、混在コンテンツが発生すると、表示が大きく崩れることがあるのでご注意ください。

はてなが提供するドメインのブログで、HTTPSで配信できる仕組みの提供を開始しました(追記あり) - はてなブログ開発ブログ

テーマによって大きく崩れる場合があると脅かされたので、非公開のブログて大きく崩れることがないかテストしておきました。

無料プランは3つ、有料プランでは10個ブログが作れるので、1つテスト用に非公開ブログを作っておくと便利です。

 

私は自作テーマ(公開はしていません)を使っていますが、特にデザインが崩れることもなかったですね。

テーマによってはあるのかな?

もし崩れがある場合は他のテーマに替えてみましょう。

 

HTTPSに対応しているテーマは下記記事が参考になります。

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

 

HTTPS化する

変更の作業自体は簡単でスグに終わります。

管理画面から、設定>詳細設定の上のほうに、HTTPS配信という項目があります。

f:id:setuyakuhappylife:20180426131016j:plain

HTTPS配信の状況を確認するをクリック

 

f:id:setuyakuhappylife:20180426131010j:plain

『変更する』ボタンを押します

 

f:id:setuyakuhappylife:20180426131018j:plain

無効から有効に変わりました。

これでHTTPS配信されるようになりました。

え?これだけですよ?(笑)あっけなくHTTPS化できました。

 

HTTP配信のときはGoogleChromeでは警告のマークがありました。

f:id:setuyakuhappylife:20180426131007p:plain

HTTPS配信になると鍵マークと『保護された通信』の表示が!

f:id:setuyakuhappylife:20180426131013p:plain

 

できたー!とホッとしている場合ではありません。

まだまだ、ここからがやることたくさんなのです(;´Д`) 

 

HTTPS化後にやること

さぁ、ここからが大変です。

ページの中に、SSL化されていないリンクなどがあると『保護された通信』とならないのです。

トップページだけでなく、記事ページもすべてチェックし、リンクの貼り直しが必要になってきます。

 

f:id:setuyakuhappylife:20180426131007p:plain

f:id:setuyakuhappylife:20180427122906p:plain

検索バーの左と右にこんな警告のマークがあったらチェックが必要です。

 

混在コンテンツ(Mixed Content)の調べ方

HTTPの画像などがあると、混在コンテンツとして表示されなかったり、表示されても鍵マークが表示されません。

 

その調べ方はGoogle Chromeで、調べたいページで右クリックして検証を押すかキーボードのF12を押すと、右側に表示されます。

f:id:setuyakuhappylife:20180426135651j:plain

Consoleというところにエラー箇所が表示されるので、これをヒントに修正をしていきます。

 

Google Analyticsの設定

 f:id:setuyakuhappylife:20180426145931j:plain

アナリティクスの管理>プロパティ設定を開くと、『デフォルトのURL』という項目があります。

グレーの部分がプルダウンできますので、httpからhttpsに変更し、下の保存ボタンを押せば完了です。

 

Google Search Consoleに追加

 サーチコンソールは、『プロパティを追加』から新規に追加してください。

サイトマップを送信するのを忘れずに!

 

jQueryなどのカスタマイズ周り

f:id:setuyakuhappylife:20180427113328j:plain

カスタマイズするとjQueryを読み込んでいることがあります。

管理画面の設定>詳細設定の中の『headに要素を追加』や、デザイン>

カスタマイズのヘッダ、記事上下、フッタのHTML記述欄などを確認してください。

見つけたらhttpsに変更しましょう。

他にもカスタマイズのコードにあるJavaScriptなどのあたりも合わせて確認して。

 

ソーシャルパーツを確認

ソーシャルパーツを設置している方は、そのあたりもチェック。

特にFeedlyのボタンはhttpsにして、ちゃんと作動するか確認しましょう。

 

メールフォーム

はてなブログではメールフォームがないので、各自メールフォームを設置していたりしますよね。

私が利用していたメールフォームがHTTPS化したら作動しなくなってしまったので、これを機にGoogleフォームを使うことにしました。

プライベートと分けたかったので、新たにGoogleアカウントを取得して作りました。

やり方は割愛。

  

AdSenseやアフィリエイトリンク

新しい記事はHTTPSに対応しているので問題ないことが多いのですが、結構前に設置したものは対応していないので、貼り替えが必要です。

Amazonアソシエイト、楽天アフィリエイト、A8.net、もしもアフィリエイト、バリューコマースなどなど。カエレバ、ヨメレバなどもお忘れなく。

 

画像やリンク

各ページにある画像や、リンクもHTTPSに対応させましょう。

はてなブログの場合はfotolifeのリンクになりますが、2016年以前の古い物は記事のHTML編集で見るとhttpsになっていませんでした(´・ω・`)

ちまちま『s』を入力する日々です(;´Д`)

f:id:setuyakuhappylife:20180426131022p:plain

 

リンクに関してもHTML編集で確認しながら作業していきます。

外部サイトの場合、まだHTTPS対応していない場合もあるので、そのあたりも確認しながら行いましょう。

 

f:id:setuyakuhappylife:20180426131004j:plain

はてなブログのブログカードがHTTPS化後は、表示がされなくなってしまっていたので、httpの部分をhttpsにしていきます。

f:id:setuyakuhappylife:20180426131001j:plain

これをすれば、ちゃんと表示されるようになりました。

 

HTTPS化のまとめ

HTTPS化するのはボタンひとつであっと言う間にできますが、そのあとの作業が膨大です(´;ω;`)

記事が少なく新しいブログはいいのですが、記事もそこそこあって古い記事もあるメインブログは、実はまだ完全にはHTTPS化できていないのが現状です。

 

まずはトップページに鍵マークが出るようにして、そこから記事ページをひとつずつチェックしていくことになると思います。

記事が表示されなくなるわけではないので、ついでにリライトしたり、リンクを貼り替えしたりしながら少しずつ気長に進めましょう!

 

シロマさんが一括置き換えツールなるものを作ってくれています。

はてなブログ用の一括置換ツールを作りました - NO TITLE

失敗するとリンク切れを起こしたりするそうなので、慎重に。

私はビビりなので使えませんでした(;・∀・)

ご紹介だけしておきます。

 

やることはこんなところかな。

また思い出したら追記します。

これからHTTPS化する方、大変だけどがんばってねー(*´∀`*)

 

なぜかテーマの変更と同時にやってしまって、めちゃくちゃ大変だった…。

©2014イロイロひとりごと。
当ブログに掲載されている画像を、無断で他サイトへ転載することはご遠慮ください。 文章を引用する際は、引用元として当ブログURLを記載ください。