FCafe  追記の折り畳み

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

  _fold シリーズをリニュした訳ですが、書き直し作業中にふと気付いた事があります。
「・・オレって、『折り畳み』の記事ってあんまり書いてないよな?」
確認してみますと、当店の初代テンプレートを始め Valhalla(Valkyrie) や Float などでも多用した「記事折り畳み(タイトルの目次化)」 や、巷でよく見られる 「追記折り畳み」 については具体的な方法について書いた記事がありませんでした。
折り畳みについては既にsugさんが 万能スクリプトを発表されてますし、「追記」に関しては 前文(topentry_body)のみでこれを行う方法について(目的不明な記事を)書いてしまってましたので自分的には「終わって」た事になってたのでした。
しかし、テンプレ作業後はその収穫で暫く食い繋ぐのが定例の当店ですし、ネタ枯れの秋でもありますので、「選択肢は多い程良い」という金看板を掲げて 挑戦してみました 「畳みネタ」。
・・・まずは 『追記の折り畳み』 を一題。

  追記の折り畳みは個別参照頁に移動せずに「続き」が読める便利な機能です。 サポートされている共有テンプレートも少なくありませんが、ロードされる内容が倍増して頁表示が重くなってしまう懸念があるのと、「記事内容は個別頁で読む」 という当店のスタイルもあって今まで供出した共有テンプレートには搭載してませんでした。
しかし通常のblogでは当店のようにページモードでの表示件数をMAXに設定しているケースは殆ど無いであろうと思われ 今回の Asgard_fold では試みに実装してみた訳です。 ・・するとどうでしょう、実に様々な手法が在(り得)るのに気付いてちょっとしたマイブームになってしまったのでした。(あれこれ試しました)
以下にお示しするのはその一例で 記事部ソースに「スクリプト臭」が漂わないようにしたもの。
( 何かの参考になれば幸いです )

SAMPLE


【 設置法 】  記事領域の本体(文章)部分 を以下のようにします。

<%topentry_body>
<!--more--><br id="M" /><!--/more-->
<!--more_link--><div class="m" id="m<%topentry_no>"><!--/more_link-->
<%topentry_more>
<!--more_link-->
</div><a href="<%topentry_link>#M" class="mlk" id="l<%topentry_no>">▼</a>
<!--/more_link-->
クラス名やID接頭文字、リンク文言 等は一例です。お好みで設定されて下さい
 

テンプレート末尾(  </body> タグの手前)に以下のタグ(スクリプト)を貼ります。

<!--not_permanent_area--><script type="text/javascript"><!--
function mFold(){ 
if(document.getElementsByTagName){
 var A=document.getElementsByTagName('A');
 for(i=0;i<A.length;i++){ if(A[i].className=="mlk") {
  var N=A[i].href.split('entry-')[1].split('.')[0];
  A[i].href="javascript:MSW("+N+")";A[i].title="OPEN"
} } } }
mFold();

function MSW(N){
var A=document.getElementById("m"+N); 
var B=document.getElementById("l"+N);
if(B.title=="OPEN"){ 
A.style.display="block";B.innerHTML="▲";B.title="CLOSE";
} else { 
A.style.display="none"; B.innerHTML="▼";B.title="OPEN";
} }
//--></script><!--/not_permanent_area-->
 

CSSに以下を追加します

.m {display:none}
 

【 解 説 】 頁末のスクリプトが「追記リンク」のアドレスをjavascript実行命令に書き換えます。
また、同時に追記リンクのtitleもSW用の内容に設定します。
リンク(SW)クリック時に実行される関数は「追記」部分の表示・非表示の切り替えと共に自己の文言・title内容の切り替えも行う、という仕組みです。
この方法の特徴は以下の通りです。

Comment

daniel daniel Edit
10/20 09:10

漢字圏の方からと思ったらロシアすかや?
意味不明のコメントはスパムにナルニコフ

芹霞 芹霞 Edit
01/29 16:02

こんにちは。
こちらの追記の折り畳みを使わせていただこうと着ました。
いつかは、いろいろアドバイスをありがとうございました。
またお尋ねしたいのですが、個別記事でも追記折りたたみは行えないのでしょうか?
上記のを実行すると、始めのページは大丈夫なのですが、
fc2.com/blog-entry-○.htmlでは通常の表記になってしまうのです。
もしお時間がございましたら、お教えください。
よろしくお願いいたします。

daniel daniel Edit
01/29 18:34

芹霞 さんこんばんは。
「追記の折り畳み」 は個別頁へ移行の手間を掛けずに追記も読めるようにしたいけれど (複数記事が表示されるTOP頁等では)本文・追記を両方表示するとテキスト量が増えて頁が読み難くなってしまう、という場合に使用するものだと考えております。
( なぞなぞやクイズ で用いる、という考えもあるかもしれませんし、 本文だけで原稿用紙ン百枚書く方もいらっしゃるようなので一概にはいえませんが )
よって、各記事を個別に読む permanent_area では追記を折り畳む理由は無く、本文と通しで読めるようにしておくのが良いように(私は)思うのですが。
「スクリプト無効環境では追記が表示されないまま」 の折り畳みなどはダメダメな訳です

芹霞 芹霞 Edit
01/29 20:19

わかりました。
すごく丁寧にお教えいただいてありがとうございます。
なるほど、素人の無謀な考えでした。
いつも、本当にすみません。


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/380-bb0fbb6a

Shown after Admisson
FCafe *
 追記の折り畳みを行う前二記事のソースを読み返していたら何だかもやもやした気分に。「もうちょっとシンプルにできるんじゃないか?」て感じがしきりにしまして、まだ使った事の無いノード参照てのを試してみ
.

≫ 追記のシーソー折り畳み Ash(Asgard)_fold改訂 ≪

2006 / 10 / 23  Mon
Entry   
Comment 4 / TB 1 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。