エックスサーバーで独自SSL設定し、WordPressで運営するブログのURL・サイトアドレスをhttpからhttpsに変更後、Chrome・Firefoxで安全な通信をする鍵に注意マークが重なる時があります。
SSL化が出来てないページは、このように混在コンテンツとして表示されます。
下記リンクで、これらを説明し設定してます。お済でないならどうぞ＾＾
- SSL化の必要性
- SSL設定直後のブラウザの画面
- SSL設定を始める時間
- エックスサーバーでの設定
- WordPressの記事内の内部リンクをhttpからhttpsにする手順
SSL対応するとき、鍵マークにならない・注意マークを消したいけど、どこをチェックすれば緑の鍵になり安全な通信ができるページになるか。具体的に知っておくとスムーズにhttpsに移転できるので、チェックしてくださいね＾＾
※新たにチェック・テストした時は、随時追記します。悪しからず❦
httpsに移行中に見る、混在コンテンツはどんな状態か
SSL化したら、暗号化されてないhttpをページに読み込んでいるページは、完全に保護されないため鍵マークが付きません。
保護されていないページ
ChromeSSL対応ページ：緑の鍵と保護された通信
EdgeはSSL対応時のみ鍵マークが付く
記事・ページ単位でhttpで読み込まれていれば、混在コンテンツとなり鍵に注意マークが付きます。
トップページが鍵マーク
・SSL通信になっても
- 個別のある記事には、注意マークがある。
head内のスクリプトやリンク
- <script から始まるスクリプトからhttpが読み込まれている
- <link リンクからhttpのCSSなどを読み込んでいる
内部リンクの読み込み
- http://my-domain.com 自分のアドレス内部リンク
アフィリエイトリンク
- http://af-domain.net アフィリエイトリンク
LINKSSL移行中のアフィリエイトリンク！混在コンテンツの対処
httpsでは暗号化してページを保護するけど、これら暗号化されないhttpのリンクが読み込まれていれば『混在コンテンツ』として表示されます。
混在コンテンツを確認するブラウザ
ChromeかFirefoxでアクセスし、ブラウザのアドレス欄に緑の鍵マークが付いていたら、すべてのページを別タブに表示させ確認し、注意マークが表示されてないかをチェックします。
注意マークがあれば『混在コンテンツ・httpで読み込んでいる箇所』があるので、デベロッパーツールF12キーで確認しコンソール・Consoleを開いて、修正します。
Ctrlキー+altキー+cキーでChrome・Firefoxでは要素の検証を開けます。この場合、Console・コンソールタブをクリックしたら、表示されます。
ChromeのConsoleの場所
ChromeではConsoleの内容が全て英語で書かれているので、何を書いてるか理解できません。Firefoxなら日本語で書いてあるので（後述）、対応しやすいです。
Firefoxのウェブコンソールの場所
Firefoxで要素の検証デベロッパーツールで確認すれば分かりやすいですよ。
Firefoxで、混在コンテンツの確認方法
パソコンのFireFoxでトップページを開き鍵マークになっていれば、すべてのページをチェックしてください。
鍵に注意マークがあればCtrlキー（Macはコマンド）+altキー+ｋキーを同時に押して要素の検証画面を開きます。
これでどこを改善すれば鍵マークが付くか確認できます。
安全なページでない混在表示コンテンツが並んでますが、httpsとなっているので、一度キャッシュを削除します。
https対応させたのに、反映しないときの対処
httpsにしたのに反映せず、混在コンテンツのままの時は、ブラウザが古い情報を表示させてるので、キャッシュを削除してください。
画面右上にある≡設定マーク、オプションを順にクリック。『プライバシー』、『最近の履歴を消去』をクリック。
『キャッシュ』を選択して、『消去』してください。
キャッシュを削除すれば、改善が必要な混在コンテンツが残るので、作業中おかしいと思ったらキャッシュを削除！
コンソールの見かた・内容をチェックする
キャッシュをクリアしたら、画面のように混在コンテンツの項目をチェックします。
- 一番下、戻るボタンがhttp://…/modoru.png、301 となって混在コンテンツと表示
- 四角で囲まれた間を見るとhttps://…/modoru.pngを読み込んでる
これは、CSSでhttpの戻るボタンを読み込んでいるからです。画像のパスがhttpsでもCSSやPHPファイルがhttpのままなので、WordPressの管理画面で書き換えるワケです。
こうして混在コンテンツを1つずつなくしていくと、鍵マークが付きます。
CSS・PHPファイルの画像やリンクの変更も必要なとき
記事内の自分のドメイン、http://domain.comをhttpsにWordPressで内部リンクをhttpからhttpsに変更したけどで、混在コンテンツが出るなら記事以外のCSS・PHPファイルなどでhttpを読み込んでます。
WordPressのテーマ（子テーマ）で編集したPHP・CSSファイルに、httpから始まる内部リンクを書いてないか、ファイルをチェック。
※リダイレクトされる工程を省くだけでなく、鍵マークを付けて安全な通信SSL対応するため
- 内部リンクのhttpでの指定をhttpsに
例えば404.php・500php・list.php（記事が見つからない・表示できない時用ページ）で、自分のページ紹介するカスタマイズをしているとき
- http://my-domain.com/hogehoge/を
- https://my-domain.com/hogehoge/に修正
- style.css、editor-style.css（スタイルシート内のhttpの記載）
画像（パス・URL）などで、http://my-domain.com/・・・pngと記載があれば、httpで表示され混在コンテンツに。
- https://my-domain.com/・・・pngに変更
安全なページ上で (安全でない) 混在表示コンテンツ “https://bibabosi-rizumu.com/wp-content/uploads/2015/05/modoru80.png” を読み込んでいます
安全なページ上で (安全でない) 混在表示コンテンツ “http://bibabosi-rizumu.com/wp-content/uploads/2015/05/modoru80.png” を読み込んでいます
このように混在コンテンツとしてコンソールに表示されます。2つ読み込んでいるのは、httpの方はCSSで指定した分が読み込まれてます。
- スタイルシートをhttpsに変更して保存してください。
対応後、反映しない場合はキャッシュを削除してくださいね＾＾
- ad-mobile-in-body.php（アドセンス禁止ページにアフィリエイトリンクがある例）
アドセンスで分岐タグに、http://から始まるアフィリエイトリンクをhttps://または、//に変更
外部リンクはSSL対応・未対応か不明なばあい、httpsなどでアクセスできるか確認して置換してください。リンク切れを起こしたくないので。
編集したファイルはバックアップフォルダと別に作成して下準備しhttpsに変更して保存、該当の場所へアップロードしたので、簡単に変更できましたよ＾＾
https化したCSS・PHPファイル
FTPソフトでhttpからhttpsに変更したファイルをアップロード
カスタムCSSで指定した、画像のパスがhttpで混在コンテンツ
カスタムCSSは、記事毎にスタイルを指定してCSSを書いている場合、Search RegexでPost contentで置換していても、head内でスタイル指定しているから反映しません。
- 画像のパスなどをhttp://hoge.com/…pngで指定
- コードにURL・パスを入れていたらhttpsに変更
url(http://bibabosi-rizumu.com/wp-content/uploads/・・・.png); /*上記を下記のように変更*/ url(https://bibabosi-rizumu.com/wp-content/uploads/・・・.png);
WordPressプラグイン『Search Regex』で混在コンテンツを探す
カスタムCSSはポスト コンテンツでは表示できないので、ダッシュボードのツールより、Search Regexをクリックして、Sauceを『Post meta value』に変更します。
- http://your-domain.com、あなたのURLで検索
Search RegexでSearch patternを入力して検索（Search）をクリックした画面
Search検索したら235件など、沢山ヒットするので内容を確認したら、ちいさな画像もある様子…。
ビューポストやエディタで管理画面やポストの混在コンテンツを確認
この赤文字の記載をコピーして管理画面にのテキストエディタを開いて、contキーFキーでページ内検索してhttpsにかきかえてください。
- 直接エディタへ向かえるのでHTMLを確認
- httpsに書き換わっているものもある
- 該当ページへ向かいカスタムCSSを変更
- 数が多い場合
- カスタムCSSをローカルのテキストエディタにコピペ
- http://domain.com を、https://domain.com に置換
- コピーしてカスタムCSSに貼り付け、更新
記事・画像が多くて、プラグインのエラーが出た時の対処
変換プラグイン記事多いとエラーを吐く
私は画像を変えてから内部リンクを変える２段階でできました
このようなDMをいただきました。対処する手順は下記のとおり
- 画像のみSSL対応
置換前：http://your-domain.com/wp-content/uploads/
置換後：https://your-domain.com/wp-content/uploads/
your-domain.comには、あなたのドメインを入れて、画像フォルダのみ置換してください。
置換前・置換後の書く場所
- 内部リンクのみSSL対応させる
画像のSSL対策が終わり、内部リンクの数が減ったところで、先ほどのアドレスを入力してSearchで確認後、置換Replace & Saveしてください。
置換前：http://your-domain.com
置換後：https://your-domain.com
外部httpの読み込みで、SSL対応できない時の対処
混在コンテンツが外部リンクのとき、SSL対応済みなのかどうかを確認してから対処しないとリンク切れを起こすことも考えられます。※SSL未対応の外部httpなのに、httpsと書き換えたら、リンク切れを起こす。
その他の外部リンクはhttpsでSSL対応しているか、//アドレス.net、https://アドレス.netなどで実際アクセスして確認してください。
httpのリンクが混在コンテンツとなって、鍵マークがつかないから//・https://など…とSSL対応させて修正するワケです。
アフィリエイトで私が対応したものや、SSLの対応方法などチェックしてください。
LINKSSL移行中のアフィリエイトリンク！混在コンテンツの対処
head内のlinkにhttpのサイトが読み込まれている
head内リンクで外部CSSを読み込んでいる場合、そこにhttp://ページを読み込んでいると、混在コンテンツとしてブロックされたので、チェックしてください。
- header.php（httpから始まるリンクの読み込み）
<link rel=”stylesheet” type=”text/css” href=”http://csshake.surge.sh/csshake.min.css”>など、リンクで外部から読み込むものも、混在コンテンツになります。
画面上、リンクでhttpの外部CSSを読み込んだ例
※削除するか、//csshake.surge.sh/csshake.min.cssに変更するなどの対応をする。
head内のスクリプトにhttpが読み込まれてる
使っているプラグイン、head内解析コードなど<script …で読み込まれます。暗号化されないhttpからはじまるURLで許可されないものがブロックされます。
- httpで読み込むプラグインとか
- 解析などのスクリプトの読み込み
私の場合はヒートマップの解析Ptengineがhttpで読み込んでいたので、無くても良いや！って事でとりあえず削除して対応しました。
絶対必要であれば、上記のように//hogehogeで正常にアクセスできたり、機能するか確認して対応してください。
プラグインが出力している画像がhttpのとき
私の環境では『Download Manager』が出力する画像が原因でした。
安全なページ上で (安全でない) 混在表示コンテンツ “http://domain.com/wp-content/plugins/download-manager/assets/file-type-icons/html.png” を読み込んでいます
『Search Regex』で検索してソースを『Post meta value』にするとプラグインが読み込んだ画像が検索でヒットしました。
- Sauce
- Post meta value
あとは混在コンテンツの画像のパスをサーチパターンに入力して検索
- Search pattern
- プラグインのhttpから、はじまる画僧のパス
- 検索『Search』をクリック
httpsに変更したパスを下記のように入力
これで書き換え完了です＾＾
ページに行くと鍵マークが付いてるので確認してください。（付いてないとき、キャッシュの削除）
コンソールのメッセージで、放置しても鍵マークが付くもの
エラーが出ているように思ったけど、鍵マークが付くメッセージもコンソールで確認できます。それが何か探す時間がもったいないので、記しておきますね＾＾
追跡からの保護機能が有効なため、“https://www.google-analytics.com/analytics.js” のリソースがブロックされました。
上記は、アナリティクスjsがブロック。
追跡からの保護機能が有効なため、“https://uh.nakanohito.jp/uhj2/uh.js” のリソースがブロックされました。
上記はおそらくアドセンス広告系のものだと思われます。サーチコンソールでもブロックされたリソースでエラーが出ますが、重要度が低いので後に対処すればOK！
とりあえず放置しても鍵マークが付くものです。
このサイトはスクロールに対して配置を固定する効果が使用されています。これは非同期パンで正しく動作しない可能性があります。詳細は https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects を参照し、関連するツールと機能の議論に参加してください。
上記は、背景画像をスクロールせず固定させてるのでメッセージが出てます。放置しても緑の鍵マークが付くので、放置❦
https後、シェア数がなくなったとき戻す方法
httpsに変更したあと、SNSなどシェア数がリセットされたように見えるので、元々導入していたSNS Count Cacheの設定変更でhttpsに変更後シェア数を復活させます。
導入済みの場合
- 管理画面SNS Count Cacheの設定をクリック
- 『シェア基本キャッシュ機能欄』の『HTTPからHTTPSへのスキーム移動モード』の項目を【無効』から『有効』に変更するだけ
初期設定を済ませてない場合、ダッシュボードのプラグイン『新規追加』をクリックしたら右側『SNS Count Cache』を導入・有効化したら初期設定を済ませてください。
※上手く設定できてない場合、カウント数はわかりません＾＾；
- 数時間後に確認したら、だいたい戻ってました＾＾（数字をあまり見てなかったのでだいたい）
キチンともどったか気になる方は、はじめに数字をチェックしておくと良いですね♪
さいごに
ページ毎に鍵マークが付いたか、全ページ確認してください。トップページがSSL対応できていても、個別ページがまだ対応できてない事があるので。
LINK独自SSL設定！httpからhttpsに変更するエックスサーバーでの手順
LINKSSL移行中のアフィリエイトリンク混在コンテンツの対処
ちなみにデータベース.sqlファイルを編集してこれらの作業を一括で変更して保存したけど、エラーがでて失敗したので、急遽Search Regexを導入して混在コンテンツを検索してhttpsに変更＾＾；
テキストエディタで編集すると早いけど、エラーの修正が面倒なので、プラグインSearch Regexで公開後修正したほうが楽です＞＜
それから、サーチコンソールの設定も同時にやっておくとクロールが早かったり！アナリティクスもアドレスの変更などしてください。
LINKサーチコンソールでサイト追加の設定方法！アナリティクスと連携・httpからhttpsでSSL対応後の行程
それでは、かうたっくでした。
Comments