追記部分を折りたたむ

2010–01–30 （Sat） 05:47

追記を別ページへのリンクで飛ぶデザインの物を、ジャバスクリプトを使用した折りたたみ表示に変更します。
あらかじめ追記以下の部分を読み込み済みで、デザイン上閉じているだけです。
『追記Open』の文字クリックで開閉して、視点移動することなく続きが読めます。

※当方で配布中のテンプレートに対応したHTMLを記述しています。
他のデザインに関しては、クラス名などを置き換えてカスタマイズしてください。

※2010年02月17日追記※
17日以前の追記用HTMLにて、環境設定によっては「拍手アイコンが表示されない」という不具合を報告いただきましたが、折りたたみ専用HTMLの修正をいたしました。
記事上のHTMLをそのままコピー&ペーストしていただくことで、拍手・ブックマークアイコンを記事上に表示できます。
また、ジャバスクリプトをオフにして閲覧している方の場合は、「追記リンク」での表示に切り替わるようになっています。
※追記終了※



まず、カスタマイズしたいテンプレートのHTMLの中から、記事を表示させる部分を見つけてください。
↓こんな記述が見つかると思います。この下に目的のHTMLが隠れています。

<!--▼記事部分ここからはじまり▼-->
<!--topentry-->
<div class="section" id="a<%topentry_no>">

すぐ下に↓こういう記述がありますが、ここはタイトル部分なので今回はいじりません。

<!--▼記事タイトル部分-->
<h2 class="entry-header"><a href="<%topentry_link>" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" title="「<%topentry_title>」の永続的アドレス"><%topentry_title></a></h2>

 
 
 
 
 
そして、更に下の方を見ていくと… 記事本文部分が出てきました。
追記以下へのリンクを含むHTML部分を削除して、折りたたみ専用のHTMLで置き換えます。
プレビューで折りたたみ部分をクリックして「機能するかどうかを確認」してから、更新ボタンをクリックしてください。




追記リンクHTML
対応テンプレート名 eme_milky-way など

<!--▼記事本文部分-->
<div class="entry-body">
<div class="entry-time"><%topentry_year>&ndash;<%topentry_month>&ndash;<%topentry_day>&nbsp;（<%topentry_youbi>）&nbsp;<%topentry_hour>:<%topentry_minute></div>
<%topentry_body>
<!--more_link-->
<div class="entry-more"><a href="<%topentry_link>" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" title="「<%topentry_title>」の続きを読む">続きを読む &#8658;</a></div>
<!--/more_link-->
<!--more-->
<%topentry_more>
<!--/more-->

折りたたみ専用HTML

<!--▼記事本文部分-->
<div class="entry-body">
<div class="entry-time"><%topentry_year>&ndash;<%topentry_month>&ndash;<%topentry_day>&nbsp;（<%topentry_youbi>）&nbsp;<%topentry_hour>:<%topentry_minute></div>
<%topentry_body>
<!--▼追記部分-->
<!--more_link-->
<script src="http://blog-imgs-29.fc2.com/e/m/e/emeraldmountain/tuiki_oritatami_2a.js"></script>
<div class="entry-more"><a href="<%topentry_link>" title="「<%topentry_title>」の追記" onclick="oritatami('<%topentry_no>','<%topentry_title>');return false">追記&nbsp;&ndash;&nbsp;<span id="<%topentry_title>">open</span></a><noscript><a href="<%topentry_link>" title="「<%topentry_title>」の続きを読む">&nbsp;</a></noscript></div>
<div id="<%topentry_no>" style="display:none"><%topentry_more></div>
<!--/more_link-->
<!--more--><%topentry_more><!--/more-->