XHTML 1.0 Strict 版テンプレートをカスタマイズする場合の注意事項

XHTML 1.0 Strict 版テンプレートをカスタマイズする場合の注意事項

Posted at July 31,2007 1:23 AM
Tag:[Customize, MovableType, XHTML]

Movable Type テンプレート(XHTML 1.0 Strict 版)」をご利用の方で、サイドメニューの折りたたみやツリー化等、過去のカスタマイズ記事を適用される場合の注意事項です。

XHTML 1.0 Strict 版では、サイドバーのマークアップに定義リスト(di / dt/ dd)を用いています。マークアップは、おおざっぱには次のようになっています。

<dl id="links-left">
<dt class="sidetitle">メニュータイトルA</dt>
<dd class="side">
    <ul>
        <li>メニューリストA1</li>
        <li>メニューリストA2</li>
        :
        <li>メニューリストAn</li>
    </ul>
</dd>
 
<dt class="sidetitle">メニュータイトルB</dt>
<dd class="side">
    <ul>
        <li>メニューリストB1</li>
        <li>メニューリストB2</li>
        :
        <li>メニューリストBn</li>
    </ul>
</dd>
  :
</dl>

例えば、「サイドメニューの折りたたみ」で用いているマークアップは div を用いた、次のようなマークアップになっています。また、script 要素も存在します。

<div class="sidetitle">メニュータイトルA</div>
<div class="side">
    <ul>
        <li>メニューリストA1</li>
        <li>メニューリストA2</li>
        :
        <li>メニューリストAn</li>
    </ul>
</div>
 
<script type="text/javascript">
<!--
FoldNavigtion(…);
//-->
</script>

dl の子要素として許容されているのは、dt / dd だけなので、「サイドメニューの折りたたみ」のサンプルマークアップをそのまま XHTML 1.0 Strict 版に埋め込んでしまうと、

<dl id="links-left">
<div class="sidetitle">メニュータイトルA</div>
<div class="side">
    <ul>
        <li>メニューリストA1</li>
        <li>メニューリストA2</li>
        :
        <li>メニューリストAn</li>
    </ul>
</div>
 
<script type="text/javascript">
<!--
FoldNavigtion(…);
//-->
</script>
  :
</dl>

という風になり、

  • dl 要素の子要素に div 要素は許容されない
  • dl 要素の子要素に script 要素は許容されない

といったエラーが発生し、結果的に valid な(X)HTML になりません。

このような誤ったマークアップにならないよう、

  • div 要素は dt / dd 要素に修正
  • script 要素は body 終了タグの直前に移動(どうしてもマークアップの近くに配置したい場合は script 要素を dd 要素で括ってください)

等の書き換えを適宜行ってください。

また、昨日の「Ajax によるモジュール化」では、3項の「テンプレートの内容」、

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

を、静的な表示部分(赤色)を削除して

<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>

に変更し、4項の

<div id="entries"></div>
<script type="text/javascript">
//<![CDATA[
getFile('<$MTBlogURL$>recentEntries.html', 'entries');
//]]>
</script>

に先程削除したマークアップを追加し、要素名を追加・変更して、

<dt class="sidetitle">
Recent Entries
</dt>
 
<dd id="entries"></dd>
<dd>
<script type="text/javascript">
//<![CDATA[
getFile('<$MTBlogURL$>recentEntries.html', 'entries');
//]]>
</script>
</dd>

に変更すると良いでしょう。
ただし、先程と同様、script 要素は dd で括るよりも、body 終了タグの直前に移動した方が良いでしょう。

いずれにしても、カスタマイズを行った後は下記のツールを利用して、適切なマークアップになっていることを確認しましょう。

関連記事
zenback
人気エントリー
トラックバックURL


コメント

アフェリエイトの貼り方考えたほうがよくありません?
読みづらくて仕方ありません。
さぞお小遣い稼げているんでしょうね…

[1] Posted by 読みにくい : July 31, 2007 5:16 PM

>読みにくいさん
こんばんは。
ご指摘ありがとうございました。

[2] Posted by yujiro : August 4, 2007 1:30 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)