• ベストアンサー
  • すぐに回答を!

JUGEMでサブカテゴリを利用する方法(ツリー化)

新たにウェブログを立ち上げようと考えています。 友人が薦めてくれたブログサービス「JUGEM」を利用したいと思い、登録を済ませました。 ところがJUGEMでは、カテゴリの入れ子(ネスト)化がデフォルトではできません。 調べてみたのですが、JavaScriptを使えばカテゴリのツリー化はできるようです。ところが、色んな種類のJavaScriptがあり、どれを選べば良いのか検討がつきません。 また、ツリー化によくあるような「 ├ 」や「 └ 」といった記号は、できるだけ使いたくありません。 CSSを用いて、アイコンや背景などサブカテゴリを区別する方法を希望しています。 FC2などはデフォルトの機能でサブカテゴリ化ができるようですが、せっかくなので友人が薦めてくれたJUGEMを利用したいと思っています。 サブカテゴリをツリー化でき、かつCSSで見栄えを制御できるような、オススメのJavaScriptがありましたら教えてください。 ちなみに私自身、JavaScriptにはあまり詳しくないですが、(X)HTML及びCSSの知識はあります。 どうか皆様のお力添えをお願いします。 よろしくお願い申し上げます。

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数626
  • ありがとう数2

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

  • ベストアンサー
  • 回答No.1

参考です こちらの作者様のテンプレート:http://jugem.jp/utf/?mode=gallery&act=list&thumbnail=1&domain=shoyu-ramen23.jugem.jp はCSSでツリー化の部分を画像を使用していますのでJavascript部分とCSS部分を参考にされてみてはいかがでしょうか。 作者様のブログでも細かく設定方法が書かれています。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

早速のご回答、誠にありがとうございます! 実は、このテンプレート作者様のブログを一度拝見しておりました…(汗) しかし、ななめ読みした程度だったので、ツリー化の部分をCSSで制御しているとはまったく気付かず、読み飛ばしてしまっていました… 知りたい情報を調べるのですから、もっと細部まで熟読すべきでしたね(汗) 記述するスクリプトもシンプルですし、カテゴリの他にもツリー化が可能ですので、これは使えそうです! ありがとうございました!

関連するQ&A

  • カテゴリーのツリー化のやり方教えてください。

    カテゴリーのツリー化のやり方教えてください。 僕はDTIブログを使っています。 FC2、忍者、でもいいです。 ツリー化のやり方教えてください。 できれば、 動画、というカテゴリーがあってそれをクリックすると動画の中にある サブカテゴリーがでてくるようにしたいんですが・・・・・・。

  • 戻ってきた時ツリーメニューが開いているようにクッキーを保存させたい

    タイトルの通り、開いたツリーメニューからリンクを踏んで、またメニューのあるページに戻ってきた時にメニューを開いたままにしたいです。 色々と調べるうちにcookieを使うことはわかったのですが、どこもツリーメニューの方法が違うため載っているソースのどこを弄れば自分の使ったツリーメニューに対応させられるのかわかりませんでした。 javascriptを切った状態では開いたまま表示させたいので、ツリーメニューのソースは以下を参考にさせていただきました。 http://blog.ptlabo.net/index.php?id=06100064 これを利用して「戻ってきた時ツリーメニューを開いた状態に」することはできますか? できない場合、 ・cssオン、javascriptオフの状態では開いている ・ブラウザバックしたときに開いている この条件に合うツリーメニューであれば何でも良いのでお教えいただきたいです。 初心者ですので詳細にご教授いただければ幸いです。 よろしくお願いします。

  • ムーバブルタイプをサブホストに構築するには

    このたびVPSを導入することになり、シロウトながらなんとかMovabletypeのセットアップをしています。まず、ホストディレクトリにMT本体をインストールが完了し、ブログも無事に生成できました。 次にブログのサイトパスをサブホストディレクトリにして再構築をしたところ、テキストだけのブログができました。ソースを確認するとcssとjavascriptのパスがサブホストディレクトリになってます。そこで無理やりホストディレクトリへの絶対パスにして再構築してみたら一応表示はできるのですが、サイドバーが表示されていなかったり、コメントの投稿ができなかったりと動作不良だらけです。 サブホストを利用したMT構築は初めてなので、途方に暮れています。 どなたかお助けください。 よろしくお願いします。

  • ツリー形式の選択 表示、非表示

    項目が500程度ある中から10項目程度を選択するフォームを作っています。 項目が多いため、細かくカテゴリ分けをしておきカテゴリをクリックすると選択項目を表示し、チェックさせるようにしようと思っていますが、下に記述したソースですと再度クリックすると選択項目すべてが非表示となってしまいます。 それを非表示にしてもチェックした項目だけは表示できる方法はないでしょうか? javascript・CSSは詳しくなく、難しいことは分からないんですがよい方法があれば教えてください。 もっと選択が簡単分かりやすくできそうな方法でも大歓迎です。 以下は、ツリー形式でカテゴリをクリックすると選択項目を表示したり非表示にしたりするソースです。 ------------------------- <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- // ツリーメニュー flag = false; function treeMenu(menuNo) { tName = "treeMenu" + menuNo; tMenu = document.all[tName].style; if(tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:treeMenu(1)">+大カテゴリ</a><br> <DIV id="treeMenu1" style="display:none">  項目1<input type="checkbox" name="aaa[1]" value="1"><BR>  項目2<input type="checkbox" name="aaa[2]" value="2"><BR>  項目3<input type="checkbox" name="aaa[3]" value="3"><BR>  項目4<input type="checkbox" name="aaa[4]" value="4"><BR> </DIV> </BODY> </HTML>

  • JUGEMブログとlivedoorブログの比較(おすすめ度)について

    JUGEMブログとlivedoorブログの比較(おすすめ度)について 現在はJUGEMブログ(有料版)を利用しています。そこで皆様にご相談です。(質問です) 私が数あるブログサービスの中からJUGEMを選んだ主な理由は以下の通り。 1.HTMLやCSSのカスタマイズが基本的に自由。 2.アフィリエイトも基本的に自由。(有料版はAdSenseも可なので) 3.公式のテンプレート&(ユーザが作成した)カスタムテンプレートが豊富。 4.ping送信も自由。(数の制限はありますが) 5.その他(Twitter連携や携帯サイトとの連携)も容易。 だいたいこのような理由でJUGEMを選びました。 そこで質問です。 このような経緯でJUGEMを始めてみたものの、アクセス数が伸び悩んでおります。 無論、アクセス数を増加させるために自分なりに努力していて主には以下の通りです。 1.ping送信(主要検索サイト&ランキングサイト数社) 2.SEO対策(主にGoogleとYahoo!など) 3.マメな更新(できるだけジャンルを決めて) 4.自分のTwitterでの露出(更新時の自動投稿や手動でのポスト) と、当たり前でしょうが、これらのことはやっているつもりです。 私がなぜ、アクセス数に疑問をいだいたかと申しますと、 実はJUGEMでブログを始める前、いくつかの無料ブログに登録しました。 JUGEMでの運用を始めてからも、それらのアカウントは削除せいずにそのままにしているのですが、 記事が更新されていないにもかかわらず、そちらのほうには毎日訪問者がいるのです。 JUGEMで必死にアクセスアップをしているのに、何もしてないブログに毎日数十人のアクセスがあると さすがに「なんでだろう?」となってしまって、考えております。 無料の解析サービスがあるので調べてはみるのですが、検索など特定のワードにヒットした形跡もなく ますます疑問になってきてしまって。 そこでお詳しい方がいたら是非教えていただきたいのですが、 ブログ提供会社別に比較してみて、そのブログサービス独自でおこなっている アクセス数が比較的多く見込まれる会社はどこがおすすめですか? 検索やランキングサイトのサクセスアップはどの会社でもユーザの努力次第といったとろでしょうけれど、 できるだけ自社内でユーザのブログを多く露出(最新記事やランキングなど)しているサービスがどこかを知りたいです。 ちなみに何もしてないのに毎日数十人のアクセスがあるのはso-netの無料版ブログです。 FC2はゼロ。はてなもゼロ。seesaaもゼロ。何もしてなきゃ普通はゼロなのでしょうが・・・。 そして、JUGEM(有料版)とlivedoor(PRO有料版)を比較してみたいのですが、 利点と欠点をわかりやすく教えていただけると嬉しいです。 実際には、JUGEMからlivedoorPROに移行を考えてますが、何か使えなくなる機能は具体的にありますか? livedoorだと結局アクセス数の問題は解決されないでしょうかね? JUGEMだとJUGEM内のランキングでトップ10までしか表示されないし、その他、リスト的なコーナーもないから 具体的にはそこが不満に思えてます。 私のブログの現在のアクセス数は日平均200前後。多い時で400前後、少ない時で80ほど。 ちなみにヒットされたいワードで検索するとGoogleで3番目くらいにはだいたい出てきます。 検索ワードも解析ソフトで見てますが、そこらへんは順調のようです。 単純に記事がおもしろくないのかなー(汗)。 目標は日1,000アクセスくらい。有名人でもないと無理なのかな。 何か方法論とかあれば教えてください。 あ、いろいろ書きましたが当方、かなりのブログ素人です。テンプレートもなんとか自分好みに なってきてますが、試行錯誤。苦労しながらやってる程度の知識です。 だからここに投稿しているのですが。

  • FC2メールフォームのHTMLおよびCSSについて

    FC2メールフォーム http://form.fc2.com/ FC2メールフォームをブログに表示させる場合、iframeで表示させるタイプと、javascriptで表示させるタイプがあります。私のブログはDTD宣言をxhtml1.0 strictにしているので、javascriptのほうを利用し、CSSでデザインをいじくっているのですが、どうもIEと他ブラウザで表示が異なってしまいます。もしよければ、皆さんの知識をお貸しください。 ※javascriptで表示させたときのサンプルは下記ページの「パーツ利用の設定・パーツ利用の設置用タグ、デザイン設定」>「Preview」から見れます。 http://form.fc2.com/demo/ ※希望している表示 名前、メールアドレス、職業などのリストアイコンを消し、これらの左端とinput要素の左端を同じ位置にあわせたいと考えています。 ※私が指定したCSS #fc2form li { margin:0; padding:0; list-style:none; } ※上記CSSを指定したときの表示 FireFoxとOperaでは「名前」「メールアドレス」等とinput要素の左端があわさっています。 IE6とIE7では「名前」「メールアドレス」等の左に一文字分ほどのスペースがあき、その分input要素の左端とズレができています。 原因と対処方法をよろしくお願いします。

  • CSSを使用したクリックして開閉するプルダウンメニュー

    CSSを使用して「メニュー1」または「メニュー2」の文字ををクリックする度に、 ツリーメニュー(サブメニュー1、サブメニュー2、サブメニュー3)が 表示、非表示されるようにしたいと思っています。 JavaScriptは使用せずcssのみで、というのは可能でしょうか? ソースコードは以下です。 <ul>  <li>メニュー1    <ul>     <li><a href="sub1-1.html">サブメニュー1</a></li>     <li><a href="sub1-2.html">サブメニュー2</a></li>     <li><a href="sub1-3.html">サブメニュー3</a></li>    </ul>  </li>  <li>メニュー2    <ul>     <li><a href="sub2-1.html">サブメニュー1</a></li>     <li><a href="sub2-2.html">サブメニュー2</a></li>     <li><a href="sub2-3.html">サブメニュー3</a></li>    </ul>  </li> </ul> オンマウスでは無く、クリックでサブメニューを開閉させたいと考えておりますが、 方法が見つからなく、ご質問させて頂きました。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • DHTML ツリーメニュー * 教えてください!

    こんにちは。デザイナーなんですが、DHTMLツリーメニューを作っています。ウェブ上でソースを見つけて、いじくってみているんですが、上手くいきません。どなたかご存知でしたら、教えてください。 作ろうとしているメニューは メルシー3 ├メルシー3の特徴 ├メルシー3の仕組 ├メルシー3の償還例 └お申込メモ/運用レポート メルシー4 ├メルシー4の特徴 ├メルシー4の仕組 ├メルシー4の償還例 └お申込メモ/運用レポート 。。というかんじで、メルシー3、4をクリックすると、 詳細メニュがツリーメニューで見れるというものです。 *問題は*** ほかの項目をクリックすると開いていた項目が閉じるようにしたいのです。今のままだと、一度クリックして開けてしまうと、他の項目をクリックしても、開いたままになっています。 例えば、すべての項目が閉じている状態からはじめます。 メルシー3をクリックすると、ツリーメニューで次の断層のリンクが出てきます。メルシー4をクリックすると、今の状態ではメルシー3が開いたまま、メルシー4が開いてしまいます。 これをデフォルトで1つの項目しか開かないようにしたいのです。 スクリプトの現状は以下のようになっています。 <script type="text/javascript"><!-- if (document.getElementById) document.write('<style type="text/css"> .tree { display: none; }<'+'/style>'); function tree(id) { if (document.getElementById(id).style.display == "block") document.getElementById(id).style.display="none"; else document.getElementById(id).style.display="block"; parent.contents.open(id+".html","contents") } と定義して <tr> <td id="sub"> <a href="javascript:tree('contents/mercy3');" title="クリックでメニューが開閉します">メルシー3</a><br></td> </tr> <td> <div id="contents/mercy3" class="tree"> ├<a href="#" target="contents">メルシー3の特徴 </a><br> ├<a href="未設定" target="contents">メルシー3の仕組 </a><br> ├<a href="未設定" target="contents">メルシー3の償還例 </a><br> └<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td> </tr> <tr> <td id="sub"> <a href="javascript:tree('contents/mercy4');" title="クリックでメニューが開閉します">メルシー4</a><br></td> </tr> <tr> <td> <div id="contents/mercy4" class="tree"> ├<a href="#" target="contents">メルシー4の特徴 </a><br> ├<a href="未設定" target="contents">メルシー4の仕組 </a><br> ├<a href="未設定" target="contents">メルシー4の償還例 </a><br> └<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td> </tr> とボディーで記述しています。 どなたか、ご存知でしたら、よろしくお願いいたします。

  • ブラウザを指定してページを開く方法ってありますか?

    Web初心者です。 ぜひ皆様のお力添えをお願いいたします。 現在、サイト(A)を作っているのですが、IEのみの対応になってしまいました。 それはそれで特に問題になっていないのですが、私のサイト(A)にリンクが貼ってある、別のサイト(B)はNetscape 3 or 4 ではないと開かないことがわかりました。 サイトBを利用した方から、サイトAもNetscape 3or4に対応して欲しいと言われているのですが、iframeやCSSを使っているため、Netscape3or4に対応しようとすると大変な手間になってしまいます。 そこで、サイトAに貼ってあるBへのリンクを開いたときに、自動的にNetscapeで開くようにしたいのですが、そんなことってできるでしょうか? #もちろん、利用者の端末にはNetscapeがインストールされているという前提での話しです。 とほほのWWW入門などのサイトを参考にさせていただき、Javascriptなどを調べてみたのですが、どうにもわからず困っています。 できない、ということがわかるだけでもありがたいです。

    • ベストアンサー
    • HTML
  • fc2メールフォームのCSSについて

    fc2のメールフォームを利用しているのですが、パーツ利用(テンプレはデフォルト1)の際のCSSでコメントフォームのサイズを変更しても内容が反映されません。 CSSテンプレート作成用のファイルをダウンロードして確認したところ、フォーム表示用のソースが <div id="fc2form"> <div class="comment"><textarea></textarea></div> </div> ※不要部分は省略 となっていたため、CSSも #fc2form .comment{ width: 200px;} の数値のみを200から300へ変更したのですが、コメントフォームの横サイズは変更されず、メールフォーム全体を囲う外枠(<div id="fc2form">部分)の横サイズのみ変更されてしまいました。 CSSではなく管理メニューの「定型フォーム・テキストフォームの設定」から該当部分のサイズ変更をしても反映されません。 コメントフォームの縦横サイズを変更するにはCSSのどこを変更すればいいでしょうか?