Xserverで運営しているホームページをhttpからhttpsにして常時SSLする方法です。無料で設定可能です。

Googleが推奨を進めており、今後検索順位の評価要素やサイトの信頼性にも関わってくる可能性のある部分ですので、可能なサイトは順次進めて行きたいと思っています。

XserverでhttpのURLで運営している、WordpressのHPが今回の例になります。忘却録としてまとめ記事です。

※この記事は忘却録用です。内容について問い合わせサポートは行っておりませんのでご了承ください。

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

設定したいドメインを設定しているエックスサーバーのサーバーパネルにログインします。

ドメインの項目から、「SSL設定」をクリックします。

ドメインを選択

SSLを設定するドメインを選択します。

独自SSL設定の追加

SSL設定から、「独自SSL設定の追加」を選択します。

ドメイン名に「www」が付いていますが、付いていない状態で運営している場合でもこのままでOKです。

CSR情報(SSL証明書申請情報)を入力する

サイトの運営者情報を記入例に合わせて入力します。ちなみにこちらはチェックをしなくても登録できるようです。（個人のブログなどはなしで進めても良いかも？）

「独自SSL設定を追加する（確定）」をクリックします。

設定状況を確認

「SSL設定の一覧」タブをクリックすると、設定状況を確認できます。

すぐにアクセスすると、まだ反映されていない画面が表示されます。
（ブラウザはchromeを使用）

最大1時間との表示でしたが、今回はこの後15分程度で反映されました。

WordPress側の設定

通常のHPが表示され、URLは「https」となっているのが確認できましたら、次はWordpress側の設定を行います。

※この工程では、HPに記述されているURLをすべてhttpsに置き換えていきますが、Wordpressを使用していない場合も、httpsページとしてブラウザに正常に読み込ませる場合は、サイト内で使用しているhttpの表記をすべて「https」に変更する必要があります。

URLをhttpsに変更

「設定→一般」をクリックします。

アドレスを書き換え

WordPress アドレス (URL)、サイトアドレス (URL)に入力されている、「http」の部分を「https」に修正して保存します。

プラグイン_Search Regexでhttpsに置き換える

httpで運営していた既存サイトをhttps化した場合は、もう一手間必要です。サイト内で記述されているhttpの文字をhttpsに置き換えます。

記事、固定ページなどで使用しているリンク、画像ダグで記述されている「http」を「https」に置き換えます。

プラグイン【Search Regex】を新規追加して有効化します。

「ツール→Search Regex」をクリックします。

置換する文字列を入力

置換するURLと、置換後のURLをそれぞれ入力します。その他の項目は、今回の場合基本的に初期設定でOKです。

その他機能の説明（補足）

特に使わない項目もありますが、選択できる機能を説明します。

Source

Limit to

検索する上限値を決められます。対象件数がかなり多い場合は、何回かに分けて対応できる機能となっています。

Order By

検索結果の並び順を、Ascending（昇順_古い順）Descending（降順_新しい順）を設定できます。

実行ボタン

・Search

該当箇所（Search patternで入力した文字列）が何箇所あるのかを表示します。
検索するだけなので、このボタンでは置き換わりません。

・Replace

上記の該当箇所とあわせて、どのように置き換わるのか表示します。
こちらもまだ表示するだけで置き換わりません

・Replace & Save

上記のボタンで内容をチェックした後、このボタンをクリックするとデータを置き換える処理が実行されます。
一度実行するとキャンセルできないので、上記のReplaceボタンで内容を確認した後に実行しましょう。

実行後の画面

置き換わった個所が実行後に一覧で表示されます。

phpテンプレートの共通部分もチェック

この他にも、ヘッダー、フッターに記述しているリンク、画像タグなどに「http」が残っていてもダメなので、記事以外の部分でも「https」に置き換えを行います。

最後にすべてのWebページをチェック

「https」に置き換えができたページは、Chromeの検索窓のURLに「保護された通信」という文字が表示されます。すべてのページをチェクして「保護された通信」の表示されているか確認しましょう。

対応前

「https」置き換え対応後

.htaccessで301リダイレクト

301リダイレクトとは、「サイトのドメインやURLが恒久的に変わりましたよ」と検索エンジンに伝える設定です。
（ちなみに302リダイレクトは、一時的な転送）

もし古いURLやドメインにアクセスがあっても、リダイレクト（転送）を設定しておけば新しいサイト、ページに自動的に転送してくれます。

SEO的にも大事なのでぜひ設定しておきましょう。

「http」から「https」に、ドメインを変更した場合

今回は、httpsにURLを変更したので、httpへアクセスしても、httpsにリダイレクトするように設定します。.htaccessに以下の記述を追加します。

アクセス解析もhttpsに変更

ホームページでの設定ではないですが、httpのURLでアクセス解析などを使用していた場合、Googleアナリティクスやサーチコンソールで設定しているURLも「https」に変更する必要があります。

まとめ

【XSERVERでHTTPS化をしよう！無料独自SSL設定の手順】　ひとつ一つの項目はそれ程手間ではないですが、既に運営しているサイトの場合、対応する項目が多くなるので忘れずに設定しましょう。

※この記事は忘却録用です。内容について問い合わせサポートは行っておりませんのでご了承ください。

当サイトではエックスサーバーをを利用しています。Wordpressサイトの表示が速くて管理画面も使いやすいのでおすすめです。

http://www.xserver.ne.jp/

CodeCamp（コードキャンプ）

オンライン・マンツーマン指導のプログラミングスクールとしてNo.1*の実績を持つサービスをご紹介します。
（*日経トレンディ別冊調べ：調査日 2016年10月31日）

高い学習効果が評価されテレビや新聞、ビジネス誌など*多くのメディアで紹介されています。

講師は全て現役のエンジニア。未経験から確実に習得するために開発されたオリジナルカリキュラムでWebデザイン、Webサービス開発、アプリ開発などを幅広く学習することができます。

■こんな方におすすめ
・エンジニアやIT系の仕事に転職したい方
・フリーランスとして働きたい方
・忙しくてスクールに通う時間がつくれない方
・今の仕事にWebを活用したい方

■サービスのメリット
・オンラインで365日/7時〜24時迄、時間と場所を選ばずに学習できる
・レッスンは全て受講生に合わせたマンツーマン
・講師は全て現役のエンジニア
・300社以上が法人研修として導入（LINE、ガンホー、セプテーニ、ニトリなど）
・プログラミング習得後の活躍（就職/転職）を無料で支援

CodeCamp（コードキャンプ）公式サイト