ブログ運営

無料SSLを使って常時SSL化を実装する具体的な方法まとめ

投稿日:2018年5月26日 更新日:

Google Chrome(グーグルクローム)の強制的な警告表示が2018年7月24日にやってくる。

この日以降にSSLで保護をされていないページへアクセスをするとアドレスバーに『安全でない』という表示がされてしまいます。

こういった警告表示をされ続けてしまうと、貴方のサイトに対する信頼に関わってきますので、みなさん必ず常時SSLを導入しましょう。

 

■ SSLとは何ぞや?そういう方は、まずこちらから!

関連記事
無料で簡単!常時SSL(全体https化)を費用0円での実装方法

無料でできちゃうんだな!\(^o^)/

 

当ブログ(WordPress)で実装してみた!

常時SSL化をするにはhttpを全てhttpsに変更する必要があり、これは全てのページだけではなく、画像のURLも変更しなければなりません。

ブログを開設したら最初に常時SSL化をしてしまうのが好ましいですが、既に運営をしているブログの場合、これを後回しにすると後々変更しなければならないページや画像が増えてしまいますので、早急に実装してしまうのが良いでしょう。

そういう訳で早速、当ブログでも常時SSL化を実装しました。

 

共用サーバー側の設定

当ブログはお名前.comのSD-11プランを契約しているので、その場合での設定方法になります。

1.コントロールパネルへログイン

赤い四角の中にある青いログインボタンをクリック

 

2.SSL設定を選択

赤い四角のSSL設定をクリック

 

3.SSL設定 - Let's Encrypt -

  1. ドメイン選択
    画像ではドメインのところのタブが空欄となっていますが、ここに貴方が登録しているドメインの一覧が表示されますので、常時SSL化をしたいドメインを選択してください。
  2. 新規作成
    選択したドメインで間違いがなければクリックしてください。
  3. ドメイン名確認
    このドメイン名のところに選択したドメイン名が表示されます。
  4. 状態の確認
    新規作成をした直後は設定中となります。最長で約40分程で稼働中に変更となりますので慌てずに待ちましょう。ちなみに僕は5分~10分程で稼働中となりました。
  5. アクション
    ここは削除ボタンの実行のみとなります。

サーバー設定まとめ

お名前.com側の設定はこれで以上になります。SSL設定に進むとLet's Encryptの文字が現れるので安心感がありますね。また、クリックして進むだけで設定が完了するので非常に簡単です。

 

■ エックスサーバーの方はこちら

[blogcard url=”https://www.xserver.ne.jp/manual/man_server_ssl.php”]

 

■ ロリポップ!サーバーの方はこちら

[blogcard url=”https://lolipop.jp/manual/user/ssl-free-order/#p-setting”]

各レンタルサーバーの設定については、各社のサイトにそれぞれ掲載されていますので、そちらを参考にすると簡単に設定できると思います。

問題はここから先の設定かと思いますので、引き続き参考にしてみてください。

 

WordPress側の設定(各サーバー共通)

ここからの設定は各社共通となります。

エックスサーバーやロリポップ!のユーザーの方々でも参考になると思います。

 

全てのアドレス(URL)を変更する

まずは貴方のWordPressへログインをしてください。ここからURLをhttpからhttpsに変更をしていきます。

■ 一般設定のブログURLを変更する

『設定』⇒『一般』へと進みます。

  1. WordPressアドレス(URL)の変更
    この欄に貴方のWPアドレスが記載されていますが、こちらのhttpの部分だけをhttpsと直接編集してください。
  2. サイトアドレス(URL)の変更
    この欄に貴方のサイトアドレスが記載されていますが、こちらのhttpの部分だけをhttpsと直接編集してください。

これでブログURLの変更は終了です。

 

■ アイキャッチやメディア画像も全て変更する

画像のURLも全てhttpsに変更をする必要があります。

貴方のブログのメディアファイルに画像が何枚アップロードされているかによりますが、結構な数の画像をアップロードされていると思います。この画像を1枚ずつ変更していくとなると膨大な作業量になってしまいます。

そのような作業を一瞬で終わらせる為に以下のプラグインを使用します。

Search Regex

このプラグインは過去に投稿した記事の内容を一括で置換することができます。ここでは、このプラグインを使ってhttpから始まるサイトURLを指定して、httpsから始まるサイトURLに置換えます。

Search Regexをインストールしたら『ツール』⇒『Search Regex』を選択すると

上記画像の画面になりますので

  1. Search pattern
    この欄にhttpからはじまる貴方のブログURLを記入してください。
    (上記画像は記入例として当サイトのURLを記入しています。)
  2. Replace pattern
    この欄にhttpsからはじまる貴方のブログURLを記入してください。
    (上記画像は記入例として当サイトのURLを記入しています。)
  3. Search
    ①のhttpからはじまる貴方のURLが含まれるページや画像を全てリストアップします。
  4. Replace & Save
    この青いボタンを押すとリストアップした内容を全て②の内容に置換えます。

置換えが終わりましたら、しっかりと置換えが終わっているか確認の為、もう一度Searchを押して、何もリストに出てこない事を確認してください。

ここで何も出てこなければ置換えは終了です。

注意ポイント

必ず画像のようにドメインまで記入してください。

 

サイト全体の301転送設定をする

http://の貴方のサイトへアクセスした際に、https://の貴方のサイトへ301リダイレクトをかける設定です。

.htaccessファイルに直接記入する方法もありますが、僕はそれよりも簡単なプラグインを使用する方法を選択しました。

WordPress Force HTTPS

このプラグインは特に設定はいりません。

インストールをするだけで301リダイレクト設定がされますので、最後にリダイレクトチェックツールを使って、しっかりと転送されているか確認をして完了です。

リダイレクト設定確認サイト

[blogcard url=”http://tool.mface.jp/redirects/”]

 

この時点で一度確認をする

この時点で常時SSL化の実装は終わっています。

貴方のhttps://から始まるウェブサイトへアクセスをしてみてください。

正常に設定が完了していれば、下記の画像のようにアドレスバーの左横に緑色の文字で『保護された通信』という文字が出ているはずです。
(注意!この項ではGoogle Chrome(グーグルクローム)を使用した場合の表示で解説をしています。)

もし、正常に設定が完了しておらず、!マークが出ている場合はエラー箇所を探していきます。

探し方は保護されていませんとなるページでキーボードのF12キーを押して

画像の赤い四角『Console』をクリックして、黄色の部分と赤い部分がありますが、そこの黄色の部分にあるURLにhttps://ではなくhttp://と記載されているURLがありますので、それをクリックして何のページなのか?もしくは何の画像なのか?それを確認して対象の部分を編集してください。(上記画像がモザイクばかりで申し訳ありません。)

悪いところは全て手動で修正をして『保護された通信』となれば完了となります。

参考までに

僕はここで少し足止めをされました。トップページでF12キーを押して引っかかっていた場所が、右サイドバー⇒プロフィールの兎の後ろの画像がhttp://となっていて、これを書き換えてもエラーが解消されなかったので画像そのものを変更しました。これを行ったら問題なく常時SSL化が完了しました。

 

Google Analytics(グーグルアナリティクス)の設定

簡単ですぐ終わります。

常時SSL化の実装が済みましたら、みんな大好き無料アクセス解析ツールのGoogle Analytics(グーグルアナリティクス)の設定をしましょう。

Google Analyticsにログインをしたら『①管理』⇒『②プロパティ設定』⇒『③デフォルトのURL』にあるhttp://▼のタブをクリックしてhttps://に変更して一番下にある青い保存ボタンをクリックして保存する。

↓ ↓ ↓

 

次はビュー設定を行います。

『①管理』⇒『②ビュー設定』⇒『③ウェブサイトのURL』にあるhttp://▼のタブをクリックしてhttps://に変更して一番下にある青い保存ボタンをクリックして保存する。

↓ ↓ ↓

Google Analytics(グーグルアナリティクス)の設定をまとめると、管理設定ページから『プロパティ設定』と『ビューの設定』の中にあるURLのタブをhttp://⇒https://に変更するだけで完了です。

 

Google Search Console(サーチコンソール)の設定

みんな使ってるGoogle Search Console(サーチコンソール)、通称サチコさんも設定します。

こちらはすぐには終わりません。

最終的にはサチコのホーム画面は下記の画像のようになると思います。

  1. https://貴方のドメイン/を新たに登録します。
    サイトの所有権を確認して、サイトマップの送信まで済ませます。
  2. https://www.貴方のドメイン/という感じでwww.付きでもう1個サイトを登録する。
    こちらもサイトの所有権を確認して、サイトマップの送信まで済ませます。
  3. 優先するバージョンを選択します。
    ここでは一番短くてシンプルな『https://貴方のドメイン/』を選択します。
  4. ターゲットとする国を選択します。
    ここは当然ですがを選択します。

これでGoogle Search Console(サーチコンソール)の作業は完了です。

 

この作業はサチコに登録するとGoogleからくる新しい重要メッセージの中にある、こちらの内容を元に登録・設定をしています。

Google検索でのサイトの掲載順位を可能な限り引き上げるためのおすすめの方法をご紹介します。とGoogleさんが自分からそう言ってらっしゃいますので、皆さんも面倒臭がらずにしっかりと設定をしましょう。

 

実装まとめ

おつかれさまでした。

僕はここまでの作業内容で、約2時間位かかりました。

恐らく皆様が足止めをくらいそうなとこはこの時点で一度確認をするの内容だと思います。ここがすんなりと通過できれば常時SSL化はあっという間です。

アフィリエイターの方々は何個もブログやサイトを作ると思いますので、新規でサイトを立ち上げたら最初に常時SSL化をしてしまった方が良いでしょう。

最後に総括として、ザッと箇条書きにしておきます。

常時SSL実装作業一覧

  1. 共用サーバー側を設定
    (各サーバーにより内容は異なる)
  2. WordPress側の設定
    (各サーバー共通)
  3. 一般設定のURL変更
  4. 画像のURLを変更
    (Search Regexプラグイン使用)
  5. 301リダイレクト設定
    (WordPress Force HTTPSプラグイン使用)
  6. この時点で一度確認
  7. Google Analytics設定
  8. Google Search Console設定

こう見ると15分位で終わりそうですね(笑)

 

それでは、今回も最後まで読んで頂きまして、誠に有難う御座いました。

また次回の更新で会いましょう!

 

-ブログ運営
-

Copyright© ゴミ記事量産計画!! , 2018 All Rights Reserved.