ロリポップでSSL設定後に鍵マークが出ない時のmixed content確認手順

ロリポップで独自SSLを設定して、ページURLは https:// になっているのに、ブラウザの鍵マークが出ないことがあります。多い原因は、ページ本体はHTTPSでも、画像、CSS、JavaScript、iframe、フォーム送信先などが http:// のまま読み込まれている状態です。

この状態は mixed content と呼ばれます。いきなり .htaccess を書き換える前に、ページがHTTPSで開けるか、どの部品がHTTPで読まれているか、サイト内のパスをどう直すかを順番に分けます。

このページで整理できること

• SSL設定の問題と、ページ内のmixed contentを分ける
• 開発者ツールでHTTP読み込みを見つける
• 画像、CSS、JavaScript、CSS内URLを安全に直す
• .htaccess のHTTPS転送を入れる前の確認順を決める
• Search ConsoleやAI相談に渡すメモを作る

鍵マークが出ない時の確認順

ページ本体をHTTPSで開き、開発者ツールでHTTP読み込みを探して、サイト内の部品をルート相対パスまたはHTTPSへ直します。最後にHTTPS統一とSearch Consoleの見え方を確認します。

1. ページ本体がHTTPSで開けるか確認する

最初に、対象ページを https:// で直接開きます。ここでページ自体が開かない場合は、mixed contentではなく、SSL設定、ドメイン設定、反映待ち、公開フォルダの問題を先に見ます。

https://example.com/path/to/page.php

HTTPSでページは開くが鍵マークが出ない場合だけ、次のmixed content確認へ進みます。

2. 開発者ツールでHTTP読み込みを探す

ChromeやEdgeで対象ページを開き、右クリックから検証、または F12 で開発者ツールを開きます。ConsoleとNetworkで Mixed Content、http://、Not secure のような警告やURLを探します。

3. サイト内の画像やCSSはルート相対パスへ直す

同じサイト内の画像やCSSを自分で管理しているなら、ドメイン付きの http:// ではなく、/assets/... のようなルート相対パスにすると、http/httpsの移行で壊れにくくなります。

<img src="http://example.com/assets/images/logo.png" alt="ロゴ">
<link rel="stylesheet" href="http://example.com/assets/css/style.css">
<script src="http://example.com/assets/js/app.js" defer></script>

<img src="/assets/images/logo.png" alt="ロゴ">
<link rel="stylesheet" href="/assets/css/style.css?v=20260612">
<script src="/assets/js/app.js?v=20260612" defer></script>

サブディレクトリ公開でCSSだけ崩れる場合は、サブディレクトリ公開でCSSパスが崩れる時の確認手順も合わせて確認してください。

4. CSS内の画像やフォントURLも見る

HTMLの img や link を直しても鍵マークが戻らない場合、CSS内にHTTPの背景画像やフォントが残っていることがあります。対象CSSを直接開いて、http:// を検索します。

.hero {
  background-image: url("http://example.com/assets/images/main.jpg");
}

@font-face {
  font-family: "SiteFont";
  src: url("http://example.com/assets/fonts/sitefont.woff2") format("woff2");
}

.hero {
  background-image: url("/assets/images/main.jpg");
}

@font-face {
  font-family: "SiteFont";
  src: url("/assets/fonts/sitefont.woff2") format("woff2");
}

5. 外部サービスはHTTPS対応を確認する

地図、動画、SNS埋め込み、古いアクセス解析、広告、問い合わせフォームの送信先など、外部サービスのURLがHTTPのまま残ることもあります。外部サービスは、自分のサイト内のように勝手に /assets/ へ変えられません。

6. ページ内のHTTP部品を直してからHTTPSへ統一する

ページがHTTPSで正常に表示され、画像やCSSのHTTP読み込みが残っていないことを確認してから、HTTPアクセスをHTTPSへ統一します。SSL設定前やmixed contentが残った状態でリダイレクトだけ足すと、原因が見えにくくなります。

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

.htaccess は設置したフォルダ以下に影響します。編集前にバックアップを取り、500エラーになった時は .htaccess編集後に500エラーになった時の確認順番へ進んでください。

7. canonical、内部リンク、sitemapをHTTPSへ揃える

ブラウザ表示が直ったら、GoogleやSearch Consoleに見せたいURLもHTTPSへ揃えます。特に、静的化やURL整理を進めているサイトでは、http版や古いURLが混ざると、正規URLの判断がぶれやすくなります。

AIに相談する時のメモ

AIへ相談する時は、FTPパスワード、管理画面URL、ログイン情報、サーバーの秘密情報を貼らないでください。ページURL、出ている警告、HTTPで読み込まれているURL、直前に触ったファイルだけで十分に切り分けられます。

ロリポップでSSL設定後に鍵マークが出ない件を相談します。

対象ページURL:

HTTPSでページ本体を開いた結果:
例: 開ける / 開けない / CSSだけ崩れる / 画像だけ出ない

開発者ツールのConsoleで見えた警告:
例: Mixed Content: The page at ... was loaded over HTTPS, but requested an insecure ...

Networkで見つけた http:// のURL:
1.
2.
3.

直前に変更したこと:
例: 独自SSLを有効化 / .htaccessを編集 / CSSや画像パスを変更 / サイトを静的化

確認したこと:
- ページ本体をhttpsで直接開いた:
- CSSファイルを直接開いた:
- 画像URLを直接開いた:
- CSS内のbackground-imageを確認した:
- .htaccessのバックアップ:
- canonicalとsitemapのURL:

FTPパスワード、管理画面URL、ログイン情報、秘密情報は伏せています。
初心者向けに、次に確認する順番を教えてください。

ロリポップへ問い合わせる時の文面

SSL設定やサーバー側の判断が必要そうな時は、確認済みの事実だけを短くまとめます。パスワードやログイン情報は送らないでください。

ロリポップで独自SSL設定後、対象ページがHTTPSでは開けますが、ブラウザの鍵マークが出ないため確認したいです。

対象ページURL:

発生している症状:
例: 鍵マークが出ない / CSSが崩れる / 画像が表示されない / http版へ戻る

確認済みのこと:
- https:// のURLでページ本体は開けます
- 開発者ツールで http:// の読み込みを確認しました
- CSSや画像の直接URLを確認しました
- .htaccessの変更有無:
- canonicalとsitemapのURL:

確認したいこと:
1. 独自SSLの設定状態に問題がないか。
2. HTTPからHTTPSへの転送設定で注意すべき点があるか。
3. サーバー側の設定やキャッシュで、HTTPS表示に影響するものがあるか。

公式情報で確認するところ

Copicodeでは初心者が作業しやすい順番に並べ替えています。SSL、mixed content、.htaccess、Search Consoleの仕様は変わることがあるため、最終確認は公式情報も合わせて見てください。

次に読む記事