彼此ともつかぬ場所


□ スポンサー広告 □

スポンサーサイト

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




*    *    *

Information

□ 使用方法 □

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

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

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

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


 先ずは、HTMLのカスタマイズ。差し替える部分は、「for_novel_w」では42~71行目、「for_novel_olive」では45~74行目、「for_novel_sky」では44~73行目です。

      <div class="menu">
        <h2 class="menuhead">Contents</h2>
        <ul>
          <li class="all"><a href="<%url>?tag=*" title="小説一覧">Novel List</a></li>
<!--category-->
<!--category_nosub-->
          <li><a href="<%category_link>" title="<%category_name>"><%category_name></a></li>
<!--/category_nosub-->
<!--category_parent-->
          <li><%category_name></li>
<!--/category_parent-->
<!--category_sub_hasnext-->
          <li class="sub"><a href="<%category_link>" title="<%category_name>"><%category_name></a></li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
          <li class="sub"><a href="<%category_link>" title="<%category_name>"><%category_name></a></li>
<!--/category_sub_end-->
<!--/category-->
        </ul>
        <ul>
          <li class="add"><a href="<%url>archives.html" title="書庫検索もこちら">更新履歴</a></li>
          <li class="add"><a href="<%url>?page=0">通常ブログ画面</a></li>
<!--
 掲示板や別ブログ、別サイトなどへのリンクをメニューに加えたい場合は、以下の「▼ 追加メニュー」と「▲ 追加メニュー」で囲まれた1行を、追加したいメニューの数だけコピーしてお使いください。
-->
<!-- ▼ 追加メニュー(← 使用時はこの行を丸々削除してください →)
            <li class="add"><a href="リンク先のアドレス">リンク先の名称</a></li>
▲ 追加メニュー(← 使用時はこの行を丸々削除してください →) -->
        </ul>
      </div>



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

      <div class="menu">
        <h2 class="menuhead">Contents</h2>
        <div class="item all"><a href="<%url>?tag=*" title="小説一覧">Novel List</a></div>

<!-- 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>

        <div> </div>
        <div class="item add"><a href="<%url>archives.html" title="書庫検索もこちら">更新履歴</a></div>
        <div class="item add"><a href="<%url>page-0.html">通常ブログ画面</a></div>

<!-- 掲示板や別ブログ、別サイトなどへのリンクをメニューに加えたい場合は、以下の「↓ 追加メニュー」と「↑ 追加メニュー」で囲まれた1行を、追加したいメニューの数だけコピーしてお使いください。 -->

<!-- ↓ 追加メニュー(← 使用時はこの行を丸々削除してください →)
        <div class="item add"><a href="リンク先のアドレス">リンク先の名称</a></div>
     ↑ 追加メニュー(← 使用時はこの行を丸々削除してください →) -->

      </div>



 それから、肝心の 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です。

 さて、次はスタイルシートのカスタマイズです。
「for_novel_w」では53~70行目、「for_novel_olive」では67~84行目、「for_novel_sky」では66~83行目を見てください。
 

/* 表紙 メニューリスト */
.menu ul { 中略 }
.menu ul a:link { 中略 }
.menu ul a:visited { 中略 }
.menu ul a:hover { 中略 }
.menu ul a:active { 中略 }

/* 表紙 メニュー項目(カテゴリ) */
.menu ul li { 中略 }

/* 表紙 メニュー項目(子カテゴリ) */
.menu ul li.sub { 中略 }

/* 表紙 メニュー項目(小説一覧) */
.menu ul li.all { 中略 }

/* 表紙 メニュー追加項目 */
.menu ul li.add { 中略 }



 まずこの赤字部分を以下のように変更、青字部分は削除してください。この時、「ピリオド」+「クラス名(itemとかcatとか)」となるように、ピリオドを消さないよう(もしくは、削除し損ねないよう)注意してください。

/* 表紙 メニューリスト */
.item { 中略 }
.item a:link { 中略 }
.item a:visited { 中略 }
.item a:hover { 中略 }
.item a:active { 中略 }

/* 表紙 メニュー項目(カテゴリ) */
.cat { 中略 }

/* 表紙 メニュー項目(子カテゴリ) */
.sub { 中略 }

/* 表紙 メニュー項目(小説一覧) */
.all { 中略 }

/* 表紙 メニュー追加項目 */
.add { 中略 }



 ↑こんな風になればOKです。

 次に、少しややこしいのですが、

/* 表紙 メニューリスト */
.item { line-height:100%; padding:0px; margin:0px 0px 1em 0px; }

と、

/* 表紙 メニュー項目(カテゴリ) */
.cat { color:#******; font-weight:bold; border:solid 1px #******; background-color:#******; padding:*px 1em *px 1em; margin:*px 0px 0px 0px; list-style-type:none; }

の部分から、それぞれ青字で記した「padding:0px; margin:0px 0px 1em 0px;」と「list-style-type:none;」を削除してください。

/* 表紙 メニューリスト */
.item { line-height:100%; }
  (中略)
/* 表紙 メニュー項目(カテゴリ) */
.cat { color:#******; font-weight:bold; border:solid 1px #******; background-color:#******; padding:*px 1em *px 1em; margin:*px 0px 0px 0px; }



↑となったところで、今度は赤字で記した部分(「.cat」のスタイル設定の「background-color:#******;」以外の部分)を、「.item」のスタイル設定に移動してください。
 つまり……

/* 表紙 メニューリスト */
.item { line-height:100%; color:#******; font-weight:bold; border:solid 1px #******; padding:*px 1em *px 1em; margin:*px 0px 0px 0px; }
  (中略)
/* 表紙 メニュー項目(カテゴリ) */
.cat { background-color:#******; }



 このようになれば、作業は完了です。お疲れ様でした!



*    *    *

Information

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

Comment

コメントの投稿

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







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

Trackback

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

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