彼此ともつかぬ場所


□ スポンサー広告 □

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




*    *    *

Information

□ 使用方法 □

for_novel シリーズ インデックス画面の子カテゴリを折り畳む(2009/11/26以前版)

 カテゴリが増えてくると、どうしてもインデックス画面が縦に間延びしてしまいます。
 親子カテゴリ設定をした場合に、子カテゴリを親カテゴリの中に折り畳んでコンパクトに表示する方法です。

 FC2ブログのテンプレート工房さんの「親子カテゴリの折りたたみ」を参考に(というかスクリプトを丸々使用)いたしました。この場を借りてお礼申し上げます。便利なスクリプトをありがとうございました!

 ※ 2009/6/28以前にダウンロードして、そのままテンプレートをお使いの方は、「for_novel シリーズ インデックス画面の子カテゴリを折り畳む(2009/6/28以前版)」をご覧ください。
 また、2009/11/26に、親子カテゴリの折りたたみをテンプレートに標準装備いたしました。他にも色々細かい点が改良されておりますので、差し支えなければ、是非新しくテンプレートをダウンロードし直してください。
 以前に当ブログでご紹介していた子カテゴリ折りたたみカスタマイズを実行なさった方は、「子カテゴリ折りたたみカスタマイズが JavaScript オフ時に対応」を是非とも参照してください。


 では、カスタマイズとまいります。HTMLの54~69行目にある、

<!--category-->
<!--category_nosub-->
          <div class="item cat"><a href="<%category_link>" title="「<%category_name>」目次へ"><%category_name></a></div>
<!--/category_nosub-->
<!--category_parent-->
          <div class="item cat"><%category_name></div>
<!-- 子カテゴリ折りたたみカスタマイズ箇所【1】 -->
<!--/category_parent-->
<!--category_sub_hasnext-->
          <div class="item sub"><a href="<%category_link>" title="「<%category_name>」目次へ"><%category_name></a></div>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
          <div class="item sub"><a href="<%category_link>" title="「<%category_name>」目次へ"><%category_name></a></div>
<!-- 子カテゴリ折りたたみカスタマイズ箇所【2】 -->
<!--/category_sub_end-->
<!--/category-->

を、そっくり以下の記述と入れ替えてください。

<!-- JavaScriptオンの時に表示されるカテゴリ一覧 -->
        <script type="text/javascript">
document.write(
    '<!--category--><!--category_nosub-->'
  + '<div class="item cat"><a href="<%category_link>" title="「<%category_name>」目次へ"><%category_name></a></div>'
  + '<!--/category_nosub--><!--category_parent-->'
  + '<div class="item cat"><a href="#" title="クリックで子カテゴリが開閉します" onclick="showCategory(<%category_no>); return false;" onkeypress="showCategory(<%category_no>); return false;"><%category_name></a></div>'
  + '<div id="CategoryNum<%category_no>" style="display:none">'
  + '<!--/category_parent--><!--category_sub_hasnext-->'
  + '  <div class="item sub"><a href="<%category_link>" title="「<%category_name>」目次へ"><%category_name></a></div>'
  + '<!--/category_sub_hasnext--><!--category_sub_end-->'
  + '  <div class="item sub"><a href="<%category_link>" title="「<%category_name>」目次へ"><%category_name></a></div>'
  + '</div>'
  + '<!--/category_sub_end--><!--/category-->'
)
        </script>

<!-- JavaScriptオフの時に表示されるカテゴリ一覧 -->
        <noscript>
<!--category-->
<!--category_nosub-->
          <div class="item cat"><a href="<%category_link>" title="「<%category_name>」目次へ"><%category_name></a></div>
<!--/category_nosub-->
<!--category_parent-->
          <div class="item cat"><%category_name></div>
<!--/category_parent-->
<!--category_sub_hasnext-->
          <div class="item sub"><a href="<%category_link>" title="「<%category_name>」目次へ"><%category_name></a></div>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
          <div class="item sub"><a href="<%category_link>" title="「<%category_name>」目次へ"><%category_name></a></div>
<!--/category_sub_end-->
<!--/category-->
        </noscript>



 それから、肝心の JavaScript を head に埋め込みます。
 先程ご紹介した「親子カテゴリの折りたたみ」に掲載されている通り

<script type="text/javascript">
<!--
function showCategory(idno){
cn = ('CategoryNum' + (idno));
if( document.getElementById(cn).style.display == "none" ) {
document.getElementById(cn).style.display = "block";
}
else {
document.getElementById(cn).style.display = "none";
}
}
//-->
</script>



の記述を、まるっと <head>と</head> の間に挿入してください。無難に、15行目の </head> の直前にでも入れていただければOKです。

これで全ての作業は完了です。お疲れ様でした!



*    *    *

Information

Date:2009/06/28
Trackback:0
Comment:10

Comment

[237] 

こんにちは^^  for_novel_bambooを使わせていただいてます   
 質問なんですが カテゴリの中の子カテゴリまではつくれたんですが カテゴリー子カテゴリ1
         ー子カテゴリ2
になっている場合 子カテゴリを押すと今度は記事が子カテゴリのようにずらっと並ぶようにしたいんですが・・・
   教えてくださると助かります
http://aifread.blog.fc2.com/
2012/03/07 【NoName】 URL 

[238] ご使用ありがとうございます

こんにちは。ダウンロード&ご使用ありがとうございますv

お尋ねの件ですが、
「インデックス(表紙)ページにて、子カテゴリ名をクリックして記事の一覧を表示したい」
ということでよろしいでしょうか。

結論から申しますと、不可能です。

表紙ページの CONTENTS は、サイドバーにカテゴリ一覧を表示させる <!--category--> という変数を使用しています。
ここで表示させることができる項目は、「カテゴリ番号」「カテゴリページのURL」「カテゴリ名を」「各カテゴリに投稿された記事数」の4つだけなのです。

記事の一覧を表示させるためには、また別なエリア変数を使わなければならないため、カテゴリの一覧と記事の一覧を混ぜて実現することはできません。

お力になれなくてすみませんでした。
2012/03/07 【GB】 URL [編集] 

[239] 

ww 残念w   

 では カテゴリ開いたあとの記事を選択する画面の上の INDEXやノベルリストと書かれたところに 私のブログで言うとメンバー紹介を追加して 子カテゴリが下にビローンと・・・ 説明わかりにくくてすいませんw
 https://skydrive.live.com/redir.aspx?cid=84114afd5d68c9ca&resid=84114AFD5D68C9CA!169&parid=84114AFD5D68C9CA!103&authkey=!ACVhfum45aGMFPY
 絵で説明してみました・・・
おろしくお願いします
 
2012/03/07 【NoName】 URL 

[240] メニューバーのドロップダウン

おお、これは分かりやすい絵をありがとうございます。
「FC2ブログのテンプレート工房」
http://10plate.blog44.fc2.com/
さんのメニューバーが、ズバリお望みのものかと思います。

これについては、上記ブログ管理人のいたおさんが、
「メニューバーのドロップダウン」
http://10plate.blog44.fc2.com/blog-entry-230.html
というカスタマイズ記事を書いておられます。

で、これを当テンプレートに応用すればよいわけなのですが……。
実は私、JavaScriptは完全な門外漢でして、加えて現在他事に忙殺されていて、腰をすえてこのリクエストに対応することができない状況です。すみません。

夏以降でしたら、もしかしたら……もしかしたら、こちらに時間をかけられるようになる、かも、しれませんが、とても確約できません……。

もう少し汎用的なカスタマイズでしたら、テンプレートのバージョンアップに絡めて、多少優先順位を上げることもできるのですが、そうでない個別のリクエストとなると、なかなか難しいのが正直なところです。
2012/03/07 【GB】 URL [編集] 

[241] 

・・・難しい・・・  色々とありがとうございましたb

 また教えてくださると幸いです^^
2012/03/08 【NoName】 URL 

[247] 

初めまして、アイマールと申します。
最近、某サイトからFC2にブログを引っ越しまして、for_novel_bamboo をDLさせて頂きました。
小説ページの幅がちょうど見やすいサイズで、一番しっくりきました。目が疲れにくくて本当に使い勝手が良いです。

ただ、1つだけ、どうしても直したい箇所があります。
それが、この「カテゴリの折りたたみ」です。

知ってらっしゃると思うのですが、「Novelテンプレート様」のテンプレは、表紙カテゴリの「MAIN」が3段階に開閉するのですね。
novel-Gタイプのテンプレサンプルを見て頂くと分かるのですが、
「カテゴリ → 親カテゴリ → 子カテゴリ」
こういう感じに、小説タイトルをツリー化してるんだと思うのです。
できれば私も、こういう風にカテゴリを3段階に開閉したいのです。

UPする小説が増えてくると、どうしても表紙が下に間延びしてしまい、見栄えが気になります。(というより、スクロールが大変で…。^^;)
でもカテゴリ欄を縮めたいなら、現状では別のカテゴリ分けをしなくてはならないのが苦になってます。
例えば、短編・長編に分けるとか、シリーズごとに分けるとか。
でもウチは長編が多いので、子カテゴリを小説ごとに使いたいというジレンマに悩んでいて…。

いっそ自分で直してみようかと、「FC2ブログテンプレート工房様」や「いたお様」の記事を覗きに行ってみたのですが、如何せん、私では素人すぎて全く手が出せませんでした…。

できればこのまま for_novel_bamboo を使い続けたいので、急がなくて結構ですので、どうかこのカスタマイズをご検討ください。
自分でも一応勉強してはみますが…、絶対GB様の方が早いと思います。^^;

本当にぶしつけですいません。
気長にお待ちしてますので。^^
2012/04/03 【アイマール】 URL [編集] 

[248] インデックスのカテゴリ一覧をJS開閉

初めまして。ダウンロードならびにご愛用ありがとうございます!
見易いと言ってもらえて本当に嬉しいです。

お尋ねの件ですが、これは、

http://greenbeetle3.blog10.fc2.com/
(管理人のテンプレートテスト用ブログです。普段はプライベートモードにしておりますが、一時的に公開いたします)

こういう感じでよろしいでしょうか。
これで構わないのならば、詳しい改造方法をお知らせいたしますので、上記ブログを一度ご確認ください。
2012/04/03 【GB】 URL [編集] 

[249] 

こんばんは、お早いお返事、ありがとうございます。

はい、まさしくこれです!^^
紹介くださったテスト用ブログで、「カテゴリ」の「共有テンプレート」がツリーになっているのを確認できました。

もう改造方法を開発なさっていたんですね。
もっと早くGB様に聞きに来ればよかったです、実は1週間悪戦苦闘してました…。^^;

ぜひ、詳しい改造方法を教えてください。
宜しくお願い致します。
2012/04/03 【アイマール】 URL [編集] 

[250] >アイマールさん

実は、別ブログで使用している、春木屋さん(http://sug.blog2.fc2.com/)の折りたたみスクリプト

http://sug.blog2.fc2.com/blog-entry-115.html
「なんでもたたむよ」

をまるっと挿入しただけの、やっつけ仕事だったのです。上手くいってよかったです。

春木屋さんの上記記事のコメントに、再配布自由と記されてありますので、そのご厚意に甘えて、この次のコメントで改造方法を記したいと思います。今しばしお待ちください。
2012/04/03 【GB】 URL [編集] 

[251] インデックスのカテゴリ一覧折りたたみ

スクリプトのボリュームが思ったより大きかったので、コメントではなく記事に改造方法を記しました。
http://greenbeetle2.blog117.fc2.com/blog-entry-104.html
「「for_novel_bamboo」表紙カテゴリ一覧折りたたみについてのお返事」
をご覧ください。
2012/04/03 【GB】 URL [編集] 

コメントの投稿

コメント書き込みの前に、是非一度「コメントについて」に目をお通しください。







 ブログ管理者以外には秘密にする

Trackback

TrackbackUrl:http://greenbeetle2.blog117.fc2.com/tb.php/45-4f0ecb5e
この記事にトラックバックする(FC2ブログユーザー)

 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。