--年--月--日

■スポンサーサイト

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

■追記文章の折りたたみ

ブログカスタマイズ覚え書きとして、自分用のメモ記事なので内容はスルーして下さい^^;

・追記文章を折りたたみ形式に変更しました。
『 続きを読む 』 をクリックした時に、個別ページに飛ぶ事なくスムーズに読む事ができるので便利です。

小粋空間 様、ありがとうございましたm(_ _)m



追記文章の折りたたみ 2.0 for FC2 ブログ

scrirt.aculo.usから 『 Downloads page 』 → 『 current version 』 の 【 scriptaculous-js-1.7.0.zip 】 をダウンロード。
ダウンロードアーカイブを解凍して下記の4ファイルをアップロード。

/lib/prototype.js
/src/controls.js
/src/effects.js
/src/scriptaculous.js



・テンプレートの修正 (HTMLヘッダ修正)

HTMLの編集画面を開き、</head> の直前に下記を追加します。
<script type="text/javascript" src="[ファイルURL]/prototype.js"></script>
<script type="text/javascript" src="[ファイルURL]/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="[ファイルURL]/effects.js"></script>
<script type="text/javascript" src="[ファイルURL]/controls.js"></script>

<script type="text/javascript">
Effect.DefaultOptions = {
transition: Effect.Transitions.sinoidal,
duration: 0.5, // seconds
fps: 60.0, // max. 60fps due to Effect.Queue implementation
sync: false, // true for combining
from: 0.0,
to: 1.0,
delay: 0.0,
queue: 'parallel'
}
function ajaxShowHide(entryID) {
element = $('Text' + entryID);
if(element.style.display == 'none') {
options = {
afterFinish: function(effect) {
$('Link' + entryID).firstChild.innerHTML = '続きを隠す △';
Element.show(effect.element);
}
};
Effect.BlindDown(element, options);
} else {
options = {
afterFinish: function(effect) {
$('Link' + entryID).firstChild.innerHTML = '続きを読む ▽';
Element.hide(effect.element);
}
};
Effect.BlindUp(element, options);
}
}
</script>
[ファイルURL]はファイルのアップロード先のURLを設定してください。
※折りたたみ速度を変更する場合は、『 duration: 0.5, // seconds 』 の数値を変更します。


・テンプレートの修正 (追記文章表示用タグ修正)
追記部分を修正します。

変更前
<!--more_link-->
<div class="entry-more">
<a href="<%topentry_link>#more">続きを読む"<%topentry_title>"</a>
</div>

<!--/more_link-->

変更後 (閉じた時に記事タイトル位置に戻る)
<!--more_link-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ▽</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="#a<%topentry_no>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return true;">続きを隠す △</a></div>

<!--/more_link-->
※div 開始タグと a 開始タグの間に改行を含まないようにしてください。(Firefox で正常に動作しなくなります)

次はサイドバーの折りたたみかな。。

メイン

コメント

コメントする

サイト管理者にのみ通知する

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