Dreamweaverテンプレート機能:リピート領域の属性を個別に変更

このQ&Aのポイント
  • Dreamweaverのテンプレート機能でリピート領域の属性を個別に変更する方法について教えてください。
  • 現在、リピートされた<li>のclassを個別に変更する方法を模索していますが、アドビヘルプでは具体的な方法が見つかりません。どのようにすれば実現できるのでしょうか?
  • また、修正からテンプレートを使用した場合には属性が一括で変更されてしまいますが、個別に変更する方法はありますか?
回答を見る
  • ベストアンサー

Dreamweaverテンプレート機能:リピート領域の属性を個別に変更

はじめまして。 アドビ・ドリームウィーバーのテンプレート機能について質問です。 例--------------------------------------------- <ul> <!-- TemplateBeginRepeat name="foo" --> <li class="bar"> <!-- TemplateBeginEditable name="hoge" -->編集可能<!-- TemplateEndEditable --> </li> <!-- TemplateEndRepeat --> <li>編集できない</li> <li>編集できない</li> </ul> ・リスト1行目のみ編集可能。 ・1行目はリピート領域。何行でも増やせる状態。 例のような状態とします。 本題ですが、 リピートされた<li>のclassを個別に変更したいと思っています。 ■結果例------------------ <ul> <li class="abc"> あいうえお </li> <li class="def"> かきくけこ </li> <li>編集できない</li> <li>編集できない</li> </ul> 上記のようにするにはどのような方法があるのでしょうか。 アドビヘルプを見る限り、属性の個別変更については書かれていないようなのです。 そもそも不可能なのでしょうか? また代替案をご存じの方は教えていただけないでしょうか? 宜しくお願いいたします。 ---------------------- [修正]→[テンプレート]→[属性を編集可能にする]を使った場合、 リピート部分の属性が一括変更となってしまいました。 <ul> <li class="abc"> あいうえお </li> <li class="abc"> かきくけこ </li>... 「一括」ではなく「個別」を希望しています。 ご教授お願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • crunchs
  • ベストアンサー率100% (3/3)
回答No.1

編集可能領域を、<li>タグの外側にするのはいかがでしょうか? そうすれば、個別にクラス設定できます。 ■例---- <ul> <!-- TemplateBeginRepeat name="foo" --> <!-- TemplateBeginEditable name="hoge" --> <li class="bar">編集可能</li> <!-- TemplateEndEditable --> <!-- TemplateEndRepeat --> <li>編集できない</li> <li>編集できない</li> </ul>

hirai2008
質問者

お礼

回答ありがとうございます。 おっしゃる通りなんですが、 <li>タグ内に複雑?な固定アイテムが多い場合に困ってしまうんですよねぇ…。 質問後、私なりにいろいろ調べたのですが、 やはりNo.1さんのご提案の方法が唯一のようです。 こちらの方法でやってみます!ありがとうございました!!

関連するQ&A

  • テンプレートのリピート領域とオプション領域を教えてください

    Dreamweaverのテンプレートを使っています。だいたい編集可能領域は理解できましたが、リピート領域とオプション領域がよくわかりません。ヘルプを見ているのですが、どうにもうまく感じがつかめません。 どうかわかりやすい例を使って説明してもらえませんか?

  • Dreamweaver MXのテンプレート機能について教えてください。

    現在、Dreamweaver MXのテンプレートを使ってページを作成しています。 「編集不可タグを特定タグ属性のみ編集できる機能」について質問です。 テンプレートで作ったhtmlページに、1列・複数行あるセルを設置しています。 そのうち、一部のセルの背景(jpg画像)だけを変更したいのですが上手くいかず、 全ての背景が変わってしまいます。 一部のセルの背景だけを変更することは不可能なのでしょうか? どういう方法であれば変更することが可能なのでしょうか? よろしくお願いします。

    • 締切済み
    • CSS
  • Dreamweaverのテンプレートで編集可能領域にするには?

    Dreamweaverのテンプレートを作成しているのですが、 メタタグ、サイト紹介文のところを編集可能領域として 設定したいのですが、 <!-- TemplateBeginEditable name="head" --> <meta name="Keywords" content="キーワード, " /> <meta name="Description" content="サイトの詳細文" /> <link href="../style/style.css" rel="stylesheet" type="text/css" /> <!-- TemplateEndEditable --> このようにテンプレートに記述してページを作ろうとしても、 「編集可能にマークされていないコードに変更を加えました。これらの変更を保持しても次回の変更時に失われます」という表示がされます。 ページごとにキーワード、紹介文を変えたいのですがどうすればいいでしょうか? お力を貸してください。

  • foreach文をfor文へ変更したい(XOOPSテンプレート)

    XOOPSテンプレートの変更をしたいのですが、やり方が分かりません。 ■[内容] 現状:テーブルにある物をすべてリスト表示 ↓ 変更:リスト表示するものの上位5番目ぐらいまでのリストに、1位・2位・3位・4位・5位とのアイコンを表示させたい ↓ 方法:リスト表示に、<li class="list1">のようにclass属性を動的に付けることが出来れば、後はCSSで画像を背景に敷くことで対応できるのではないかと考えています。(フツーはどうするのか教えていただければ嬉しいです) ■[現状のコード] <ul>  <{foreach item=photo from=$block.photo}>   <li><a href="<{$block.mod_url}>/index.php?lid=<{$photo.lid}>&amp;cid=<{$photo.cid}>"><{$photo.title}></a> (<{$photo.hits}> <{$photo.suffix}>)   </li>  <{/foreach}> </ul> ■[現状の出力結果] <ul>  <li>   <a href="http://www.sample.co.jp/modules/test/index.php?lid=2&cid=1">サンプル1</a>(5 hits)  </li>  <li>   <a href="http://www.sample.co.jp/modules/test/index.php?lid=4&cid=3">サンプル2</a>(4 hits)  </li> </ul> ■[やりたい出力結果] <ul>  <li class="list1">   <a href="http://www.sample.co.jp/modules/test/index.php?lid=2&cid=1">サンプル1</a>(5 hits)  </li>  <li class="list2">   <a href="http://www.sample.co.jp/modules/test/index.php?lid=4&cid=3">サンプル2</a>(4 hits)  </li> </ul> ■質問内容 現状、foreachで<li>だけをループ処理にて取得しているコードへ対して、 リスト表示に、<li class="list1">のようにclass属性を動的につけて取得するには、 どうすればよいのでしょうか。

    • ベストアンサー
    • PHP
  • cssのfloatで右にメニューを出す方法を勉強し

    cssのfloatで右にメニューを出す方法を勉強しています。 ヘッダの左にロゴ(クリックをするとTOPへ飛ぶ) 右にメニューを横並びで表示したいです。 _________ ■   ■■■■ ロゴ  メニュー _________ のようにしたいのです。 例えばロゴもメニューもそれぞれwidth100px heith50pxのサイズとし、 メニューにもそれぞれ違う画像を入れ、マウスオーバーで違う画像に変わるようにし、marginを10pxあけるとすると ☆★☆★css☆★☆★ /* abc */ #header ul.abc{ float:right; margin: 0 ; padding: 0 ; width: 400px; } #header ul.abc li { float:left; display: inline; } /* 01 */ #header ul.abc li.01 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.01 a { display: block; background: url(../img/01.jpg) no-repeat top left; } #header ul.abc li.01 a:hover { display: block; background: url(../img/01_om.jpg) no-repeat top left; /* 02 */ #header ul.abc li.02 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.02 a { display: block; background: url(../img/02.jpg) no-repeat top left; } #header ul.abc li.02 a:hover { display: block; background: url(../img/02_om.jpg) no-repeat top left; /* 03 */ #header ul.abc li.03 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.03 a { display: block; background: url(../img/03.jpg) no-repeat top left; } #header ul.abc li.03 a:hover { display: block; background: url(../img/03_om.jpg) no-repeat top left; /* 04 */ #header ul.abc li.04 { width:100px; height:50px; margin:0 0 0 0; } #header ul.abc li.04 a { display: block; background: url(../img/04.jpg) no-repeat top left; } #header ul.abc li.04 a:hover { display: block; background: url(../img/04_om.jpg) no-repeat top left; ☆★☆★html☆★☆★ <div id="header"> <div class="logo"><a href="">ロゴ</a></div> <ul class="menu"> <li class="01"><a href=""01</a></li> <li class="02"><a href="">02</a></li> <li class="03"><a href="">03</a></li> <li class="04"><a href="">04</a></li> </ul> <div class="clear"></div> </div> これは例なんですが、 この記述できると思ったのですが、うまくいかず困っています。 何か足りないのでしょうか?それともcssで何か勘違いをしているのでしょうか? お手数をおかけしますが、ご教授お願いします。

    • ベストアンサー
    • CSS
  • Dreamweaverのテンプレートで各ページ毎にタイトル変更

    Dreamweaverのテンプレートで各ページ毎にタイトル変更できるようにする方法ってあるのでしょうか? また meta name="keywords meta name="description なども各ページ毎に編集できる方法があれば教えてください。

  • Dreamweaver2004でリストを利用してナビゲーションバーを作成しようとしていますがclass属性のつけかたが分かりません

    初めてdreamweaverでweb制作を試みているビギナーです。Dreamweaver2004でリストを横に並べる形でナビゲーションバーを作成しようとしているのですが、どのように"ul"と"li"にclass属性を与えればよいのか分かりません。divタグではなく、<ul class="navi">というようにするには、Dreamweaver2004でどのように操作をすればよいのでしょうか? ためしに直接タグ打ちをしてみたら、エラーが起きました(> <) 書籍でもネットでも出てこず、独学なので周りに聞く人もいなくてとても困っています。初歩的な質問でしたら恐縮ですがどうぞよろしくお願いします。

  • cssのulタグについて質問です。

    cssの初心者ですがよろしくお願いします。 以下内容です。 #headerの中にulタグで float:left; display: inline; を使って横のメニューを作りました。 その下に幅いっぱいの画像を入れたかったので 一度 <div class="clear"></div>で区切って<div id=""></div>を使って画像を入れました。 そして、更にその下に上で使ったulタグをコピーしてclassを変更して新しい横のメニューを作ったのですが 2段目の1番左の画像だけマウスオーバーの画像だけが小さくなってしまいました。(横に短くなっている) 画像の大きさは元の画像もマウスオーバーの画像も同じ大きさです。 cssで指定している画像の大きさも間違いありません。 試しに上のメニューを<div id="header">にして <div class="clear"></div>で区切って 下のメニューを<div id="gnavi">にして分けてもその画像だけが小さくなっています。 htmlはこれです <div id="header"> <ul class="yama"> <li class="logo"><a href>ロゴ</a></li> <li class="kyouiku"><a href="">教育</a></li> <li class="syoukai"><a href="">紹介</a></li> <li class="shizen"><a href="">自然</a></li> <li class="mura"><a href="">村</a></li> </ul> <div class="clear"></div> <div class="line"></div> <ul class="rei"> <li class="name"><a href="">あいうえお</a></li> <li class="abc"></li> <li class="map"><a href="">マップ</a></li> </ul> </div> <li class="name"><a href="">あいうえお</a></li>これが問題のタグです。 文字が足りなかったのでcssの一部ですが /* rei */ #header ul.rei{ float:left; } #header ul.rei li{ float:left; display: inline; } で <li class="name"> のcssですが #header ul.rei li.name { display: block; width:295px; height:51px; } #header ul.rei li.name a { display: block; background: url(../img/name.jpg) no-repeat top left; text-indent:-9999px; height:100%; width:100%; } #header ul.rei li.name a:hover { display: block; text-indent:-9999px; height:100%; width:100%; background: url(../img/name_om.jpg) no-repeat top left; } という風にしています。 初心者のため使い方が間違っているところが多々あると思いますがよろしくお願いします。

    • ベストアンサー
    • CSS
  • Dreamweaverテンプレート内のナビ画像を、ページに合わせて変更

    グローバルナビを画像(img src)で作成し、Dreamweaverでナビをテンプレート化しています。以下のような構造です。 <ul id="Navi"> <li><a href="link1.html"><img src="link1.gif" /></a></li> <li><a href="link2.html"><img src="link2.gif" /></a></li> <li><a href="link3.html"><img src="link3.gif" /></a></li> <li><a href="link4.html"><img src="link4.gif" /></a></li> <li><a href="link5.html"><img src="link5.gif" /></a></li> </ul> 疑問なのですが、上記のナビゲーションをdwtでテンプレ化すると、各HTMLファイルではナビ部分はロックがかかって編集できなくなりますが、その状態で、 「ナビ内の、今いる階層に対応したボタンの色を変える(=別の画像にする)」 方法は何かありますでしょうか? (例:会社概要のページにいる時はナビ内の「会社概要」ボタンの色を変える) コーディングのTips、.jsライブラリ、どんな解決策も大歓迎です。 ユーザビリティの確保+作業の効率化のため、是非解決したい問題ですので、宜しくお願い致します。

    • 締切済み
    • CSS
  • Dreamweaver現状維持したまま編集不可能領域を編集可能領域へ

    ドリームウィーバーのテンプレートで作っていたページの編集不可能領域を 編集可能領域へ変更したいと思っています。 その際、現状のページの状態を維持したまま 一括で変更することはできますか? もし可能でしたら教えていただきたく思います。 *** 変更前 *** abcabcabcabc <!-- #BeginEditable "A" --> aaaaa <!-- #EndEditable --> <!-- #BeginEditable "B" --> bbbbb <!-- #EndEditable --> <!-- #BeginEditable "C" --> ccccc <!-- #EndEditable --> abcabcabcabc *** 変更後 *** <!-- #BeginEditable "ABC" --> abcabcabcabc aaaaa bbbbb ccccc abcabcabcabc <!-- #EndEditable -->