おログスマートフォン用の表示で見るかつおログ低収入のサラリーマンが楽しく生きるための方法を考案するブログ。TwitterシェアするはてブFacebookTwitterGoogle+PocketPCだとブラウザ上で右クリック>「検証」を選択することで、手軽に要素の検証を行うことができます。スマホ上ではどのブラウザでも同様の機能を使うことができません。やってスマホ表示の画面の要素検証をしたらいいんだ?ということで、その手順についてまとめていきます。混在コンテンツとなっていた原因さいごにスマホ表示の要素を検証したくなった経緯まず、スマホ表示(モバイル表示)の要素を調べることになった経緯ですが、ブログのSSL化に伴い、混在コンテンツの警告が残ってしまっていたからです。やっかいなことに、PC上では全ての混在コンテンツが解消されているにも関わらず、スマホから同じページを確認すると混在コンテンツになってしまっている状態でした。要素を検証してエラー原因のアタリをつけようにも、スマホでは検証機能が使えないため調べ方が分からず途方に暮れてしまった...というわけです。手順を検索してみてもMacを用いた方法やAndroid限定の方法ばかりが紹介されていてなかなか欲しい情報に辿り着けなかったので、今回備忘録も兼ねて本記事を執筆しています。ブログをiPhoneで表示した時の要素の検証を行いたいWindows端末使用ブラウザはChromeを使用というのが今回求めていた条件です。以下、具体的な手順に移ります。iPhone表示時の要素を検証する手順まず、検証したいページを開いている状態で右クリック>「検証」(F12キーでも可)↑検証画面に切り替わりますので、Consoleタブを選択。PC表示における混在コンテンツのエラーをチェックしたいならここまででOKです。↑続いて、「なんかスマホの形っぽいアイコン」をクリック。左側の画面がモバイルサイズに切り替わりますが、内容はPC上の表示そのままだと思います。このままだとモバイル表示のエラー内容は確認できません。↑そこでF5キーなどでページの再読込を行うと、左側の画面がモバイル表示のものに切り替わり、右側のエラー内容もモバイル表示した場合のものになります。これで混在コンテンツのエラー内容を確認することができました。Content」と書かれている警告部分が混在コンテンツの原因を特定するためのヒント(というか答え)となっています。思っていたよりもずっと簡単だったので拍子抜けしてしまいました。混在コンテンツとなっていた原因ここからは蛇足になりますが、混在コンテンツのエラー内容を確認した結果、モバイル表示時のみ用いているLineのシェアボタンの画像の参照先がhttpのままになっていたことが原因でした。通りでPC上ではエラーにならないわけです。単純な作業漏れによるミスだったのですが、何回か見直しても気付けなかったので、やはりエラー内容を直接確認できるというのは便利なものですね。さいごに以上、はてなブログのSSL化に伴った話でした。ちなみに、今のところSSL化による目立った順位変動やアクセスの低下などは起きておらず、平常運転です。今回のようになかなか混在コンテンツが解消できずヒヤヒヤする点もありましたが、もっと大きなトラブルが起きるのではないかと身構えていた割には穏便に完了させることができて安心しました。はてなブログPro低収入でも楽しく生きるための方法をお金や趣味や人間関係の観点から考えるブログです。https://www.katsuolog.com/privacy-policyスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。