FCafe　 記事の分割表示

　　さて、前二つの記事で本来「エントリ前文」である　topentry_body 単体を「前文＋追記」に分ける方法について書かせていただきましたが、ついでにもう少しこの「応用」を考えてみました。
ＦＣ２に限った事ではありませんが（頁スクロールを要する程度の）長文を書くブロガーの方はそれ程多くないようです。　これは（解釈によっては）「通常？のテンプレートでは長文が読み難い」ためであるとも考えられないでしょうか。（コンパクトな３カラムとかに小さな文字が延々と連なっていたらちょっと○○いような気もするかも）
　写真（画像）については既に 「スライドショー」 等の提案をさせていただいている当店ですが、文章についても同様の事が可能であれば便利と感じられる方がいらっしゃるのではないか、とそう考えまして (白木屋の軟骨フライみたいですが) topentry_body を複数の「節」に分割して表示する方法を考えてみました。

 

SAMPLE

【 設置法 】 　テンプレートソース中の <%topentry_body> を以下のようにします。
（ 前二つの記事と同じです ）

<div class="ebody" id="t<%topentry_no>"><%topentry_body></div>

topentry ブロック以降 (HTML末尾 </body> 手前でも可 ）に以下のスクリプトを書きます

<script type="text/javascript"><!--
function Divide(Cname) {
var A =document.getElementsByTagName('DIV');
var s1='&nbsp;<a href="javascript:ctx('+"'";
var s2=')" title=" 表示する "> ';
for (i=0;i<A.length;i++) {
if (A[i].className==Cname) {
var B=A[i].innerHTML.split(/<!\-\-=*\-\->/);
if (B.length>1) {
var ID=A[i].id;  var n=B.length;
for (j=0;j<n;j++) {B[j]='<div id="'+ID+'p'+(j+1)+'">'+B[j]+'</div>'}
var C= B.join('')+'<p class="selector" id="s'+ID+'">';
for (j=1;j<=n;j++) {C=C+s1+ID+"',"+j+","+n+s2+j+' </a>'}
A[i].innerHTML=C+'&nbsp;</p>';
B=A[i].getElementsByTagName('DIV');
for  (j=1;j<n;j++) { B[j].style.display="none"}
B=document.getElementById('s'+ID).getElementsByTagName('A');
B[0].title=" [表示中] ";B[0].style.color="red";
} } } }

function ctx(ID,k,j) {
var C=document.getElementById('s'+ID).getElementsByTagName('A');
for (i=0;i<j;i++)  {
if (i==k-1) {
document.getElementById(ID+'p'+k).style.display="block";
C[i].title=" [表示中] ";C[i].style.color="red";
} else {
document.getElementById(ID+'p'+(i+1)).style.display="none";
C[i].title=" 表示する ";C[i].style.color="blue";
} } }

Divide('ebody');
//--></script>

記事 (topentry_body) 入力（投稿）時　各節の区切りとなる部分に以下のコメントを挿入します

<!--===============================-->

• ” = ” の数は幾つでも構いません　（ 後で 区切り箇所が分かり易いよう存分に付けて下さい）
• コメント内は ” = ”以外（空白も）書かないようにします

.

【 解 説 】 　今回のスクリプトは一つ前の記事のそれと殆ど同じ仕組みです。　　即ち各記事を調べ 「区切りコメント」　がある場合は記事を分割し第２節以下を非表示化します。　　異なるのは分割された記事の３番目以降の記事も捨てずに、各分節毎にＳＷを作製する点のみです
デフォルトではＳＷはその節の表示状況を「色」で表すようにしてありますが、この辺りはお好みで変更されて下さい (　マウスオン時のメッセージも指定できます　 ）
勿論　スクリプト無効環境では記事は分割されませんし not-permanent_area ブロックでスクリプトを括れば個別表示頁では全文表示となります。 (”区切り”はどの場合も表示されません )

スクリプトを少し簡略化したものを共有プラグインにＵＰしました

2006 / 02 / 09 　Thu
Entry   
Comment 2 / TB 1 / Edit