decoの凸凹Everyday7

ギフテッド、マイノリティとして生きる。生活の知恵探しブログ。凸凹な日常での発見・悟り・考えていることを綴ります:)。

はてなブログサイトのSSL化(HTTPS化)と、調整作業諸々


Hatena

 

 

 2018年9月より、ChromeよりSSL化されていないサイトにアクセスしますと

全ページ表示で「保護されていません」

と表示されるようになるそうです。

1.サイト「保護されていません」警告について

mtame.jp

promonista.com

 

 

 今までは、「https」化されていないサイトにアクセスすれば、アドレスバーの左側にびっくりマークが表示されるだけだったのですが、7月になりますとびっくりマーク+「保護されていません」文字の同時表記になるそうです

 そして、9月には全ページにて「保護されていません」警告を出すとのこと!

 

 なのでdecoも慌ててブログのSSL化を行いました。

 

2.SSL化には費用がかかるの?

 個人でサーバーを申し込んで使用される場合、SSL化するには費用がかかってしまいます。

 decoがドメインを取得されたサイト「www.お名前.com」(www.onamae.com)からSSLを取得する場合、何と半年で24,000円かかるそうな!

 今は割引中ですが。

f:id:gifteddecoboko:20180630145836j:plain

画像元:https://www.onamae.com/option/ssl/onamaessl/

 

 しかし、はてなブログを使用される場合、ドメインは独自でも、

証明書を独自で用意する必要はないようです。

 

※ドメインの証明書は外部サービスを利用した自動取得を検討しており、独自にご用意いただく必要はありません。また、独自に取得した証明書を利用できる機能を提供する予定もありません。

staff.hatenablog.com

 

 た...助かったーーー!!!

 

 なので、私達はただブログのhttps配信を有効にするだけで、SSL化を簡単に行えることができます

 

3.SSL化を行う前に

  ブログのバックアップを行いましょう!

 decoの場合、なんともなかったのですが、念のためにバックアップしておくと良いそうです。

 

 バックアップ手順:

1.ダッシュボードにアクセス

2.左側メニューバーの「設定」をクリック

f:id:gifteddecoboko:20180630151048j:plain

3.上側にあります「詳細設定」をクリック

f:id:gifteddecoboko:20180630151156j:plain

4.下側までスクロールし、「エクスポート」項目にあります「記事のバックアップと製本サービス」をクリック

f:id:gifteddecoboko:20180630151646j:plain

5.エクスポートを行い、作成されたバックアップデータをダウンロードする

f:id:gifteddecoboko:20180630151926j:plain

 これでデータのバックアップが完了です!:) 

 

4.はてなブログのSSL化手順

 はてなブログのSSL化手順は以下です:

1.ダッシュボードにアクセス

2.左側メニューバーの「設定」をクリック

f:id:gifteddecoboko:20180630151048j:plain

3.上側にあります「詳細設定」をクリック

f:id:gifteddecoboko:20180630151156j:plain

4.アイキャッチ画像設定の下側にある「HTTPS配信」を有効にする

f:id:gifteddecoboko:20180630151329j:plain

 はい!これで完了です!

 簡単ですね!!!

 

5.SSL化後の作業

 SSL化は簡単でしたね。

 しかぁーーーーし!!!

 本当の作業はこれからだっ!

 

 なぜなら、SSL化することによって、ブログのアドレスが

http://xxxxxxxxxx.com から https://xxxxxxxxxx.com になってしまったからです!

 ということは、

記事内部で引用された記事リンク

デザイン設定で使われたブログサイトリンク

 がすべてアクセス不可能になってしまうこと!!!

 ですので、SSL化後はこれら一個一個を修正していかなければいけません!

 

(1)デザインで使われたHTML、CSSコードの編集

 こちらのHTML記述バーに編集されました全てのコードをチェックしましょう。

f:id:gifteddecoboko:20180630152534j:plain

 作業をしやすくするコツとしては、まずコードをCTRL+Aで全選択してから、CTRL+Cでコピー

f:id:gifteddecoboko:20180630174042j:plain

 

 WORDを開き、CTRL+Vでコードをワードにペーストします。

(decoのパソコンは中国語でした...見づらくてすいません;;;)

f:id:gifteddecoboko:20180630153411j:plain



 

 CTRL+Fで検索コマンドを出し、「http」と入力し、「全てを検索」をクリック。

f:id:gifteddecoboko:20180630153623j:plain

 そうしますと、「http」と書かれている部分がハイライトされます。

    それぞれの「http」の後に「s」を付けて「https」となるよう編集します。

 

 

wp-simplicity.com

wp-simplicity.com

 

 

(2)記事のHTMLコードの編集

 記事に対してもHTML編集コードを編集しましょう。

 デザインコードと同じように、ワードにコードをコピー+ペーストして作業を行えば一つ一つ探さなくて済むので、楽です~!

 ただし!HTTPS編集してはいけないものもあります!

 それはーー

HTTPS化されてないサイトのリンク

 

 引用元のサイトがHTTPS対応していない場合、HTMLコードにて無理矢理「https」と修正してしまうと、アクセスできなくなってしまいます

 これはもしデザインコード内にて他のサイトを引用した場合も同じです。

 気を付けましょう!

 

 ただし、ブログ記事画面より引用されましたアマゾンの商品紹介は全て「https」に編集する必要があります。

f:id:gifteddecoboko:20180630154341j:plain

 

(3)サイドバーのHTMLコードの編集

 サイドバーの編集も行いましょう!

 これの場合、状況によっては割愛しなければいけないものも出てきます。

 

 decoの場合、トップページに設置されていました本棚がひっかかり、「保護されていません」エラーが出てしまいました

www.gifteddecoboko.com

 

 というのは、トップページにHTTPS化されていないサイトに移動するリンクがある場合、「危ないリンクがあるサイトです!」と警告されてしまうからです

 悩みましたが、読者の皆様に不安を与えるのは良くないと思いましたので、本棚を取り消すことにしました。

 

 6.最終チェック

 「保護されているサイト」になっているかどうか、アドレスバーの左側の表示をチェックしてみましょう!

 緑色に「保護された通信」となっていれば完了です!

 それでもまだ保護されてない状態である場合は、未修正内容があるかどうかチェックしてみましょう。

 以下のサイトに修正箇所が詳しく紹介されていますので、ご参考に!

apicodes.hatenablog.com

 

 本記事の発表日時が6月30日で、7月寸前ギリギリで本当に申し訳ございませんが、9月からの全ページ警告前のSSL化対策参考となれればと思います。

 

 

>ブログ村&人気ブログランキング参加中です!<
>下記バナーをポチッとクリックしていただけましたら大変励みになります!:)<

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

にほんブログ村 ライフスタイルブログ 自分磨きへ 

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

にほんブログ村 ライフスタイルブログへブログランキング・にほんブログ村へ 

 

🌸参考しましたサイト色々。ありがとうございます!:)

happylife-tsubuyaki.hatenablog.com

www.koko269.com

www.alpha-omega-hateb.com

 

f:id:gifteddecoboko:20180630160305j:plain

(画像元:http://www.sccnn.com