yozoの気が向いたと記2.0

　ここのブログでは、記事の一番下の左にある「追記を読む」のリンクをクリックすると、記事全体をもう一度更新して、追記部分が表示されています。それでは、「追記を読む」をクリックするのが面倒となってしまっています。そこで、追記部分を折りたたんで、記事全体をもう一度更新しなくても、追記部分が表示されるようにしました。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ

　追記部分の折りたたみは、お友達のROOM-Mのmioさんの記事テンプレート、変えましたで紹介されていたアジアンビートカンケリキッズのbiscoさんの記事追記の展開・折りたたみ及びHere and There BlogのHiroさんの記事エントリー、コメントの折りたたみ-2を参考に以下の手順で設置しました。なお、このスクリプトは海外のブログscriptygoddess様の記事Collapsing entries AND COMMENTSよりお借りしました。
　mioさん、biscoさん、Hiroさん、scriptygoddess様、本当に、ありがとうございました。m(_ _)m

追記を更新せずに開閉する

1. FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
2. 「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
3. 「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の</head>の直前にスクリプトを追加します。
   

   • 必ずバックアップしましょう！

   
   　いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪

   
   

   ?途中省略?

   
   <script type="text/javascript">
   <!--
   function showMore(varA1, varB1){
   var123 = ('varXYZ' + (varA1));
   varABC = ('varP' + (varA1));
   if( document.getElementById ) {
   if( document.getElementById(var123).style.display ) {
   if( varB1 != 0 ) {
   document.getElementById(var123).style.display = "block";
   document.getElementById(varABC).style.display = "none";
   } else { document.getElementById(var123).style.display = "none";
   document.getElementById(varABC).style.display = "block"; }
   } else { location.href = varB1;
   return true; }
   } else { location.href = varB1;
   return true; }
   }
   //-->
   </script>
   </head>
   

   ?以下省略?

4. [Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これに<%topentry_title>と入力して、検索してください。そして、<%topentry_title>を囲んでいるタグにある、id="<%topentry_no>"の前にaをつけて、XHTML準拠のエラーを回避します。
   ※id="<%topentry_no>"がない場合は、下の例のように、id="a<%topentry_no>"を追加するようにしてください。これがないと、追記部分を閉じたときに記事のはじめに戻れなくなります。
   

   ?途中省略?

   
   <!-- エントリータイトル -->
   <h3 id="a<%topentry_no>" class="entry-header">●<%topentry_title></h3>
   

   ?以下省略?

5. 次に、<!--more_link-->で検索して、<!--more_link-->?<!--/more_link-->のコードを下のように変更してください。
   

   ?途中省略?

   
   <!-- 追記 -->
   <!--more_link-->
   <!--yozoEntryIfExtended-->
   <span id="varP<%topentry_no>">
   <a href="<%topentry_link>#<%topentry_no>" onclick="showMore(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;" onkeypress="showMore(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;">【<%topentry_title>の続きを開く】</a></span>
   <div id="varXYZ<%topentry_no>" style="display: none">
   <%topentry_more><br style="clear:both;" />
   <a href="#a<%topentry_no>" onkeypress="showMore(<%topentry_no>,0);return true;" onclick="showMore(<%topentry_no>,0);return true;">【<%topentry_title>の続きを閉じる】</a>
   </div>
   <!--/yozoEntryIfExtended-->
   <!--/more_link-->
   <!--more-->
   <%topentry_more>
   <!--/more-->
   

   ?以下省略?

6. [更新]をクリックして動作を確認しましょう。

• yozoからのお願い

　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておくようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m