さくらサーバSSL化の注意点(301リダイレクト設定,レイアウト崩れ対処)

Pocket

今回は、さくらのレンタルサーバ スタンダードプランでのSSL化にあたっての内容で

環境

  • さくらのレンタルサーバ スタンダードプラン
  • 独自ドメイン、ワードプレス
  • 無料SSL証明書「Let’s Encrypt」簡単設定機能を活用して取得済み

です

301リダイレクトは.htaccessファイルにファイルマネージャーで直接手動記述するやり方です

さくらSSL化注意点

 

〜〜項目〜〜〜〜〜〜〜〜

❤︎1、さくらのサーバはSSL設定するとレイアウトが崩れる?

❤︎2、さくらのサーバはリダイレクトコードが普通のと違う

〜〜〜〜〜〜〜〜〜〜〜

スポンサーリンク

 

❤︎1、さくらのサーバはSSL設定するとレイアウトが崩れる?

まず私の環境では “無料SSL証明書「Let’s Encrypt」簡単設定機能” でSSL設定したら、

 

トップページ以外すべてサイトのデザインレイアウトが崩れましたw

 

最近よくそういうサイトを見かけていましたがきっとこれだったのかな?笑

なんかよく理由はわかりませんが笑 調べてみるととにかく同じようになってる方が無数にいるようですね笑

これについては、wp-config.phpに記述が必要という記事がたくさんあったので私もやってみました

 

下記の2パタンの記述のどちらでもレイアウトは通常に戻りました

wp-config.phpファイルに以下を記述(先頭に追記)

if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
    $_SERVER['HTTPS'] = 'on';
    $_ENV['HTTPS'] = 'on';
    $_SERVER['HTTP_HOST'] = 'あなたの私のドメイン';
    $_SERVER['SERVER_NAME'] = 'あなたの私のドメイン';
    $_ENV['HTTP_HOST'] = 'あなたの私のドメイン';
    $_ENV['SERVER_NAME'] = 'あなたの私のドメイン';
}

 

か、これ↓

if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
    $_SERVER['HTTPS'] = 'on';
    $_ENV['HTTPS'] = 'on';
}

 

 

ファイルの編集はFPTを介さないでファイルマネージャーからやってみました
※ファイルの個別バックアップとサイトの完全バックアップ取ってからやった方が良いでしょうう)

 

さくらのコンパネログイン>運用に便利なツール-ファイルマネージャー>対象ドメインフォルダの中のwp-config.phpファイルをクリック

01_さくらファイルマネ

 

左下にプレビューが出ます
右上の鉛筆タブをクリックすると編集できる画面が表示される02_さくらconfig php

 

編集画面で先頭に記述して、保存する03_config記述

         ⇧

if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
    $_SERVER['HTTPS'] = 'on';
    $_ENV['HTTPS'] = 'on';
    $_SERVER['HTTP_HOST'] = 'あなたの私のドメイン';
    $_SERVER['SERVER_NAME'] = 'あなたの私のドメイン';
    $_ENV['HTTP_HOST'] = 'あなたの私のドメイン';
    $_ENV['SERVER_NAME'] = 'あなたの私のドメイン';
}

“あなたの私のドメイン” は例えばこのサイトだと reach-rh.com ですね

 

この段階で一度サイト表示をしっかり確認する

直ってなくてもブラウザを再起動かブラウザのキャッシュ削除してみると直ってたりする

確認は何か記述するたびに都度確認しないと何が原因でおかしくなったのか原因を突き止めづらくなるので一気にいろんなことをしない方がいい

 

 

❤︎2、さくらのサーバはリダイレクトコードが普通のと違う

これも何で!?先に言っといてよ!さくらさん!!!!!!!!って感じですが、、、

どうやら公式ではないようです

ですが通常のリダイレクトの記述ではリダイレクトしないようです

で、

色々試してみましたら下記の記述で301リダイレクトできましたw

888888888888888888888888888👏

 

さくらのサーバスタンダード&ワードプレスでの.htaccessの301リダイレクトコード

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://あなたのわたしのドメイン/$1 [R=301,L]
</IfModule>

 

RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$

は、SSLアクセスでのさくらサーバ特有の変数のようで、一般的な記述ではリダイレクトされない

 

これもファイルマネージャーから直接編集してみました
(.htaccessファイルは重要なファイルなので.htaccessファイルを個別にと、サイト全体の完全バックアップをしてからいじった方が良いのでご注意をば….軽い気持ちで書き換えたり内容を削除したりするとサイト自体が表示されなくなったりします…..)

 

下図のように対象ドメインフォルダをクリック>その中の.htaccessをクリック>プレビューの鉛筆マークをクリック>編集エディタを開いて先頭に追記>保存

05_htaccessさくら301リダイレクト記述

 

先頭に追記→保存
06_さくら301リダイレクト記述-

            ⇧

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://あなたのわたしのドメイン/$1 [R=301,L]
</IfModule>

さくらのサーバスタンダード&ワードプレスでの.htaccessの301リダイレクトコード

 

私の環境ではこれらでレイアウト崩れも治り、301リダイレクトもできました

301リダイレクトチェックにはこのサイトさんでできます
▷http://ohotuku.jp/redirect_checker/

 

 

記述内容の参考にさせていただきましたサイトさんありがとうございます
<(_ _)>

WordPressをhttps化する方法とさくらサーバーでの注意事項|ウェブタタン

さくらでURL正規化を正しく行うSSLの設定方法|はるかのひとりごとTM

 

ってことで楽しいクリエイティブあれ!

しゃらんるあぁあ❤︎

 

バグで困ったときは【teratail】に相談!

オンラインブートキャンプ WordPressコース

 

スポンサーリンク

 

REACH_rh.jam project / Creative Support
REACH_rhがあなたのクリエイトをサポートします
サポート内容をチェックしてみる ↓

rhjampj_v-min

 

❤Twitter, Facebook, G+, Feedly にて当サイト更新情報配信中です
宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

 Twitter   asset.f.logo.lg   btn_g_red_normal.png-34

follow us in feedly

 

関連コンテンツ

\(`^`)b

Pocket

コメントを残す

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

12 − 6 =