a{height:48px;width:48px}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}#search-menu-input:checked~#search-menu-content{-webkit-transform:translateY(20%);transform:translateY(20%)}.search-menu-content{padding-top:40px}WordPress初心者がブログ運営する上で必要なバックアップ方法。CSS・HTMLの基礎がわかるステップを丁寧に説明。コピー2017.07.03エックスサーバーで独自SSL設定し、WordPressで運営するブログのURL・サイトアドレスをhttpからhttpsに変更後、Chrome・Firefoxで安全な通信をする鍵に注意マークが重なる時があります。SSL化が出来てないページは、このように混在コンテンツとして表示されます。下記リンクで、これらを説明し設定してます。お済でないならどうぞ^^SSL化の必要性SSL設定直後のブラウザの画面SSL設定を始める時間エックスサーバーでの設定WordPressの記事内の内部リンクをhttpからhttpsにする手順LINK独自SSL設定!httpからhttpsに変更するエックスサーバーでの手順SSL対応するとき、鍵マークにならない・注意マークを消したいけど、どこをチェックすれば緑の鍵になり安全な通信ができるページになるか。具体的に知っておくとスムーズにhttpsに移転できるので、チェックしてくださいね^^※新たにチェック・テストした時は、随時追記します。外部httpの読み込みで、SSL対応できない時の対処head内のlinkにhttpのサイトが読み込まれているhead内のスクリプトにhttpが読み込まれてるプラグインが出力している画像がhttpのときコンソールのメッセージで、放置しても鍵マークが付くものhttps後、シェア数がなくなったとき戻す方法さいごにhttpsに移行中に見る、混在コンテンツはどんな状態かSSL化したら、暗号化されてないhttpをページに読み込んでいるページは、完全に保護されないため鍵マークが付きません。保護されていないページChromeSSL対応ページ:緑の鍵と保護された通信EdgeはSSL対応時のみ鍵マークが付く記事・ページ単位でhttpで読み込まれていれば、混在コンテンツとなり鍵に注意マークが付きます。・SSL通信になっても個別のある記事には、注意マークがある。アフィリエイトリンク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キー+kキーを同時に押して要素の検証画面を開きます。これでどこを改善すれば鍵マークが付くか確認できます。安全なページでない混在表示コンテンツが並んでますが、httpsとなっているので、一度キャッシュを削除します。https対応させたのに、反映しないときの対処httpsにしたのに反映せず、混在コンテンツのままの時は、ブラウザが古い情報を表示させてるので、キャッシュを削除してください。画面右上にある≡設定マーク、オプションを順にクリック。『プライバシー』、『最近の履歴を消去』をクリック。『キャッシュ』を選択して、『消去』してください。ポイントキャッシュを削除すれば、改善が必要な混在コンテンツが残るので、作業中おかしいと思ったらキャッシュを削除!コンソールの見かた・内容をチェックするキャッシュをクリアしたら、画面のように混在コンテンツの項目をチェックします。四角で囲まれた間を見ると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で表示され混在コンテンツに。読み込んでいますこのように混在コンテンツとしてコンソールに表示されます。2つ読み込んでいるのは、httpの方はCSSで指定した分が読み込まれてます。スタイルシートをhttpsに変更して保存してください。外部リンクはSSL対応・未対応か不明なばあい、httpsなどでアクセスできるか確認して置換してください。リンク切れを起こしたくないので。contentで置換していても、head内でスタイル指定しているから反映しません。value』に変更します。patternを入力して検索(Search)をクリックした画面Search検索したら235件など、沢山ヒットするので内容を確認したら、ちいさな画像もある様子...。ビューポストやエディタで管理画面やポストの混在コンテンツを確認この赤文字の記載をコピーして管理画面にのテキストエディタを開いて、contキーFキーでページ内検索してhttpsにかきかえてください。変換プラグイン記事多いとエラーを吐く私は画像を変えてから内部リンクを変える2段階でできましたこのようなDMをいただきました。置換前:http://your-domain.com/wp-content/uploads/置換後:https://your-domain.com/wp-content/uploads/your-domain.comには、あなたのドメインを入れて、画像フォルダのみ置換してください。Saveしてください。混在コンテンツが外部リンクのとき、SSL対応済みなのかどうかを確認してから対処しないとリンク切れを起こすことも考えられます。※SSL未対応の外部httpなのに、httpsと書き換えたら、リンク切れを起こす。その他の外部リンクはhttpsでSSL対応しているか、//アドレス.net、https://アドレス.netなどで実際アクセスして確認してください。httpのリンクが混在コンテンツとなって、鍵マークがつかないから//・https://など...とSSL対応させて修正するワケです。アフィリエイトで私が対応したものや、SSLの対応方法などチェックしてください。LINKSSL移行中のアフィリエイトリンク!混在コンテンツの対処head内のlinkにhttpのサイトが読み込まれているhead内リンクで外部CSSを読み込んでいる場合、そこにhttp://ページを読み込んでいると、混在コンテンツとしてブロックされたので、チェックしてください。href=”http://csshake.surge.sh/csshake.min.css”>など、リンクで外部から読み込むものも、混在コンテンツになります。※削除するか、//csshake.surge.sh/csshake.min.cssに変更するなどの対応をする。...で読み込まれます。暗号化されないhttpからはじまるURLで許可されないものがブロックされます。httpで読み込むプラグインとか解析などのスクリプトの読み込み私の場合はヒートマップの解析Ptengineがhttpで読み込んでいたので、無くても良いや!って事でとりあえず削除して対応しました。絶対必要であれば、上記のように//hogehogeで正常にアクセスできたり、機能するか確認して対応してください。Manager』が出力する画像が原因でした。value』にするとプラグインが読み込んだ画像が検索でヒットしました。patternプラグインのhttpから、はじまる画僧のパス検索『Search』をクリックhttpsに変更したパスを下記のように入力これで書き換え完了です^^ページに行くと鍵マークが付いてるので確認してください。(付いてないとき、キャッシュの削除)コンソールのメッセージで、放置しても鍵マークが付くものエラーが出ているように思ったけど、鍵マークが付くメッセージもコンソールで確認できます。リソースがブロックされました。上記は、アナリティクスjsがブロック。リソースがブロックされました。上記はおそらくアドセンス広告系のものだと思われます。サーチコンソールでもブロックされたリソースでエラーが出ますが、重要度が低いので後に対処すればOK!とりあえず放置しても鍵マークが付くものです。このサイトはスクロールに対して配置を固定する効果が使用されています。これは非同期パンで正しく動作しない可能性があります。参照し、関連するツールと機能の議論に参加してください。上記は、背景画像をスクロールせず固定させてるのでメッセージが出てます。Cacheの設定変更でhttpsに変更後シェア数を復活させます。Cache』を導入・有効化したら初期設定を済ませてください。※上手く設定できてない場合、カウント数はわかりません^^;数時間後に確認したら、だいたい戻ってました^^(数字をあまり見てなかったのでだいたい)キチンともどったか気になる方は、はじめに数字をチェックしておくと良いですね♪さいごにページ毎に鍵マークが付いたか、全ページ確認してください。トップページがSSL対応できていても、個別ページがまだ対応できてない事があるので。Regexで公開後修正したほうが楽です><それから、サーチコンソールの設定も同時にやっておくとクロールが早かったり!アナリティクスもアドレスの変更などしてください。LINKサーチコンソールでサイト追加の設定方法!アナリティクスと連携・httpからhttpsでSSL対応後の行程それでは、かうたっくでした。スポンサーリンクスポンサーリンクこの記事が気に入ったらいいね!しよう最新情報をお届けします。独自SSL設定!httpからhttpsに変更するエックスサーバーでの手順エックスサーバーでWordPressを無料で独自SSL設定して、httpからhttpsに移転しました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。個人情報の取り扱いについてはリンク先をご確認ください。他社からエックスドメインへの移管申請。エックスサーバー側の全工程2020.01.22ムームードメインから.comなど.jp以外のドメイン移管、全工程をブログで説明。Cacheの設定を変更すればOK2018.10.30タニタの体組成計が、体重しか表示されなくなったとき試すこと2018.10.26Cocoonテーマのアップロード方法!インストールなど失敗する原因・対処方法付き。/CSSセレクタ指定、HTMLタグ:親子・子孫要素をしれば装飾が反映。他社からエックスドメインへの移管申請。エックスサーバー側の全工程2020.01.22ムームードメインから.comなど.jp以外のドメイン移管、全工程をブログで説明。Cacheの設定を変更すればOK2018.10.30タニタの体組成計が、体重しか表示されなくなったとき試すこと2018.10.26Cocoonテーマのアップロード方法!インストールなど失敗する原因・対処方法付き。/CSSセレクタ指定、HTMLタグ:親子・子孫要素をしれば装飾が反映。レンタルサーバー『エックスサーバー』エンジニア特化型Q&Aサイト【teratail(テラテイル)】無料会員登録カンタン&お得に可愛くなれる♪Rcawaii─登録30秒、カワイイ洋服借り放題!プロのおしゃれテクも学べて月額9,980円タイトルとURLをコピーしました。