East of R134 元(仮)
<< 201707||01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31  >>
Index[Web]JUGEM/Blog 【JUGEM】「続きを読む」の折り畳み003 

【JUGEM】「続きを読む」の折り畳み003

JUGEMテーマ:テンプレート

カスタマイズ前にこちら(別窓)と【JUGEM】独自タグ一部変更に伴う注意点(別窓)を一読ください。

[注意]
テンプレートによっては上手く作動しない場合があります。
大半のテンプレートの場合、大丈夫ですが、作動しない場合は以下の最新版をお試しください。
最新版:2008.05.05 【JUGEM】「続きを読む」の折り畳み003[再改訂](20080505)

尚、このスクリプトの原型はJUGEMカスタマイズ講座様へ。
JUGEMカスタマイズ講座様のスクリプトは「記事の内容」に書かれたものを折りたたんでいましたが、独自タグが増えた今、「記事の続き」に書かれた内容を折りたたみ、個別ページに行かなくても読めるようにしました。

今回は個別ページでも折りたたまれるように、改変してみました。尚、今回の仕様はW3Cで定義されていない独自タグ(<org />)を使用するため、Another HTML-lint gatewayなどのHTML文法チェックをするとエラーもしくは警告がなされます。ご了承下さい。

また001[改訂]002[改訂]と同様、「記事の内容」に書いていて、途中で隠したくなった場合、アドバンス設定「記事の続き」に書かなくても、「<org />を入れればそこから折りたため、個別ページに行ってもそのまま折りたたまれています。

下準備としてHTMLファイルのエントリ表示部分(この色)を書き換える。尚、cssファイルの下準備は必要ありません。

変更前
<!-- BEGIN entry -->
<div class="entry">
<div class="entry_title"><a href="{entry_permalink}">{entry_title}</a></div>
<div class="entry_date">{entry_date}|{entry_time}<br style="clear:both;" /></div>
<div class="entry_body">{entry_description}</div>
<div class="entry_more">{entry_sequel}</div>
<div class="entry_state">{user_name}|{category_name}|
{comment_num}|{trackback_num}|</div>
</div>
{trackback_auto_discovery}
<!-- END entry -->

変更後
<!-- BEGIN entry -->
<div class="entry">
<div class="entry_title"><a href="{entry_permalink}">{entry_title}</a></div>
<div class="entry_date">{entry_date}|{entry_time}<br style="clear:both;" /></div>
<div class="entry_body">{entry_description}
<!-- BEGIN entry_sequel_link -->
<a name="{entry_sequel_id}" id="{entry_sequel_id}"></a><org />
<!-- END entry_sequel_link -->
{top_entry_sequel}
</div>
<div class="entry_state">{user_name}|{category_name}|
{comment_num}|{trackback_num}|</div>
</div>
{trackback_auto_discovery}
<!-- END entry -->
※折り畳み部分に記事を書く場合は、アドバンス設定「記事の続き」を書く際、最初に「<org />」を必ず入れること。入れなければ個別ページに飛んだ際、折りたたまれません。
<!-- END entry -->のうしろに入れるJavaScriptファイルは以下。
JavaScriptファイル
<script type="text/javascript">
<!--
  var objDiv = document.getElementsByTagName(tagName);
  for (var i=0;i<objDiv.length;i++) {
    if ( objDiv[i].className == className && objDiv[i].getElementsByTagName('org').length > 0 ) {
      var tmp = gTextSequel.length;
      var linkText = Array('<a class="toggleSequel" href="#" onclick="return toggleSequel(',tmp,')" onkeypress="return toggleSequel(',tmp,')">',gTextVisible,'</a>').join('');
      gTextSequel[tmp] = new Array();
      gTextSequel[tmp].text = objDiv[i].innerHTML.replace(/<org />/i,'<ORG>');
      gTextSequel[tmp].flag = false;
      objDiv[i].setAttribute('id',Array('jugemEntryBody',tmp).join(''));
      objDiv[i].innerHTML = Array(gTextSequel[tmp].text.split(/<ORG/?>/i)[0],linkText).join('');
    }
  }
}
function toggleSequel(idNum) {
  if (!document.body.innerHTML) return false;
  var idName = Array('jugemEntryBody',idNum).join('');
  var objFocus = document.getElementById(idName);
  if (objFocus) {
    var tmpText = new Array();
    var bodyText = '';
    var linkText = (gTextSequel[idNum].flag) ? gTextVisible : gTextHidden;
    linkText = Array('<a class="toggleSequel" href="#" onclick="return toggleSequel(',idNum,')" onkeypress="return toggleSequel(',idNum,')">',linkText,'</a>').join('');
    if (gTextSequel[idNum].flag) {
      bodyText = Array(gTextSequel[idNum].text.split(/<ORG/?>/i)[0],linkText).join('');
    } else {
      switch (gTextPosition) {
      case 0:
        bodyText = gTextSequel[idNum].text.split(/<ORG/?>/i).join(linkText);
        break;
      case 1:
        bodyText = Array(gTextSequel[idNum].text,linkText).join('<br />');
        break;
      case 2:
        bodyText = gTextSequel[idNum].text.split(/<ORG/?>/i).join(linkText);
        bodyText =         break;
      }
    }
    gTextSequel[idNum].flag = (gTextSequel[idNum].flag) ? false : true;
    objFocus.innerHTML = bodyText;
  }
  return false;
}
gTextVisible = '↓[続きを表示]'; /* 「続き」を表示するためリンク */
gTextHidden = '↑[続きを隠す]'; /* 「続き」を隠すためのリンク */
gTextPosition = 0; /* 「続きを隠す」を表示する位置 0:「続き]の前 1:「続き」の後ろ 2:両方 */
gTextSequel = new Array();
initSequel('div','entry_body');

//配布元:http://nz.jugemers.net/log/eid37.html(JUGEMカスタマイズ講座)
//改造元:http://koda.jugem.cc/?eid=2580(East of R134)
// -->
</script>

関連
【JUGEM】「続きを読む」の折り畳み001
【JUGEM】「続きを読む」の折り畳み002
【JUGEM】「続きを読む」の折り畳み001[改訂]
【JUGEM】「続きを読む」の折り畳み002[改訂]
コダミタカ * Category of [Web]JUGEM/Blog*9 Comments * 0 Trackbacks * 
Check
このエントリーをはてなブックマークに追加
Background Photo Material by ©FlashNatural

同じカテゴリの記事

    【JUGEM】ツリー化スクリプトver.5(2016.01.09)
    【JUGEM】個別編集ページへのリンク(2014.11.02)
    【JUGEM】JUGEMdress(2011.01.02)
    【JUGEM】パンくずナビもどき(2009.11.21)
    【JUGEM】独自タグ50個追加に伴うscriptの修正(2009.11.20)
Index- スポンサーサイト 

スポンサーサイト


スポンサードリンク * Category of -*0 Comments * 0 Trackbacks * 
Check
このエントリーをはてなブックマークに追加
Background Photo Material by ©FlashNatural
Trackback
Trackback URL :
ご利用の前にこちら(別窓)を一読ください。

Comment by Facebook
Comment
こんにちわ。初めまして。
当方のブログのほうでこちらのスクリプトを利用させていただこうと思いましたが追記部分が最初から表示されてしまいます。
トップページでも同じで<org/>を入れても表示されてします。
一度見ていただきたいんですがブラウザのソースだけでは全部見えませんよね。どうしたらよろしいでしょうか・・。
お時間あるときにでも返信ください(´;ω;`)ご多忙な中申し訳ありません。

  • 2011
  • 01.05
  • [Wed]
  • 01:53
  • コダミタカ
>シアーさん
始めまして。

ざっとソースを拝見したのですが、エントリ部分の以下の変更を行っていますか?
行っていないように見受けられるのですが。ご確認のほどよろしくお願いします。
変更前
<div class="entry_body">{entry_description}</div>
<div class="entry_more">{entry_sequel}</div>
変更後
<div class="entry_body">{entry_description}
<!-- BEGIN entry_sequel_link -->
<a name="{entry_sequel_id}" id="{entry_sequel_id}"></a><org />
<!-- END entry_sequel_link -->
{top_entry_sequel}</div>

  • 2011
  • 01.08
  • [Sat]
  • 01:51
  • シアー
すいません><お返事遅れました;;
そちらの変更は最初にしてました。
でも反映されないので無効にしてました…。

今現在上記のものをそのままコピーしていますが追記部分も表示されてしまいます。
これはブログトップで各記事の追記以下は表示されない状態になるんですよね??新しいタグとか追加される数年前まで同じようなのは使えてたんですが、新たにこの変更してから追記はずっと表示される状態なので全然わからず。。お手数かけます><;

  • 2011
  • 01.09
  • [Sun]
  • 11:17
  • コダミタカ
>シアーさん

スミマセン、自分でも数年前に書いたものなのですっかり忘れていました。

【最新版】
http://koda.jugem.cc/?eid=2787
こちらにあるように、まず、css部分に以下を追加してください。

.orgnone { display: none;}
body#eid .orgnone { display: block;}


次に、お手数ですが、以下の点もお願いします。
>※折り畳み部分に記事を書く場合は、アドバンス設定「記事の続き」を書く際、最初に「<div class="orgnone"><org /></div>」を必ず入れること。入れなければ個別ページに飛んだ際、折りたたまれません。

これで、トップ表示時、個別ページ表示時、どちらも折りたたまれて表示されるはずです。
ただソース表示で拝見する限りはトップページは現状で折りたたまれなければならないくらい、欠点は見当たりませんでした。
他のスクリプトの兼ね合いもあり動かないのかもしれません。

私は、URLを見ていただければ解るように、.ccドメイン(β版から)の人間です。
なのでその頃主流だったJUGEMカスタマイズ講座(現在、閉鎖)さんからのスクリプト(サイド折りたたみ、カテゴリのツリー化)を改造して使っていますし、他の方のスクリプトもJUGEMカスタマイズ講座さんありきで作られたものしか入れていません。

あとあまり関係ないと思うのですが、3カラム化させるために<table>タグをお使いになっていますが、以前<table>タグをentry部分のデザインで使っていた場合動作しないことを確認しましたが、以前動かなかったのは以下のような感じでした。
<table>
<tr><td>タイトル</td></tr>
<tr><td>本文内容</td></tr>
<tr><td>折りたたみ内容</td></tr>
<tr><td>カテゴリ等</td></tr>
</table>

参考になれば幸いです。

コメントありがとうございます。
上の状態から新しく上記のCSSをコピーしても動作せず念のため
【最新版】
http://koda.jugem.cc/?eid=2787
のスクリプト部分をコピーしなおしたら動作しました。

かなりお手数おかけしまして申し訳ありません。
すごい助かりました。ありがとうございます!
ちなみに現在当ブログの方で動作試験していますのでよかったら確認下さい。

動作確認は出来たのですがついでにあと一つよろしいでしょうか(´・ω・`)

jugemカスタマイズ講座の時は、[続きを読む]を押すとその場所と追記最後に[閉じる]ボタンがあったのですが、こういうのはすぐに出来るものでしょうか…。
特に無くてもいいのですが、追記を読み終わるとその場所で閉じれたら便利かなと改めて思ったので。
難しかったら結構なのでスルーしてくださいー。失礼しました。

  • 2011
  • 01.13
  • [Thu]
  • 00:11
  • コダミタカ
>シアーさん
開閉ボタンを2箇所に表示させるには、

gTextVisible = '↓[続きを表示]'; /* 「続き」を表示するためリンク */
gTextHidden = '↑[続きを隠す]'; /* 「続き」を隠すためのリンク */
gTextPosition = 0; /* 「続きを隠す」を表示する位置 0:「続き]の前 1:「続き」の後ろ 2:両方 */
gTextSequel = new Array();
initSequel('div','entry_body');

この箇所の

gTextPosition = 0; /* 「続きを隠す」を表示する位置 0:「続き]の前 1:「続き」の後ろ 2:両方 */

この部分の 0 を 2 に変えてください。

よろしくお願いしますm(_ _)m

何度もスイマセン><;
折り畳みは出来るようになったのですが
追記冒頭に
<div class="orgnone"><org></org></div>
を入れると、個別記事のみ開閉ボタンと追記文章が表示されない状態になります。(トップページでは折りたためます。)

またこのタグを入れなければトップでは正常通り折り畳み可能で個別ページでは全文表示されました。
http://tachalog.jugem.jp/?eid=26
にて該当タグを入れて動作確認しています。

ただ、個別記事を見るときは全文見たい場合やコメントを書きこむ場合だろうですから折りたためなくても構わないカナとも思います…。
なので今回は該当タグを使用しないでおきます。

報告と御礼のコメントでした。
長々とお付き合い頂きすいません><
スゴイ助かりました!ありがとうございました。

  • 2011
  • 01.15
  • [Sat]
  • 18:45
  • コダミタカ
>シアーさん
あまりお力になれず申し訳ないです。
不具合報告ありがとうございます><
時間ができ次第、また試行錯誤したいと思います。
こちらこそ、本当にありがとうございましたm(_ _)m

ご利用の前にこちら(別窓)を一読ください。







About
元 (仮) 2007.01.01改名。
読了の書籍メモ(2004.03〜+α)⇒946冊。
JUGEM改造は[Web]JUGEM/Blogから。
海外ドラマメモ有り。※本国放送ネタ有り⇒ネタバレ有り。
書籍メモにBL(BoysLove)的内容を含むものもあります。苦手な方、ご注意下さい。
2008.11.04から写真の表示方法変更に伴い携帯電話からの写真閲覧ができない場合がありますが、表示させる方向を考えてはいません。

過去のはこちらから
Twitter
Pick Up Entries

New Entries
Entries
Comments
Trackbacks
Category
Archives
Links
Blog People
BL×B.L. People
BL×B.L. People
BL NOVELS TB
BL COMICS TB
Ranking


Others

  • RSS feed meter for http://koda.jugem.cc/
  • あわせて読みたい
  • SEO対策My Zimbio

adadadadadad

▲Page Top

アクセスランキング