ロリポップで既存サイトを常時SSL化!設定の流れを解説します

しばらく前から、ロリポップで無料の独自SSLを利用することができるようになりました。

この度、私がロリポップで運営しているサイトもSSL化しましたので、その手順をメモしておきます。

バックアップをとる

SSL化作業の前に 念のためサイトのバックアップをとっておきましょう。WordPressの場合はプラグイン「BackWPUp」を使うと便利です。

ロリポップでSSL化を行う

ロリポップにログインし「セキュリティ > 独自SSL証明書導入」をクリック。

対象のドメインにチェックを入れて「独自SSL(無料)」を設定するボタンをクリック。

すると 自動でSSL設定作業がスタートし、数分~30分ほどで作業は完了します。

作業が完了したら「SSLで保護されているドメイン」タブで、対象のドメインが「SSL保護有効」になっていることを確認しましょう。

WordPressの設定

一般設定の変更

WordPressにログインし、「WP 設定 >一般設定」を開きます。

一般設定の「WordPressアドレス」「サイトアドレス」の項目のURLを「https://~」に書き換えます。

「変更して保存」すると、強制的にログアウトになりますので、再度ログインします。

記事内のURLを変更する

各記事内に記載された内部リンクのURLや、imgの画像リンクをすべてhttpsに変更する必要があります。

1記事づつ変更するのは手間なので「Search Regex」というプラグインを用いて、文字の一括置換を行います。

「Search Regex」をインストールし、有効化したら「ツール > Search Regex」をクリック。

以下の画面になったら「上段に元のURL」「下段に新URL(https)」を入力します。

「Replace&SAVE」というのが「確定」ボタンなのですが、いきなり確定してしまうと間違いがあった場合に面倒です。

そこで、まずはじめに「Replace」ボタンを押して、どのように置換が行われるかプレビューをするようにしましょう。

「Replace」ボタンを押すと、以下のように置換前後の文字列が一覧表示されますので内容を確認。

問題なければ「Replace&Save」ボタンを押して確定させます。

.htaccessでリダイレクトを設定する

続いて、従来の「http://~」アドレスでやってくる人たちを「https://~」にリダイレクトする設定を行います。

そのために.htaccessというファイルに追記を行います。

ロリポップにログインし、「サーバーの管理・設定>ロリポップ!FTP」をクリック。

当該ドメインのフォルダを開いたら「.htaccess」というファイルを開きます。

.htaccess の一番上(# BEGIN WordPressよりも上)に以下を記述します。

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

こんな感じになります。

「保存する」ボタンを押して終了です。

サーチコンソールの設定

SSL化したら、Googleサーチコンソールや、アナリティクスにその旨を通知する必要があります。

まずは、サーチコンソールの設定方法から。

サーチコンソールにログインしたら「プロパティを追加」をクリック。

「プロパティを追加」にhttpsで始まる新URLを入力し「追加」ボタンを押す。

「所有権の確認」画面になったら、「おすすめの方法」タブで「確認」を押す。※所有権の確認方法は任意の方法で構いません

所有権が承認されたらサイトマップを追加します。

自分のサイトマップが置いてある場所のURLを指定しましょう。

アナリティクスの設定

アナリティクス「管理」→「プロパティ」→「プロパティ設定」をクリック

「デフォルトのURL」の「http」を「https」に変更します。

以上で終了です。

無事にSSL化できたか確認する

ここまでで、大まかなSSL化の流れは終了です。

実際にブラウザでSSL化したサイトを表示させてみましょう。

クロームの場合は、正常にSSL化が出来ていると 以下のように緑色の鍵アイコンと「保護された通信」という文言が表示されます。

以下のように「i」マークのみになっている場合は、まだSSL化が完了していない状態です。

SSL化が出来ない原因

SSL化が完了していない理由としては以下のものが考えられます。※個別記事ごとに確認が必要です。

  • ロゴマークの画像URL
  • ファビコンの画像URL
  • コードスニペッツのリンクURL
  • ウィジェットで使用しているテキスト内のリンクURL
  • 広告バナーの画像URLなどがHTTPのまま
  • CSS内の画像リンクなどがHTTPのまま

クロームの場合、当該ページを表示させた状態で「F12」を押し「Console」部分を確認すると、問題部分を教えてくれます。

この機能をうまく活用して原因を見つけていきましょう。

コメントを残す

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