• 締切済み

【HTML】親子カテゴリーの記述

カラーミーショップのテンプレートを、初心者なりにいろいろ調べてカスタマイズしています。 元々は サイドバーに親カテゴリー(親123)を表示し、親カテゴリー名をクリックすると メイン部分に子カテゴリー(子1a1b1c)が表示される仕組みでした。 それだと使いにくいので、サイドメニューに 親1  子1a  子1b  子1c 親2  子2a  子2b というふうにしたかったのですが 色々いじってるうちにわけがわからなくなりました・・・ 以下のように記述すると、 親1のみが表示され、親1をクリックすると、子abcが表示されます。 親2(とその子)は表示されません。親のloopがなかったことになってしまいます。 何が間違ってるのでしょうか。 <!-- 商品カテゴリー --> <dl id="cat_list"> <dt>カテゴリー</dt> <dd> <ul class="main_cat"> <{section name=num loop=$category}> <li class="main_list"> <{if $category[num].img_url != ""}><img src="<{$category[num].img_url}>" /><{/if}><a href="<{$category[num].link_url}>"><{$category[num].name}></a>  <ul class="sub_cat">  <{section name=num loop=$sub_category}>  <li class="sub_list">  <{if $sub_category[num].img_url != ""}><img src="<{$sub_category[num].img_url}>" /><{/if}><a href="<{$sub_category[num].link_url}>"><{$sub_category[num].name}></a>  </li>  <{/section}>  </ul> </li> <{/section}> </ul> </dd> </dl> <!--// 商品カテゴリー --> 上記の内、子カテゴリーの記述を消すと、親12とも問題なく表示されます。 同じ構造で商品カテゴリーの下に、商品グル―プがあるのですが 試しにこちらは、子カテゴリー部分の <{section name=num loop=$sub_group}><{/section}>を消しました。 すると、親123全部表示されましたが、親1をクリックすると 親1  子1a 親2  子1b 親3  子1c と違う親の間に挟まれるように表示されてしまいます。 どうもやっぱりsectionは消しちゃいけないようですが 親sectionの中にloopが2つ(親用・子用)あるのがダメなんでしょうか? どう書いたらいいですか? ※欲を言えば、親カテゴリー名はリンクなしで、子カテゴリーを常に表示させておきたいです。 が、とりあえず上記の件、解決できる方法を教えてください。

  • CoroQ
  • お礼率82% (187/228)
  • HTML
  • 回答数1
  • ありがとう数1

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

カラミーショップでしたら、ここで聞くよりサポートで  ⇒よくある質問 - ネットショップ開業ショッピングカートサービス【カラーミーショップ】( http://shop-pro.jp/?mode=faq )  聞かないと、無理でしょう。一般的なものではありませんので・・

CoroQ
質問者

お礼

ありがとうございました。 カスタマイズに関しては対応しないとの事でした。

関連するQ&A

  • MovableTypeのテンプレート カテゴリのリスト表示について

    MovableTypeのテンプレートの編集について質問させていただきます。 カテゴリのリスト表示を <ul> <li>トップレベルカテゴリA</li> <li>トップレベルカテゴリB</li> <li>トップレベルカテゴリC</li> </ul> <ul> <li>カテゴリAの子1</li> <li>カテゴリAの子2</li> </ul> <ul> <li>カテゴリBの子1</li> <li>カテゴリBの子2</li> <li>カテゴリBの子3</li> </ul> <ul> <li>カテゴリAの子1の子A</li> <li>カテゴリAの子1の子B</li> </ul> というように、各階層のカテゴリごとに表示させようと思い挑戦しているのですが苦戦しています。 MTのタグの知識が足りずなかなかうまくいきません。皆さんのお力貸していただけるとうれしいです。 よろしくお願いいたします。

  • HTML、CSS

    FC2(無料サーバー)でホームページを作っているのですが、FC2の広告(Powered by…という下に一行だけ出るもの)が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP"> <!-- ページ全体  --> <div id="page"> <!-- ヘッダー --> <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div> <!-- メニュー --> <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div> <!-- コンテンツ --> <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div> <!-- フッター --> <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • カテゴリーに登録数を表示させる

    mysql + php の掲示板に関する質問です。 カテゴリーの一覧表示でタイトルの横に登録数を表示させたいのですがどのようにすれば 良いのか困っています。 <ul class="group"> <?php foreach($categories as $category): ?> <li class="list-group"> <a href=""><?php _e($category->name); ?></a> <?php endforeach; ?> 上記でカテゴリー名とurlを表示しているのですが、少し変更してカテゴリーに投稿されている数を表示したいと思っています。 SELECT category, count(*) FROM jobs GROUP BY category 上記でカテゴリーに登録されている数は取得(sql)できるのですが、これをどうphpにすれ ば良いのか理解できません。 理想は下記になることです。 <li class="list-group-item"> <a href="">カテゴリー</a> <span class="badge">10</span> </li> よろしくお願いします。

    • 締切済み
    • PHP
  • アコーディオン(jquery)クリック後他閉じたい

    プログラム初心者のものです。 jQueryを利用したアコーディオンメニューを作成したのですが、現在、クリック後開き、他をクリック後もクリック済みの箇所が開いた状態になっています。 <改善> クリックしたメニューのみ表示させたいのですが お手数おかけいたします、ご教示いただけますでしょうか。 下記にソースを掲載してみます。 【javascript】 $(function () { // 親メニュー処理 $('span').click(function() { // メニュー表示/非表示 $(this).next('ul').slideToggle('fast'); }); // 子メニュー処理 $('li').click(function(e) { // メニュー表示/非表示 $(this).children('ul').slideToggle('fast'); e.stopPropagation(); }); }); 【HTML】 <div id="nav"> <span class="btn1"><a href="#">A</a></span> <ul> <li class="t1"><a href="#">A-1</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> <li class="t1"><a href="#">A-2</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> <li class="t1"><a href="#">A-3</a> <ul> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> <li class="sub_t1">○○○○</li> <li class="sub_text"><a href="#">あいうえお</a></li> <li class="sub_text"><a href="#">かきくけこ</a></li> </ul> </li> </ul> </div> ご教授の程よろしくお願い致します。

  • Movabletype カテゴリアーカイブページでサブカテゴリ毎にまとめて一覧表示したい。

    いろいろ探しましたがわからないので教えてください。 カテゴリー・アーカイブページでこのように表示したいのです。 (親カテゴリAのカテゴリページ) ============ 子カテゴリ1     最新エントリー1     最新エントリー2 子カテゴリ2     最新エントリー1     最新エントリー2 子カテゴリ3     最新エントリー1     最新エントリー2 ============= <div class="module-archives module"> <h2 class="module-header">カテゴリー名エントリー</h2> <div class="module-content"> <ul class="module-list"> <MTEntriesWithSubCategories lastn="エントリー表示数" category="カテゴリーの名称"> <li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li> </MTEntriesWithSubCategories> </ul> </div> </div> このようにやればいいかと思ったのですが、うまくいきません。 宜しくお願いします。

  • オンマウスで表示されるテキスト

    先ほどhttp://okwave.jp/qa4091921.htmlで質問させて頂いた者です。 下記のソースコードをお教え頂いたのですが、初めてページを開いた 時に↓の部分がすでに表示されている状態にするには、どうしたらよ いのでしょうか? どうぞよろしくお願い致します。 ページを開いたときに表示していたい部分 -------------------------------------------- <ul class="hide" id="sub1"> <li>親メニュー1のサブメニュー1 <li>親メニュー1のサブメニュー2 <li>親メニュー1のサブメニュー3 <li>親メニュー1のサブメニュー4 </ul> -------------------------------------------- 教えて頂いたソースコード <style> .hide{ display:none; } </style> <script> function show(id){ var obj=document.getElementById(id); var n=obj.parentNode.firstChild; while(n){ if(n.nodeName=="UL") n.className="hide"; n=n.nextSibling; } obj.className=""; } </script> <ul> <li><a href="#" onMouseover="show('sub1')">親メニュー1</a></li> <li><a href="#" onMouseover="show('sub2')">親メニュー2</a></li> <li><a href="#" onMouseover="show('sub3')">親メニュー3</a></li> <li><a href="#" onMouseover="show('sub4')">親メニュー4</a></li> </ul> <hr> <div> <ul class="hide" id="sub1"> <li>親メニュー1のサブメニュー1 <li>親メニュー1のサブメニュー2 <li>親メニュー1のサブメニュー3 <li>親メニュー1のサブメニュー4 </ul> <ul class="hide" id="sub2"> <li>親メニュー2のサブメニュー1 <li>親メニュー2のサブメニュー2 <li>親メニュー2のサブメニュー3 <li>親メニュー2のサブメニュー4 </ul> <ul class="hide" id="sub3"> <li>親メニュー3のサブメニュー1 <li>親メニュー3のサブメニュー2 <li>親メニュー3のサブメニュー3 <li>親メニュー3のサブメニュー4 </ul> <ul class="hide" id="sub4"> <li>親メニュー4のサブメニュー1 <li>親メニュー4のサブメニュー2 <li>親メニュー4のサブメニュー3 <li>親メニュー4のサブメニュー4 </ul> </div>

  • MovableTypeでカテゴリの編集をしたいんですが・・・

    最近やっとMovableTypeを使い始めました。 初心者中の初心者で、もしかしたら的外れな質問かも知れませんが、よかったら教えてください。 現在、カテゴリを次のように作っています。 AAAAAA(トップカテゴリ)  BBBBB(サブ)   CCCCC(サブ) DDDDDD(トップカテゴリ)  EEEEE(サブ)   FFFFF(サブ)   GGGGG(サブ) MTの編集画面上ではカテゴリの順番はアルファベット順に自動的に並びます。そして実際のWebでもこの順に並びます。 タグは <MTIfArchiveTypeEnabled archive_type="Category"> <div class="module-categories module"> <h2 class="module-header">カテゴリー</h2> <div class="module-content"> <MTTopLevelCategories> <MTSubCatIsFirst> <ul class="module-list"> </MTSubCatIsFirst> <MTIfNonZero tag="MTCategoryCount"> <li class="module-list-item"> <a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> <MTElse> <li class="module-list-item"><MTCategoryLabel> </MTElse> </MTIfNonZero> <MTSubCatsRecurse> </li> <MTSubCatIsLast></ul></MTSubCatIsLast> </MTTopLevelCategories> </div> </div> </MTIfArchiveTypeEnabled> このようになっています。 それで知りたいのは、このカテゴリの AAAAAA(トップカテゴリ)  BBBBB(サブ)   CCCCC(サブ) DDDDDD(トップカテゴリ)  EEEEE(サブ)   FFFFF(サブ)   GGGGG(サブ) という並びを変更することは出来るのでしょうか? 例えば DDDDDD(トップカテゴリ)  EEEEE(サブ)   GGGGG(サブ)   FFFFF(サブ) AAAAAA(トップカテゴリ)  BBBBB(サブ)   CCCCC(サブ) トップカテゴリの順番を変えたり、サブの順番を変えたりということは可能なのでしょうか? それともうひとつは、トップカテゴリを表示せず、サブカテゴリだけを表示することは可能なのでしょうか? 的外れな質問になってしまうかもしれませんが、よかったら教えてください。 よろしくおねがいします。

  • 子カテゴリーの条件分岐

    いつもお世話になっております。 WordPressのカテゴリーについてご質問させてください。 カスタム投稿に、該当するカテゴリーを表示する予定です。 しかし、子カテゴリーの選択があれば子カテゴリーのみに。 子カテゴリーの選択がなければ該当する親カテゴリーを表示する分岐の方法が分からず困っています。 現在、子カテゴリーのみ表示になっていますが、ここからどのように分岐すればよいのでしょうか。 ご教授いただけると幸いです。 何卒、宜しくお願いいたします。 <ul> <?php $terms = get_the_terms( $post ->ID, '〇〇-cat' ); foreach( $terms as $term ) { if($term->parent){ echo '<li>'.$term->name.'</li>'; } } ?> </ul>

    • ベストアンサー
    • PHP
  • EC-CUBE4 子カテゴリーについて

    EC-CUBE4.2でECサイトを構築中です。 任意の子カテゴリー一覧を表示していますが、その子カテゴリーに商品がない場合、子カテゴリー名を非表示にする方法をアドバイスいただけないでしょうか? 何卒、宜しくお願いいたします。 {% set Category = repository('Eccube\\Entity\\Category').find(11) %} {% set cate_childs = Category.getDescendants %} {% if cate_childs %} {% set h = Category.hierarchy + 1 %} <ul> {% for cate in cate_childs %} {% if h == cate.hierarchy %} <li><a href="{{ url('product_list') }}?category_id={{ cate.id }}">{{ cate.name }}</a></li> {% endif %} {% endfor %} </ul> {% endif %}

    • 締切済み
    • PHP
  • 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

専門家に質問してみよう