もしもドロップシッピングメニューをツリー表示に

締切済

質問者：toitoi2
質問日時：2014/10/20 01:46
回答数：1件

みなさん今晩は、質問させてください。
今日もしもドロップシッピングに登録し開店したのですが、商品メニューをツリー表示に出来ないのでしょうか?
例えば
「ホビー」－「楽器」－「ギター」のようにクリックしていくとサブメニューが開いて欲しいのです。
HTMLは一応分かります。
それではよろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2014/10/27 19:10

グローバルなメニューでしたらheaderに入れるのが楽ですね。

<body>
　<div class="header">
　　<div class="nav">
　　　<ul>
　　　　<li><a href="">ホビー</a>
　　　　　<ul>
　　　　　　<li><a href="">楽器</a>
　　　　　　　<ul>
　　　　　　　　<ul><a href="">管楽器</a>
　　　　　　　　　<li><a href="">金管楽器</a>
　　　　　　　　　　<ul>
　　　　　　　　　　　<li><a href="">トランペット</a></li>
　　　　　　　　　　　<li><a href="">ホルン（フレンチホルン）</a></li>
　　　　　　　　　　　<li><a href="">トロンボーン</a></li>
　　　　　　　　　　</ul>
　　　　　　　　　</li>
　　　　　　　　　<li><a href="">木管楽器</a></li>
　　　　　　　　</ul>
　　　　　　　　<li><a href="">弦楽器</a>
　　　　　　　　　<ul>
　　　　　　　　　　<li><a href="">撥弦楽器</a></li>
　　　　　　　　　　<li><a href="">擦弦楽器</a></li>
　　　　　　　　　　<li><a href="">打弦楽器</a></li>
　　　　　　　　　</ul>
　　　　　　　　</li>
　　　　　　　</ul>
　　　　　　</li>
　　　　　</ul>
　　　　</li>
　　　</ul>
　　</div>
　</div>
・・・・・・

と率直にマークアップすれば良いです。

デザインは考えず、率直に文書構造だけをマークアップしておきましょう。そうして「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」さえしておけば、スタイルシートでどうにでもなります。
（どうにでもなるサンプル）
　ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　にて、HTMLソースを確認
　ついでブラウザの[表示]メニューから[スタイル(シート)]を選択してスタイルだけを変更してみると意味が分かる。ウィンドウ幅変えたり、Ctrl + ＋/－でフォントサイズ変えたり、印刷プレビューを確認してみると、HTMLさえきちんと書けていたらどうにでもなる意味が分かるかと。Chromeは代替スタイルが利用できないので他のブラウザで

- 0
- 件

通報する

この回答へのお礼

ORUKA1951さま
今晩はアドバイスありがとうございます。
返信が遅れて申し訳ありません。
実はHTMLをいじるのは久々ですっかり忘れてしまいました。
Jimdoや他のブログのように簡単に変更できるので・・・

Firfoxでトップページを表示し、画面上で右クリックー
ページのソースを表示、デスクトップに保存しさくらエディタで編集をすればいいのでしょうか？

ul,liはリストを作成するソースで、
<ul><li>...</li></ul>でくくるですね？

実際ソースを見てみると、
<div class="header">
<div class="nav">
の代わりに
<body id="sd-index" class="top">
<div id="container" class="layout-left">
<div id="contents">
<div id="header">
<h1>Alley Cat Armory</h1>
<ul class="navigation">
<li><a href="./">トップ</a> <span>|</span></li>

となっています。
ここを変更したいのではなく、146行目からの

<div class="section">
<p class="genre-all"><a href="./list-0001.html"><span>商品一覧</span></a></p>
<ul class="genre-list">
<li><a href="./category-09-0001.html">ホビー・エトセトラ</a></li>
</ul>
</div>
<div class="section">
<ul class="side-link">
<li><a href="./group-0000465227-0001.html">東京マルイ次世代電動ガン</a></li>
<li><a href="./group-0000465263-0001.html">ガン本体</a></li>
<li><a href="./group-0000465265-0001.html">モデルガン</a></li>
</ul>
</div>

を変更したいのです。
[エアーソフトガン]というカテゴリー内に[ガン本体]、[外装パーツ]、[内部パーツ]などが表示してほしいのです。

またこれらを編集したあとどうやって反映させればいいのでしょうか？
つまりソースをダウンロード、編集するのはローカルなので。

引き続き、よろしくお願い致します。