【Xserver限定】無料でhttps化!WordPressブログに独自SSL導入してみたら?

XサーバーでWordPressのサイトを運営している人が、無料で「https」化する方法を解説します。

https化するとサイトの情報が暗号化されるので、読者さんも安心できるセキュリティの高いサイトになります。

Googleも「httpsを推奨している」ので将来的に導入した方がいいのは間違いないようですね。

 

https化(SSL)とは

 

ワードくん
う~ん。「https」ってよくわかんないな…

 

プレースちゃん
ワードくん、どうしたの?いつも以上に情けない顔しちゃって…
ワードくん
あぁ…プレースちゃん、あのね「https」化することが大事だと聞いたんだけど、そもそも「https」もよく分かってないというか…

 

ドン小東
オレを呼んだかい? ベイビー !
プレースちゃん
えっ なんでドン小西?呼んでないです…

 

ドン小東
ちが~う!オレはドン小東。WordPressの悩み事ならなんでも相談に乗るぜっ! 
ワードくん
(ベタすぎる登場パターンでかなりヒクけど…)もう、こうなったら誰でもイイや!

「https」化するには、どうやったらイイデスカ!?

ドン小東
ヨ~シ、まずはhttpとhttpsの違いから説明するぜ。(でも誰でもイイには少し傷つく…)
プレースちゃん
ちっ❗ 「https」を教えてほしいって言ってんのに…
ドン小東

まずhttpとは「Hyper Text Transfer Protocol」の略でネット上で文章や画像、音声、動画などのコンテンツ情報をやりとりするルールのことだ

さらにhttpを暗号化して安全に利用できるのが「https」

httpsは情報が暗号化されているので、盗聴やなりすましを防いでくれる

つまりURLが「https」のサイトは安全に通信できるということだ!

プレースちゃん
ドン小東って、説明がすご~い(長い)

 

 

https化(SSL)のメリット

  • 緑の鍵マークがつくことで読者さんに安心感を与える
  • サイトの表示速度が上がる
  • SEOに有利(影響はわずからしい)

 

プレースちゃん
読者さんからも、安全で信頼できるサイトになるということね❤

 

https化(SSL)のデメリット

  • 設定・修正・確認の作業が必要で手間がかかる
  • SNSボタンのカウント数がリセットされる(プラグインで解決可能)
ワードくん
うぅ… やっぱり面倒なんだ… 初心者のボクにはやっぱり無理なのかも…
ドン小東
イヤイヤ、サイトの記事が多いとこの作業にメチャクチャ時間もかかって面倒

むしろサイト作成から出来るだけ早い段階でhttpsの導入をオススメするぞ

 

私の場合、WordPressのサイトを立ち上げて、すぐにhttps化したので

修正作業はほとんどありませんでした。

 

 

プレースちゃん
もしサイトがブッ飛んでもいいように

作業をする前には必ずバックアップを取っておきましょう💕

 

 

Xサーバー独自SSL設定の申し込み方法

 

ドン小東
予習はこれくらいにして、ここから「https化」の作業に入るぜ!

画像で解説するので、説明の通りやれば難しくない!しっかりついてコイや!

ワードくん
うわ~ いよいよかぁ… ボク、うまく出来るかな…

 

【注意】ここからはXサーバーを使ってWordPressを利用している人向けの内容です。

 

Xサーバーの「インフォパネル」にログイン

https%e5%8c%961x%e3%82%b5%e3%83%bc%e3%83%90%e3%83%bc

 

 

「サーバーパネル」にログイン

https%e5%8c%962x%e3%82%b5%e3%83%bc%e3%83%90%e3%83%bc

 

 

「SSL設定」を選択

https%e5%8c%963x%e3%82%b5%e3%83%bc%e3%83%90%e3%83%bc

 

 

https化する「ドメイン」を選択

https%e5%8c%964x%e3%82%b5%e3%83%bc%e3%83%90%e3%83%bc

 

 

  1. 「独自SLL設定の追加」を選択
  2. 「独自SLL設定を追加する(確定)」をクリック
https%e5%8c%965x%e3%82%b5%e3%83%bc%e3%83%90%e3%83%bc

 

ドン小東
以上でXサーバーの独自SSLの設定は完了だ

しかーし! すぐには反映しないのでしばらく待つんだぜ!

プレースちゃん

あっ… ホントだ。「※独自SSLは追加後、サーバーに設定が反映されるまで最大1時間程度かかります」と書いてある。

ねっ、ワードくん… ? 

 

ワードくん
やったー! ボクやったよ! ひとりで出来た~!(←勘違い)

でわ、さっそく「https」のURLでもってボクのサイトにアクセス… ポチッとな!

 

↓     ↓

↓     ↓

↓     ↓

 

https%e5%8c%966%e3%82%b5%e3%82%a4%e3%83%88%e9%9d%9e%e8%a1%a8%e7%a4%ba

 

ワードくん
 …えっ? …あれっ、何が起きたの?
プレースちゃん
 … ワードのヤツ、マジ面倒くせー

 

 

かくいう私も5分おきくらい1分おきくらいにF5キーを連打しながら

待つこと約30分で反映したのでホッとしました。

 

WordPressの設定

 

ドン小東
次はWordPressの設定。ここも簡単なのでサクッと進めるぞ!

 

まずWordPressの管理画面から「設定」→「一般」をクリック。

https%e5%8c%967wordpress1

 

 

  1. WordPressアドレス(URL)
  2. サイトアドレス(URL)

両方のURLを「http」 → 「httpsに変更。

https%e5%8c%968wordpress2

 

 

どちらも「httpsになっているのを確認したら

下にスクロールして「変更を保存」をクリック。

https%e5%8c%969wordpress3

 

 

保存すると強制的にログアウトさせられるので再度ログイン。

https%e5%8c%9610wordpress4

 

ワードくん
ここまでは順調だね、なんだかできそうな気がしてきたよ!
プレースちゃん
めずらしく、ワードくんの顔に余裕がでてるし…

 

リンクと画像URLをhttpsに変更する

 

ドン小東
まだまだ続くぞ。次にやるのはサイトの内部リンクや画像のURLを「https」に変更する作業だ。
ワードくん
もし、それをやらなかったらどうなるの?
ドン小東
一つでも「http」が残ったままだと、せっかく「https化」しても安全な接続の証(あかし)「緑の鍵マーク」が表示されないぞ。

 

2016-09-22_21h57_30

(Googleクロームでの表示)

 

 

プレースちゃん
でもサイト内の「http」を一つずつ探していたら、どんだけ時間あっても足りなくない?
ドン小東
そこは心配いらん!「Seach Regex」というプラグインを使えば、サイト内のURLを検索して「http」を「https」にまとめて置換えてくれるぞ!

 

ワードくん
おお!そんな優れものがあるんならメッチャ助かります~

 

 

「Seach Regex」をインストール

 

ドン小東
「Seach Regex」をインストール&有効化する方法を説明するぞ!

 

WordPress管理画面から

  1. プラグインをクリック
  2. 新規追加をクリック
  3. 検索窓で「Seach Regex」と入力→Enterキー
  4. 「Seach Regex」を「今すぐインストール」して「有効化」する
https%e5%8c%9611wordpress5

 

 

Seach Regexで検索&一括置換

 

ドン小東
インストール&有効化が済んだら、いよいよSeach Regexに一働きしてもらおう!

 

 

WordPress管理画面からツール→Seach Regexをクリック。

https%e5%8c%9612wordpress6

 

 

  1. Seach patternには「http」のURLを入力
  2. Replace patternには「httpsのURLを入力
  3. 「Seach」をクリック
https%e5%8c%9613wordpress7

 

 

ドン小東
画面下の「Results」(検索結果)にサイト内に残っている「http」のURLが表示される。

ここで「Replace & Save」をクリックすると「https」に置き換えてくれるぞ。

https%e5%8c%9614wordpress8

 

 

プレースちゃん
なるほどね。それじゃお次は「Source」のプルダウンメニューに表示される項目を順番に「Seach」→「Replace & Save」を繰り返せばOKね。
https%e5%8c%9615wordpress9

 

 

ワードくん
どの項目を「Seach(検索)」しても「there are  no results (検索結果なし)」になったよ…
https%e5%8c%9616wordpress10
ドン小東
すべての項目で「there are  no results (検索結果なし)」が表示されたら、一応完了だ。

 

Seach Regexで変更できない項目の置換

 

プレースちゃん
↑このタイトルからするとまだ完全にhttpsに置換できてないのね!
ドン小東
うむ、残念ながら「Seach Regex」の検索をすり抜ける項目がいくつかある。

  • トップページ・アイコン・ロゴ画像
  • ウィジェット
  • グローバルメニュー
  • フッター
  • 外部リンク

などが考えられる主な項目だ。

 

ちなみに私の場合、ロゴ画像がhttpのままでした。

次項のやり方で「http」を探して、簡単に「https」に変更出来ました。

 

Firefoxで検索して修正する

 

ドン小東
Firefoxなら、どこにhttpが残っているのか調べることが可能だ。

アドレスバーにhttpsのURLを入力しEnterキーでページを表示してみよう。

 

ワードくん
鍵マークに黄色の三角マークがついてる…

これは「https」化が不完全ということだよね?

https%e5%8c%9617firefox1

 

ドン小東
そのとおりだ。ここから隠れている「http」をあぶり出しす方法を説明するぞ!

 

 

  1. 「!」マークがついている所ををクリック
  2. 表示されたウィンドウの「>」をクリック
https%e5%8c%9618firefox2

 

「詳細を表示」をクリック

https%e5%8c%9619firefox3

 

ページ情報が開くので「メディア」をクリック。

https%e5%8c%9620firefox4

 

ドン小東
この画面でhttpを探すポイントを説明しておく。

  1. 表示されたURLの中から「http」を探す
  2. 種類ごとに探すと見つけやすい
  3. 対象URLの詳細が表示される
  4. メディアプレビューに表示される画像で確認できます

 

https%e5%8c%9621firefox5

 

ワードくん
あっ…見つけた!「ロゴ画像」が原因とわかったぞ!
ドン小東
こういう時は、一度削除してから画像を入れ直すといいぞ。
ワードくん
ついに「緑の鍵マーク」になりました\(^o^)/
https%e5%8c%9622firefox6

 

この作業は記事数が多いサイトはかなり面倒だと思います。私ブログは立ち上げて間もないサイトなので修正作業も少なかったようです。

 

 

リダイレクト(自動転送)の設定

 

ドン小東

ここまでの作業で「https」のサイトが完成したが、実はhttpとhttpsの2つのサイトが存在している状態だ。

そこで「http」にアクセスした人を「https」のサイトにリダイレクト(自動的に移動)するように設定が要るのだ。

 

 

.htaccess設定

ドン小東
リダイレクトさせるために「.htaccess」を編集する。

「.htaccess」設定はコードを追加するだけで完了するが、慎重に作業が必要だ。念のためバックアップを取るべきだ。

 

 

サーバー上でコードを追加

コードを追加するのでXサーバーのファイルマネージャーにログイン

対象ドメインを選択

https%e5%8c%9623%e3%83%aa%e3%83%80%e3%82%a4%e3%83%ac%e3%82%af%e3%83%881

 

public_htmlを選択

https%e5%8c%9624%e3%83%aa%e3%83%80%e3%82%a4%e3%83%ac%e3%82%af%e3%83%882

 

「.htaccess」に到着

「.htaccess」をクリックしてダウンロードしておこう。念のため

https%e5%8c%9625%e3%83%aa%e3%83%80%e3%82%a4%e3%83%ac%e3%82%af%e3%83%883

 

 

  1. 「.htaccess」にチェックを入れる
  2. 「編集」をクリック
https%e5%8c%9626%e3%83%aa%e3%83%80%e3%82%a4%e3%83%ac%e3%82%af%e3%83%884

 

するとこんな画面になる

https%e5%8c%9627%e3%83%aa%e3%83%80%e3%82%a4%e3%83%ac%e3%82%af%e3%83%885

 

これがリダイレクト用のコード。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule>

これをコピーして

  1. 一番上に貼り付け
  2. 編集をクリック
https%e5%8c%9628%e3%83%aa%e3%83%80%e3%82%a4%e3%83%ac%e3%82%af%e3%83%886
ドン小東

これでリダイレクトはばっちりだ!

httpにアクセスしてもhttpsのサイトに自動でワープするぞ。

 

 

 

Google アナリティクスの設定

 

ドン小東

https化するとGoogleアナリティクスの設定も変更が必要だ。

カンタンなので後回しにせずにサクッと済ませとこう!

関連記事:Google Analytics(アナリティクス)をWordPressに導入する方法【初心者向け】

 

Googleアナリティクスのホーム画面→「管理」をクリック

https%e5%8c%9629%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b91

 

プロパティ設定」をクリック

https%e5%8c%9630%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b92

 

「デフォルトのURL」をクリック

https%e5%8c%9631%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b93

 

「https」を選択

https%e5%8c%9632%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b94

 

下にスクロールして「保存」をクリック

https%e5%8c%9633%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b95

 

次はビュー設定だ。

「管理」画面に戻って「ビュー設定」をクリック

https%e5%8c%9634%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b96

 

ウェブサイトのURLを「https」に変更

https%e5%8c%9635%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b97

 

下にスクロールして「保存」したら、Googleアナリティクスの設定は完了

https%e5%8c%9636%e3%82%a2%e3%83%8a%e3%83%aa%e3%83%86%e3%82%a3%e3%82%af%e3%82%b98

 

Search Consoleの設定

 

Googleアナリティクスの次は「Search Console」

作業工程は以下のとおり

  • 「プロパティを追加」→「https」のURLを登録
  • サイトの所有権を確認
  • サイトマップを送信
  • 「プロパティを追加」→「www」ありの「https」のURLを登録
  • サイトの所有権を確認
  • サイトマップを送信
  • 優先するURLを設定 wwwなしのバージョン
  • ターゲットユーザーの地域を「日本」に変更

 

ドン小東
やることは地味に手間がかかるが、これも「https」化したら必要なことだ。

関連記事:Google Search Console(サーチコンソール)の登録方法【完全図解版】

 

SNSカウント数を復活

 

ドン小東
https化すると今までのSNSカウント数がリセットされるぞ。
ワードくん
それ悲しすぎるよ!
プレースちゃん
そんな大事なこと、先に言っといてよ!

 

ドン小東
大丈夫!「SNS Count Cache」というプラグインを導入すればカウント数が復活できるぞ。

 

 

WordPressの管理画面から「プラグイン」→「新規追加」

「SNS Count Cache」をインストール→有効化

sns-c-c1

 

 

「SNS Count Cache」→「設定」をクリック

sns-count-cache2

 

 

「シェア基本キャッシュ機能」の下の方にある

「HTTPからHTTPSへのスキーム移行モード」を「有効」にして「設定の更新」をクリック

sns-c-c-3
ドン小東
これでhttps化の作業はすべて完了だ。
ワードくん
やってみると意外になんとかなるもんだね!

なんだか自信がついたよ。ありがとうドン小西!

ドン小東
…まだ、名前覚えてないんかい!
プレースちゃん
あっ… ワードくんの顔が別人になってる!

 

元銀行マンNari(なり)です。専業主夫になったひきこもりのナイスミドルです。「四十にして惑わず」のはずが、家族持ちで今だに人生を模索中です。戦国時代や歴史の考察がメインのブログ発信をやってます。

LINE@配信はじめました!
LINE@に登録

記事が面白かったらシェアしよう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です