httpページを簡単https化（SSL対応）する方法

テーマ設定
2018.03.01
この記事は約3分で読めます。

Cocoonでは、httpページを手軽にhttpsサイトに対応させることができます。

以下でやり方を簡単に説明します。

＼エックスサーバー開発のWordPressテーマ／
エックスサーバー開発のWordPressテーマ

SSL対応する方法

サーバーでSSL対応機能を有効にする

まずはサーバー側でSSL対応機能を有効にします。

エックスサーバーサーバーの場合は、アドレスバーのURLをhttpsにするだけです。

Cocoonサイト（保護された通信）

その他のサーバーは、サーバーごとに設定方法があります。

検索エンジンで「サーバー名 SSL対応」で検索してみてください。

サーバー名 SSL対応
検索

WordPress設定のURLを変更する

次にWordpressの「設定→一般」画面を開きます。

設定画面の以下のURLをhttpsに変更してください。

  • WordPress アドレス (URL)
  • サイトアドレス (URL)

Wordpress設定のURLを変更する

URLはサンプルです。URLはあなたのサイトのURLに当てはめて設定してください。

テーマ設定のSSL対応を有効化

あとはテーマ設定画面を開きます。

WordPress管理画面から「Cocoon設定」を選択してください。

Wordpress管理画面からCocoon設定を選択

あとは「内部URLをSSL対応（簡易版）」を有効化して保存します。

Cocoonの簡単SSL対応設定項目

これで基本的には、SSL対応は出来るようになっています。

テーマ設定で画像設定している場合は、画像ファイルのURLをhttpからhttpsに変更してください。画像の再登録でもOKです。

.htaccessの変更

あとはFTPなどで、htaccessファイルを開いて、先頭部分に以下のコードを挿入すればOKです。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
.htaccessの編集に失敗するとエラーでサイトが表示されなくなります。編集の前には必ずファイルを保存するなどしてバックアップしておいてください。

Cocoon設定の確認

Cocoonテーマをhttp環境でセットアップした場合は、セットした画像のURLはすべてhttpで保存されます。

なので、https環境にしたあとに以下の「Cocoon設定」項目を見直して、ください。

  • サイト背景画像
  • ヘッダーロゴ
  • ヘッダー背景画像
  • OGPのホームイメージ
  • アピールエリア画像
  • トップへ戻るボタン画像
  • 404ページ画像
  • AMP用のロゴ画像

もし、http URLの画像が設定されている場合は、画像再設定してhttpsにしてください。

他にもあるかもしれないので、「Cocoon設定」の画像URLが指定してある部分は全てhttps化してください。

CloudFlare等のCDNサービスを利用している際の注意点

CloudFlare等のCDNサービスを利用している場合は、うまくSSL化できない可能性があります。

症状としてはこんな感じ。

  • SSL化したらページが表示されない
  • WordPress管理画面からURLをhttpsに変更したら管理画面にログインできない

これらの症状は、CloudFlare等のCDNサービスが原因の可能性が高いです。CDNサービス側でSSL化の設定を行う必要がある場合があります。

どうしてもうまくいかないようであれば、CloudFlare等を一旦無効にしてSSL化作業だけを正常に完了させることをおすすめします。その後、どうしてもCDNが必要な場合はCloudFlare等のSSL設定を確認し再設定を行ってください。

補足

この「簡単SSL対応」機能の利点はこちら。

  • とても簡単にできる
  • データベースを置換する必要がないので安全
  • 元に戻そうと思えば簡単に戻せる

難点はこちら。

  • ページを呼び出す毎にSSL対応用の置換処理が行われる
  • 置換処理の部分0.01～0.0001くらいはページ表示が遅くなるかもしれない

完全にSSL対応させる場合は、以下の記事などを参考にしてみてください。

WordPressをhttpからhttpsにSSL化した全手順まとめ（エックスサーバー環境）
エックスサーバーが独自SSLを無料かつ無制限で利用できるようになりました。 この、エックスサーバーの「ユーザー…
nelog.jp

コメント テーマの質問はフォーラムへ

  1. 布田 より:
    2018年6月4日 18:44

    こんにちは
    https化しようと試みたのですが何を間違えたのか
    サイトは出てくるのですが、記事が404エラーになってしまいます。

    プログラム知識皆無です。
    どうか助けてください。

    https://yakitorikaigyou.com/

    シーエス布田

    • わいひら わいひら より:
      2018年6月4日 21:39

      どのようなことを行ったかの詳細が書かれていないので詳しいことはわからないですが、症状を見るに以下と同じ現象ではないかと思います。
      https://nelog.jp/xserver-wordpress-htaccess
      要は、.htaccessを誤って編集してしまったのではないかと思われます。
      上記ページにある、Wordpress用の.htaccess記述を追加する必要があるのではないかと。

  2. かうたっく より:
    2018年6月4日 22:40

    こんにちは＾＾

    私もどのようなエラーが出るか、エックスサーバーで試してみた事があり、わいひらさんの上記リンク先にあるコードが抜けていると404エラーがでます。

    ただ今は1・2行目にあるサーバーIDとPHPバージョンなしで、3行目以降のコードを入れるだけで404は解消されますよ。

    もしPC側で記事内コードを入れた.htaccessファイルをFTPソフトでアップロードしたのであれば、WordPressのデフォルト　# BEGIN WordPress　の項目を上書きしている可能性があるのかな？と思ったまでですが・・。

    • わいひら わいひら より:
      2018年6月5日 21:04

      確かに、今見返してみるとエックスサーバーでないことも考えて、1、2行目は不要ですね。
      記事の方も修正しておこうと思います。

  3. PS4ProNEWS より:
    2018年10月24日 17:29

    お世話になっております。
    こちらの記事を参考にサイトをhttps化を行ったのですが上手くリダイレクトされません。
    仕方ないので上記の.htaccessのコードを削除し、mixhostのCパネルからリダイレクト設定を行ったところ無限リダイレクトにハマってしまいました。
    すぐに設定を削除しましたが解消されず、キャッシュを削除しても状況は変わりませんでした。
    mixhost様にも連絡を入れているのですが返答がないままなので、ご教示お願い致します。

    • わいひら わいひら より:
      2018年10月24日 20:40

      .htaccessコードでうまくいかなかったのは、様々な原因が考えられますが、僕が状態を確認できる環境にないため、ちょっと原因はわからないです。

  4. PS4ProNEWS より:
    2018年10月24日 18:55

    追記
    しばらく放置したら無限リダイレクトは解消されました。
    ご迷惑をおかけしました。

  5. 飯塚 より:
    2018年11月4日 15:27

    初めてコメントさせていただきます
    この度自分のサイト（テーマ：cocoon）のhttps化を試みました

    手順通り、エックスサーバーでSSL対応機能を有効にした後、WordPress設定のURLを変更するとwordpress編集画面にログインできなくなってしまいました
    いままでどおりログイン画面を表示すると、このページは表示できませんと出てきてしまいます

    自分のサイト自体は問題なく表示できるようです

    どのような原因が考えられますでしょうか
    知識が乏しくて申し訳ございませんがよろしくお願いいたします。

  6. 中村 より:
    2019年11月30日 23:33

    このサイトのWordPress設定のURLを変更するで
    httpをhttpsに変更したところ、404エラーが発生するようになり
    管理画面に遷移出来なくなりました。
    これはコアサーバーでは出来ないSSL認証出来ないのでしょうか？

    サイトにログイン出来ないのでそれ以降の設定(テーマ設定のSSL対応を有効化)
    が出来ません。どのように改善すればいいのでしょうか？
    すみませんがよろしくお願いいたします。

    現在の状態=====================
    h ttp://url/　サイトのトップのみ表示される
    h ttp://url/各サイト　404が表示される
    h ttps://url/　ドメインウェブの設定が見つかりませんと表示される
    です。
    =============================

  7. 佐藤武夫 より:
    2021年2月8日 06:45

    サーバー上ではSSL化をしているのですが、
    テーマサイドでSSL化させたくない場合はどのようにしたらいいのでしょうか？
    一部外部取得URLがHTTPのままでないと正常に動きません。
    こちらのテーマの影響かと思うのですが勝手にHTTPSに変換されてしまって外部リンク取得エラーになります。
    その他設定(簡単SSL対応)などはすべてチェックしておりません。
    試しに他のテーマにした場合は外部取得URLは(HTTP)そのまま表示されるので。
    お忙しい中恐縮ですがよろしくお願いいたします。

    • わいひら わいひら より:
      2021年2月8日 19:38

      詳しくは実際のサイトを見てみないと何とも言えないかもしれません。
      ただ、SSL化したらサイト全体だそうなるのは仕方ないかと思います。
      テーマをWordPress公式テーマなどに変更すると動作するのですか？

タイトルとURLをコピーしました