Mother's Life

1980年代初期生まれの主婦が送る、80~90年代の女子の懐かしカルチャーをご紹介するブログ。妊娠・出産・育児ネタもついでに。

混在コンテンツ状態の解消法。折りたたみメニューが展開しないバグを修正

      2022/02/20

混在コンテンツ解消法完結編になります。(※前の記事はこちら→Part1Part2Part3

前回まででとりあえず混在コンテンツ状態は解消されたようですが、”一部のコンテンツがブロックされている”というバグのお知らせがありました。PCで閲覧する限り特にそれらしきバグはなかったのですが、スマホで閲覧するとすぐに理由がわかりました。

スマホでサイトを見るときは、ヘッダー部分にあるメニューは常時表示されず、「MENU」ボタンをタッチするとメニューが展開するようになっているのですが、これが開かなくなっていたのです。

本来ならこのように↓表示されるはずです。

余談ですが、3本線で表現されたメニューボタンをスマホサイトではよく見かけると思うのですが、こういうのをハンバーガーメニューといいます。形状が似ているからなのでしょうね。

メニューが展開しないバグの修正方法

原因となっていた箇所は、functions.phpファイル内にありました。

プログラム内に非SSLの内部リンクである「http」の記述がありましたので、「http:」を削除し「//」(スラッシュ2本)を文頭にして保存します。

ちなみにこの箇所は、JavaScriptというプログラミング言語をこのブログを動かすために使いますよ~という意味合いの記述です。

JavaScriptは主にサイトの”動き”に関わるプログラム言語で、今回バグを起こした”ボタンタップでメニューを展開”や、”「トップに戻る」ボタンで、なめらかに画面上部に移動する”といった動作などによく用いられています。

上記の書き換えを終了後、サイトを確認するとこのようにクリーンな”安全な接続”表記に変わりました。もちろんスマホサイトでメニューが開くことも確認済です。

これでブログのSSL化に伴う作業は終了です。次の記事では旧URLへのアクセスを新URLに転送する方法を解説していきます。

 - その他いろいろ, サイト作成