GHWEB06.GRASSHOPPER

BLOG

Dreamweaverのテンプレートを使って連番のclassをつける

  • Category：Web関連 ／
  • Web関連の備忘録

list_noDreamweaverのテンプレートを使ってリスト要素に連番のclassをつけてみました。
リピート領域を使用すると表示位置の変更も簡単に出来ますので、システムを使わない構築の際に向いています。

テンプレートの設定

昇順で連番のクラスを割当て

_index は、repeat領域内での現在のエントリーの順番。
0から始まるので+1しています。

<ul>
<!-- TemplateBeginRepeat name="Repeatlist" -->
<li class="list@@(_index+1)@@">
<!-- TemplateBeginEditable name="Editlistmenu" -->
<a href="">リストメニュー</a>
<!-- TemplateEndEditable -->
</li>
<!-- TemplateEndRepeat -->
</ul>

降順で連番のクラスを割当て

_numRows は、repeat領域内のエントリーの合計です。
これから _index 分を減算すると降順になります。

<ul>
<!-- TemplateBeginRepeat name="Repeatlist" -->
<li class="list@@(_numRows-_index)@@">
<!-- TemplateBeginEditable name="Editlistmenu" -->
<a href="">リストメニュー</a>
<!-- TemplateEndEditable -->
</li>
<!-- TemplateEndRepeat -->
</ul>

テンプレートの確認

  1. DWのサイトの管理で新規サイトを設定。
  2. DWの空白ページで上記ソースを貼り付ける
  3. ファイルから「テンプレートとして保存」を選択して、先程作成したサイトを選択して保存。
  4. ファイルから「新規」を選択。
  5. 「テンプレートから作成」を選択。
  6. サイト欄から作成した「サイト」を選択。
  7. サイトのテンプレート欄から「テンプレート」を選択。
  8. 「作成」ボタンをクリック。
  9. デザインビューでリストの＋をクリック。
  10. コードビューで確認。
RELATED ARTICLE
  • 掲載: