ここの記事でも書いたように、
GoogleのChromeの右クリック、検証(I)がとても役立つのでR。
今回は、サイトのCSSで不具合があった際に、Chromeの右クリック、検証(I)で助かったので、ここに書くのでR。
WordPressでのCSSは、「外観」→「テーマ編集」の中にあるようにstyle.cssが担うのでR。ただし、時には、style.min.cssのようなファイル名で、ここにあるように、これをMinified 化といって、「Web コンテンツ最適化の手法の一つで、CSS とか JS から動作に必要のないコメントや空白を取り除きファイルサイズを削って早くしようというものです。」となっている場合があるのでR。それでcssを確認すると、Minified 化cssはほとんどスペースなどがなく、パット見一行で書かれていて、さっぱりわからないのでR。
その場合でも、
GoogleのChromeの右クリック、検証(I)がとても役立つのでR。
今回は、長らく(半年近く)レスポンシブでの不具合を見つけていたが、画面サイズにあわせて画像が縮小しない不具合があり、長らく(半年近く)困っていたのでR。それを検証(I)が助けてくれたのでR。
レシポンシブは、ここにあるように、
img{width:100%;height:auto;}
があればよいはずなのでRが、これがもともとあるテーマにもかかわらず、部分的にレシポンシブでなかったのでR。
そこで、検証(I)を使って、例えば、
のように検証(I)で、サイトのclass、id、divやら、pやら、などなどがどのように使われているかが分かり、
のようにcssの使用のチェックを外したり、あえてチェックしたりして、cssの動作も確認できるのでR。さらに、この図のように、右上を見ると、cssにはstyle.min.cssがここでは使用されていることも分かるのでR。
これをいろいろと試して、さらに、画面サイズの違いで、どこに不具合があるのかを
と→の部分を動かすことで、”画面サイズが変更していく状態”での、cssの使われ方も確認できるのでR。
これで不具合が分かり、
width:100%;
のたった一行がなかったために、不具合が起こっていたことが判明したのでR。
GoogleのChromeの右クリック、検証(I)で長らく(半年近く)レスポンシブでの不具合の原因が発見できたのでR。
実にGoogleのChromeの右クリック、検証(I)は素晴らしいのでR。
まさに
したのでR。
（広告）WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
（広告）年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─
