Blogger HTMLの編集画面が新しくなった その2 CSSコードの見つけかた

おすすめ記事ピックアップ

前記事（Blogger HTMLの編集画面が新しくなった2013年4月その1利点と残念　http://www.furimuke.com/2013/04/blogger-html201341.html）で、Blogger HTMLの編集画面が新しくなって、見やすくなったけど、コードが探しづらくなったよ。ちくしょーという記事を書きました。

探しづらいコードをどうやって探すのかコツを紹介します。もしかしたら、もっと良い方法があるのかもしれません。あったら誰か教えてください。

まずBloggerのレイアウト用のCSSコードをいじることで、レイアウトを変更できます。あたりまえ体操です。例えば、右上の赤丸部分のレイアウトを変更するとします。

ブラウザーはチョロメです。右クリックで「要所を検証」します。

ずばっと、使われているCSSコード部分が右側に表示されます。さすがチョロメ。

ブラウザー上で数値を変更すれば、見た目ですぐに変更を確認できます。これはブラウザー上だけですので、本当の変更はできません。参考としての変更です。でCSSを変更して、調度良い設定を見つけたとします。

パディングの部分を変更して、上のスペースを無意味に増やしました。

赤線部分が対応のCSS部分です。今までなら、これをHTML編集画面で検索すれば、OKだったのですが、改良で、検索が不自由になりましたので、困ったものです。とりあえず右側の赤四角部分に、CSSの行数が表示されています。

その行数を元に、HTML編集画面を探します。少し実際は下のほうにあったりします。422行ですが、440行ぐらいに、対象のCSSがありました。

まあCSSの部分なら行数から探せば、検索できなくても、だいたい見つけることができます。不便ですけでも。