Chrome系Webブラウザ「Google ChromeやMS Edge」がhttps接続優先にしたのでhttpで指定されたCSS(スタイルシート)が読み込まれずWebのレイアウトが崩れるのをなんとかしたい【ベースはhttpなので】

Chrome(クローム)系のWebブラウザ、Google ChromeやMicrosoft Edge等ですが最近は


Google Chrome(PC版スマホ(Android)版)で特定サイト(特定URL)だけSSL(httpではなくhttps)強制(2023年11月 4日(土曜日))


ChromeがHTTPSに優先アクセスする307リダイレクトをHSTS関係なくやるようになった - Code Day's Night

Webサイトのアクセス、httpよりもhttpsを優先するようになりました。Microsoft Edgeはまだそこまででもないか。

このブログの場合
【@YMCのVPSから】www.yuumediatown.com及びwww.zoidstown.comサーバー移転時の新サーバー検討の話【mixhostの共有レンタルサーバーへ】(2023年9月 2日(土曜日))
古いレンタルサーバーサービス(@YMCの相当古いプラン、今はYMCはなくなりGMOに吸収されましてそちらの普通のプランなら古くはありません)からmixhostにサーバー移転してからhttp接続もhttps接続もいけるようになりました。
当ブログの場合なら
http://www.yuumediatown.com/diary/blog01/
でも
https://www.yuumediatown.com/diary/blog01/
でもどちらでもアクセスできるわけです。

ただhttpsで接続するとスタイルシート(CSS)が読み込まれず、ブログのレイアウトが崩れてしまいます。
httpsでアクセスするとhttpで指定されたスタイルシートを読み込まない為、崩れるレイアウト
サイトの内容は確認できるもののできればhttp接続時と同様、きちんとしたレイアウトで表示されてほしい。時代も時代なんだからもう完全にhttpsに移行しちゃえばええやんか、とも思いますが従来のコンテンツもあるしまあ最悪、置換すりゃいいんだけど個人のWebサイトでSSLまでいるか?とか思いつつ面倒なのでサイトの基本はhttp前提で作成しております。というか画像とかその他ファイルはパスがhttpでもちゃんと表示してくれてんのになんでCSSだけは読み込まないかな?カナ?

強引にアドレスをhttpで入力すればhttp接続にできる事もありますが(場合によってはそれでも強引にhttps接続になっちゃう場合も、どちらにしても検索エンジン経由で当サイトにアクセスするとhttps://の接続になる可能性高し。)・・・・

でいろいろ調べていたら
httpとhttpsでのcssへのリンク指定について - ショウジンブログ on Hatena
プロトコルは省略できる

なるほど。例えば私のブログの場合、CSSへのリンク先は今は
http://www.yuumediatown.com/diary/blog01/styles.css
となっております。なのでhttpsのアドレス
https://www.yuumediatown.com/diary/blog01/
でアクセスした際はCSSが読み込まれません。
https://www.yuumediatown.com/diary/blog01/styles.css
を指定すればもちろん、CSS読み込まれます。

プロトコルが省略できるのであれば
//www.yuumediatown.com/diary/blog01/styles.css
でスタイルシートのリンク先を指定すればええのね。

<link rel="stylesheet" href="http://www.yuumediatown.com/diary/blog01/styles.css">

<link rel="stylesheet" href="//www.yuumediatown.com/diary/blog01/styles.css">
にすればいい、と。こうする事で
http://www.yuumediatown.com/diary/blog01/
でも
https://www.yuumediatown.com/diary/blog01/
修正した後はhttpsでアクセスしてもスタイルシートを読み込み通常レイアウト表示
でもちゃんとCSSが読み込まれました。

WindowsのEdge、Firefox Chrome、MacのSafari、AndroidのChrome、iPhoneのSafari、念のためEdgeのIEモード
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; Touch; rv:11.0) like Gecko
でテストしてみましたが特に問題はないようです。このテストが終わったあと、念のため前の
<link rel="stylesheet" href="http://www.yuumediatown.com/diary/blog01/styles.css">
の記述も残しておいた。スタイルシート、複数読み込まれても上段のが優先されるだけで特に問題はなさそうなので。

何年後になるかわからないけど次のサーバー移転やサイトリニューアルの時には完全SSL化、考えますかね・・・・・・

このブログ以外は
旧 ブログ トップ>YUU MEDIA TOWN@Blog

もんげーゾイドなファンサイトZOIDS TOWN.comズラ
に2023年8月~2024年2月の個別エントリまで同様の修正をしました。
あとはもうhttpでアクセスしてくれぃ。

もしくはLiteSpeedの.htaccessで
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteCond %{REQUEST_URI} ^/diary/mt001/styles-site.css
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
でCSSをhttpsにリダイレクトしてみればええべか?と旧ブログのCSSに設定してみたけど直接アクセスする分にはリダイレクトされるけど、ブログのHTML読み込むのではリダイレクトはされておらずレイアウトは崩れたままやった(旧ブログの方でテストした)。そもそもWebブラウザ Chromeがhttps://で接続した際にはhttp://で始まるCSSは読み込まないわけか・・・・・

関連
Chrome だけ SSL サイトでCSSが適用されない理由 | ミヤビッチの穴