について、＜div id＞ ..＜/div＞ ＜div class＞..＜/div＞ と ＜span class＞ ..＜/span＞ で囲まれた文字列のグループが Style Sheet で #id名{..} または .class名 {.. } の { } 内の定義、フォントの種類、色、大きさ、配置等々にしたがってレイアウトされるわけです。
で、このことから、div .. /div がきちんと対応がついていないとあたりまえですがおかしくなるわけです。 このテンプレート自分でいじり始めたのですが、ある部分の id / class を消したり、入れ子の位置を変えたりといじりだしたのですが div の対応付けがうまくいっているのかどうもわかりにくいということに気が付きました。 また mt.cgi の Template 編集画面からコピーして、テキストエディターに持ってきてみてみると、大変みにくい、ぜんぜんきちんと tab なりスペースで階層がわかるようになっていません。
たとえば＜div id=hoge＞ ....＜/div＞＜div class＞....＜a href ＞＜imag＞.....＜/imag＞＜/a＞＜/＜div＞
とずらずら書くより
div id＞
＜div class＞
＜a href ＞ ...＜img ＞.....＜/img＞＜/a＞
＜/div＞
＜/div＞
で、今回とくに重要な ＜div id＞ ＜div class＜ について正しく書かれているか確認するため、簡単なスクリプトを書いてみました。 ＜span class は今回はめんどいのでパスしました。発生頻度は少ないのでこれは目で終えると思います。
このスクリプトを使うと、下の表示のように div が階層化して表示されます。 もし おかしな ＜/ div＞ は ** ＜/div＞ と表示されます、これは対になっていないといことで余計に＜/div＞ があるということです。また ＜/div＞ が最左端で終わってない場合は、＜/div＞が不足しているということです。
スクリプト div-1.sed div-tab.awk 無保証、自己責任でお使いください。
|
＞sed -f div-1 index.htm | gawk -f div-tab.awk | grep div incex.check | grep -v "div aligl" ＜div id="all"＞ ＜div id="banner"＞ ＜/div＞ ＜div id="content"＞ ＜div class="blog"＞ ＜div class="blogbody"＞ ＜div class="title"＞ ＜/div＞ ＜div class="posted"＞ ＜/div＞ ＜/div＞ ＜/div＞ ＜/div＞ ＜div id="linksleft"＞ ＜/div＞ ＜--- これは ＜ div align の対で正しい ＜div class="sidetitle"＞ ＜/div＞ ＜div class="side"＞ ＜/div＞ ＜div class="sidetitle"＞ ＜/div＞ ＜div class="side"＞ ＜/div＞ ＜div class="sidetitle"＞ ＜/div＞ ＜div class="side"＞ ＜/div＞ ＜div class="sidetitle"＞ ＜/div＞ ＜div class="side"＞ ＜/div＞ ＜div class="sidetitle"＞ ＜/div＞ ＜div class="side"＞ ＜/div＞ ＜div class="sidetitle"＞ ＜/div＞ ＜div class="side"＞ ＜div class="trackback-body"＞ ＜/div＞ ＜/div＞ ＜/div＞ ＜div id="links"＞ ＜div class="no_border_sidetitle"＞ ＜/div＞ ＜div class="side"＞ ＜/div＞ ＜div class="blogpeople_no_border_sidetitle"＞ ＜/div＞ ＜div class="blogpeople_side"＞ ＜div class="powered"＞ ＜/div＞ ＜/div＞ ＜/div＞ ＜/div＞ |