そららのクリエイティブログ

I LIKE CREATIVE.

はてなブログをSSL対応(HTTPS化)にしました。

オラァ
こんにちはです。 あっちのそららです。
前々からやろうやろうと思っていた、はてなブログのSSL対応がやっとこさ完了しました。

SSL対応とは?

SSLとは、インターネット上でのデータ送受信の際、データを暗号化して通信する仕組みです。暗号化することで、悪意のある第三者が勝手に個人情報などのデータを読み取れないようにします。

近年はインターネットやテクノロジーの急成長により、サイバー犯罪も多用且つ巧妙な手口が増えてきました。ネットの世界はそのようなハイリスクな環境と化しているので、SSLに対応しているサイトは、見る人にとっても大きな安心材料になります。

WEBサイトのセキュリティ対策には絶対必要なものなので、自分もブログをSSL対応にしました。

はてなブログでは、無料でSSLの設定が出来るので、導入して損は無いです。むしろ検索エンジンの評価が上がり、ユーザーの信頼度も上がるのでお得です。

事前準備

はてなブログをSSL対応させる手順を説明していきます。まずは事前準備から。
ほぼ保険みたいなものですが。

コードのバックアップ

CSSやHTMLを記述している場合は、メモ帳などのテキストファイルに内容をコピペして保存しておきましょう。

記事のバックアップ

記事も同様にバックアップを取ります。
はてなブログの「設定」→「詳細設定」へ進みます。

設定→詳細設定へ
SSLの設定もここで行うのですが、早まらないように!
まずは下まで行き、「記事のエクスポート」を選びます。

エクスポートでこれまでの記事をバックアップ
エクスポートすると、素人が見るとなんのこっちゃ分かんない内容のテキストファイルが作成されます。このファイルがバックアップデータなので、大切に保管しておきましょう。

テーマの確認

使用しているデザインテーマによっては、SSL対応するとデザインが大きく崩れる可能性があるそうです。

自分が使わせていただいているテーマは「Minimalism」ですが、調べた所このテーマは特に問題ないそうで、実際SSL対応にしてもデザインが崩れることはなかったので安心しました。

テーマ毎にSSL対応の結果を掲載しているサイトです。参考にさせていただきました。

foxism.jp


これで下準備は終了!
SSLの設定へ移ります。

ブログをSSL対応に

先程も出しましたが、はてなブログの「設定」→「詳細設定」へ進みます(画像使い回し…)。

設定→詳細設定へ
少し下に「HTTPS配信」の項目があります。

HTTPS配信を有効にする
初期状態ではHTTPS配信が無効、つまりSSL対応はしていない状態ですが、
ここを「有効」に変更すれば設定完了。

それだけです。数回のクリックで終わってしまう簡単設定です。
しかし、この先が細かい作業です。

URL左の鍵マーク
SSL対応になると、画面上のURL欄に閉じた鍵のマークが表示されます。
このマークが出ていれば、これ以上することはないので終了なのですが、この段階でマークが表示されない人もいらっしゃると思います。

つまり、まだSSL対応にはなっていないということ!

原因は混在コンテンツ!

httpとhttps
SSLの設定が完了すると、URLの頭が「http」から「https」に変わるのですが、ブログ内の要素全ての「http」を「https」に書き換える必要があります。
httpとhttpsが混じっている混在コンテンツの状態だと、SSLの環境が出来上がりません。

htmlやcss、jQueryといったコードの中にあるURLを全て「http」から「https」に直しましょう。
記事内の画像やリンクの中にもhttpが混じっている可能性があるので、地道にチェックし修正していきます。

ブログカード

消えているかもしれないブログカード
たまに記事に添付する、上記のような「ブログカード」。
SSL設定後に消えてしまう場合があるのでチェックし、もし消えているようなら再度貼り付けましょう(自分の場合は特に問題なかったです)。

外部のリンク

ツイッターやインスタグラムにブログのURLを記載している場合も、頭をhttpsに変更しましょう。

作業自体は難しくない内容ですが、人によっては地獄のような作業量になるため、はてなブログのSSL対応は険しい道のりです。

自分は入念にやり方や注意点を調べ上げてから実践したので、ネット上に投稿されている苦労話とは裏腹に、意外とすんなり終わりました。
これで安心して当ブログ「あっちの多趣味なそらら」を見ていただけるハズ!

記念にイラストも描きました!

パンドラ姉さんのハイキック
「オラァ!」

うちの看板娘、パンドラ姉さんの威力抜群ハイキックです。
華麗な蹴りで暗号化通信だ!

今後とも、あっちの多趣味なそららをよろしくお願いいたします。


(ハイキックのポーズと靴裏初めて描いた)

©2017 Sorara Creative Blog