彼此ともつかぬ場所


□ スポンサー広告 □

スポンサーサイト

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




*    *    *

Information

□ 修正報告 □

子カテゴリ折りたたみカスタマイズが JavaScript オフ時に対応

for_novel シリーズ インデックス画面の子カテゴリを折り畳む」(2009/11/27付けで、タイトルを「2009/11/26以前版」として、記事内容も新しい方法に修正しております)でご紹介したインデックス画面の親子カテゴリ折りたたみ方法で、JavaScript がオフの時に、折りたたまれた子カテゴリを開く事が出来ないという点について、なんとか打開策を見つけたので、ご報告します。

 上記折りたたみカスタマイズをされた方(2009/6/28以前版も含む)は、テンプレートの

<!-- ▽ インデックス画面 -->

内のメニューの部分が、以下のようになっている事だと思いますが……、

<!-- ▼ メニュー -->
      <div class="menu">
        <h2 class="menuhead">Contents</h2>
        <div class="item all"><a href="<%url>?tag=*" title="小説一覧">Novel List</a></div>
<!--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="<%category_name>" onclick="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-->

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


 この赤字の部分<!--category-->から<!--/category-->までの部分)を、以下の青字の部分とそっくり入れ替えてください。

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

        <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 がオンの場合は折りたたまれている子カテゴリがクリックで開閉出来、JavaScript がオフの場合は子カテゴリが開いた状態で表示されるようになります。
 行数が多い事もあり、アルファベットの羅列を見ただけで嫌になってしまう方もいらっしゃるかもしれませんが、コピー&ペーストしてまるっと差し替えてくだされば良いだけです。選択範囲に気をつけて、是非挑戦してみてください。

 晴れてJavaScript無効時に対応する事が出来、スクリプト考案者のいたおさんの許可もいただけたので(FC2ブログのテンプレート工房「親子カテゴリの折りたたみ」コメント欄参照)、これから順次、既存の小説用テンプレートにこの機能を追加していきたいと思っています。
 親子カテゴリ折りたたみカスタマイズを、これから使いたい、という方は、テンプレートのバージョンアップをもうしばらくお待ちください。



 ここから、覚え書きめいた蛇足。
 JavaScript をもう少し理解出来るようになった時に、自分でも解答を見つけられるように、今回考えた諸々を記しておきます。

 今回、いたおさんにスクリプト利用の許可をいただく際に、私が書いたコメントは以下の通り。

 お久しぶりです。以前、このスクリプトをカスタマイズ記事に使わせていただいた、GreenBeetleと申します。
 スクリプトについて少しお知恵を拝借したくて、まいりました。

 JavaScript が無効の場合に子カテゴリを表示させておきたくて、現在色々と試行錯誤中なのです。一から別なスクリプトを作りあげるには私は圧倒的に知識が足りないし、他のスクリプトを探してもみましたが、スタイルで非表示を切り替えるこの方法が一番解り易かったし、何よりいたおさまのスクリプトがとてもシンプルでスマートだと思うので、なんとかこのスクリプトを使って、子カテゴリの折りたたみ&JS無効時の子カテゴリ表示が実現できないかと考えているところです。

 それで、以下の三つの案を考えてみたのですが、スクリプトを作られた立場として、どれが一番許容出来るものか、教えていただけないでしょうか。

1)折りたたみ部分を含むカテゴリ一覧を、丸々 document.write で書き出し、折りたたまないカテゴリ一覧を noscript で囲む。
 →HTML lint で、「script タグの中に div タグは書けません」とエラーになってしまう。

2)子カテゴリブロックの初期設定を display:block にしておいて、子カテゴリブロックと同時に小さな画像を読み込ませて、そのタグに onload でこのスクリプトを動作させ折りたたむ。
 →HTMLの仕様書によると、onload は img に使えない。(IE、FF、Operaではきちんと動作していたし、lintでエラーは出ませんでしたが……)

3)子カテゴリブロックの初期設定を display:block にしておいて、子カテゴリブロックと同時に window.onload でこのスクリプトを動作させ折りたたむ。
 →1ページに複数の window.onload が存在しても問題ないのかが不明……。(IE、FF、Operaではきちんと動作していましたが……)

 いかんせん、JavaScriptについての知識がないため、細かいニュアンスが全然全く解りません。こんな使い方はして欲しくない、とか、そういう根本的な事すら察する事が出来ない素人なので、どうか時間のある時で構いませんので、一言お言葉添えをお願いいたします。


 普通のWEBページだったら、初期設定 display:block にしておいて、それから該当する関数を一括で window.onload って事も出来たかもしれませんが、<!--category_parent--> の中で変数使って指定しなきゃならないので、どうにもこうにも……。

 で、いたおさんからは、1の方法が良さそうだ、とのお返事をいただきました。
 確かに、lint のチェック通り、<script> は <div> の Parents にはなれないわけですが、<script> は <script> でも、document.write はそもそも文字列を書き出すためのものなんですよね。
 <script> の中で使われる要素としてではなく、単に書き出される文字列として <div> が定義されるなら、<script> の Contents の規定には当てはまらないのでは……? なーんて、自分に都合の良い事を考えてしまいますが、この辺り、実際のところどうなんでしょうね。
*    *    *

Information

Date:2009/11/25
Trackback:0
Comment:1

Comment

[331] 

こんばんは!以前の件ですが、色々考えた上で関連記事ではなく、折り畳みの子カテゴリを使用することに決めました。色々と申し訳ございませんでした。お手数おかけいたしました。
2014/06/04 【Sva】 URL [編集] 

コメントの投稿

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







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

Trackback

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

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