https化、SSL設定でレイアウト崩れた時の対処方法(さくらインターネット常時SSL化)

SSLの設定(https化)をしました。
ネットで書いてある通りにやっても正常にならなかったんですよね。。。

まず、SSLの設定???
https化って何???って思われる方もいるかと思いますので、簡単に説明します。

SSLとは

SSLは【Secure Sockets Layer】の略で、インターネット上でデータを暗号化して送受信できるプロトコルのこと。簡単に言いますと、個人情報などの送受信を暗号化する仕組みのことです。

暗号化するメリットとしては、申込み・購入の際に、個人情報やクレジットカード番号、などの大切なデータ情報をやり取りするときに役に立ちます。

SSLが導入されていないサイトでは、悪意を持った人に大切な情報を読み取られる危険があります。SSLが導入されていないサイトでの買い物は注意が必要です。同じようにあなたのサイトがネット販売をしていなくても、信用の部分で考えたら、導入している方がお客様にとっての安心感につながりますのでおすすめです。

また、SEO的にも優位に働くとも言われています。
>>Google ウエブマスター向け公式ブログ: HTTPS をランキング シグナルに使用します

手順通りやったのに。。。

私の環境

サーバー:さくらインターネット
SSL:ラピッドSSLを契約

>>さくらインターネットさんの手順はこちら

困ったこと①

ぜんぜん、httpsにならない。
登録が出来ていても、いくら時間をおいてもhttpのまま。

対処:WordPressのダッシュボードから、設定⇒一般設定

WordPressアドレス(URL)とサイトアドレス(URL)をhttp:からhttps:に変更、そして保存。

っで、表示させるとhttps:にはなったけど、今度はWordPressのレイアウトが崩れた。。。

困ったこと②

WordPressのレイアウトが崩れた。

対処:wp-config.phpに下のコードを追記

if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
$_SERVER['HTTPS'] = 'on';
$_ENV['HTTPS'] = 'on';
$_SERVER['HTTP_HOST'] = 'ak-connect.com';
$_SERVER['SERVER_NAME'] = 'ak-connect.com';
$_ENV['HTTP_HOST'] = 'ak-connect.com';
$_ENV['SERVER_NAME'] = 'ak-connect.com';
}

さくらインターネットのサーバコントロールパネルからファイルマネージャーをクリック。

ファイルマネージャーの中にあるwp-config.phpを開き、ファイルの一番上に追記して保存。

ak-connect.comの部分はあなたのドメインを入れてください

続いて、同じくファイルマネージャーの中にある.htaccessファイルに下記コードを一番上に追記し保存。

RewriteEngine On
RewriteCond %{REQUEST_URI} !^/robots.txt$
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{ENV:HTTPS} !^on$
RewriteCond %{HTTP:X-SAKURA-FORWARDED-FOR} ^$
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

以上でレイアウトは戻りました。

困ったこと③

鍵のマークが緑にならない

黄色く注意のマークが入った状態になる。

原因を調べて見るとサイト内の画像リンクがhttpのものがあると駄目でした。簡単に調べる方法としてブラウザのFirefox(ファイアフォックス)を使うと原因がわかる!

黄色の注意マークをクリックすると下記の画像のように表示されます。

右側にある>をクリック

続いて詳細を表示をクリック。

次に、メディアをクリック。

するとhttpのままになっている画像があるかと思いますので、そのメディアを消すか、入れ替えるか、する必要があるという事になります。

どこで使われているか確認し、対処してください。

メディア全てがhttpsになったら正常の緑の鍵のマークになるかと思います。

プラグインで対処(追記)

「Really Simple SSL」というプラグインを導入することにより、画像のURLをhttpsに置き換えを行ってくれるプラグインがありました。こちらをインストールし、有効化するだけで何も設定することなく、古い記事の対処も行うことができました。

まとめ

この内容は私が対処した方法なので、他にも原因がある場合は別途対処が必要になるかもしれません。また、他のレンタルサーバーでは別の対処方法となる可能性がありますので、さくらインターネットでの対処方法として見てください。

宜しければ、Facebookページに『いいね!』をお願いします


2017829 大阪・梅田
自分の魅力を発信しよう!コラボ朝食会

~タリーズ 梅田スクエアビルディング店~

コメントを残す

ABOUTこの記事をかいた人

流れ構築プロデューサー岩本あきら

起業家、サロン経営者、人気カウンセラー、セラピスト、飲食店などにブログ、SNSを使ったマーケティング、コンサルティングを行っています。WEBサイトの制作、WEBツールの活用でサポートを行っています。