BlognPlus で「続きを読む」を折りたたむ

BlognPlus で「続きを読む」を折りたたむ方法を解説します。

ちなみに BlognPlus の今後のバージョンアップの予定として「記事の続き」の折りたたみが上がっていますが、折りたたみ機能が公式にサポートされるのが待ちきれない方はこのやり方を試してください。

動作例

↓ 続きを読む 》 をクリックすると、続き部分が展開されます（実際に動作するので試してみてください）。

BlognPlus で「続きを読む」の折りたたみが出来ます。
続きを読む ≫

この機能を実装するには「タグ拡張モジュール」がインストールされている必要があります。
≪ 続きを隠す

※ JavaScript が無効の場合は機能しません。

「続きを読む」折りたたみが実際にどのように動作しているかご覧になりたい場合は、以下のサイトを参考にして下さい。

※ トラックバックをいただいたサイト様に無断でリンクさせていただいています。

動作確認済み環境

BlognPlus v2.3.2（テキスト・MySQL版）、v2.2.4（テキスト版）

折りたたみに使われる JavaScript は以下のブラウザで正常に動作する事を確認済みです。

下準備

続きの折りたたみを実装するためにはまず以下の手順を踏む必要があります。

  1. 「タグ拡張モジュール」をインストールする
  2. スキンの HTML ファイルに JavaScript を書き込む
  3. スキンの HTML ファイルにスタイルシートを書き込む
  4. スキンの HTML ファイルの「記事の続き」部分のタグを書き換える

1. 「タグ拡張モジュール」をインストールする

解説ページを参考に「タグ拡張モジュール」をインストールしてください。
このモジュールには「続きを読む」を折りたたむために必要な要素が含まれています。

2. スキンの HTML ファイルに JavaScript を書き込む

「記事の続き」部分を展開するスクリプトを、<head>〜</head> 内に書き込みます。

  1. <script language="JavaScript">
  2. <!--
  3. // 「続きを読む」折りたたみ
  4. function xt_readmore(xt_id,xt_flg){
  5. var strName;
  6. var strName0;
  7. var strName1;
  8. if((xt_id=="")||(xt_id==null))return true;
  9. strName=xt_id;
  10. strName0 = "-" + strName;
  11. strName1 = "+" + strName;
  12. if(xt_flg==0){
  13. document.getElementById(strName0).style.display="none";
  14. document.getElementById(strName1).style.display="block";
  15. }else{
  16. document.getElementById(strName1).style.display="none";
  17. document.getElementById(strName0).style.display="block";
  18. }
  19. return true;
  20. }
  21. //-->
  22. </script>

※ すでに他の JavaScript がある場合は、青色部分を <script>〜</script> 内に記述してください。

3. スキンの HTML ファイルにスタイルシートを書き込む

<head>〜</head> 内に以下の記述を追加してください。

  1. <style type="text/css">
  2. <!--
  3. {XT_CSS_CONT}
  4. -->
  5. </style>

※ スキンの CSS ファイルに書き込むと上手く動作しませんので必ず HTML ファイルの方に記述してください。

4. スキンの HTML ファイルの「記事の続き」部分のタグを書き換える

{LOG}{LOGLOOP}〜{/LOGLOOP}{/LOG} 内

  1. <div class="entry_body">
  2. {LOGBODY}<br />
  3. {MOREMARK}続き▽{/MOREMARK}
  4. {LOGMORE}
  5. </div>

赤色の部分を青色のように書き換える

  1. <div class="entry_body">
  2. {LOGBODY}<br />
  3. {XT_LOG_CONT}
  4. </div>

※ お使いのスキンによっては若干記述が違います。

補足事項

個別記事表示時の動作

個別記事表示の時は隠れていた文章が最初から展開されて表示されます。
「≪ 続きを隠す」も表示されません。
スタイルシートの記述を変更する事でこの動作を変更する事が出来ます（後述）

JavaScript が無効の場合

「続きを読む ≫」の右側に「（JavaScript を無効にしている方はこちらから）」と表示されます。
「こちら」をクリックする事で個別記事として読む事が可能です。

読み込み時間について

続きを折りたたむようにすると、表紙ページでは「記事の続き」は隠れて見えていませんが「記事の本文」と一緒に読み込んでいます。

そのため、BlognPlus 本来の動作（「記事の本文」だけ読み込む）に比べ、表紙ページの容量が大きくなる事に留意してください。
（容量が増加→完全に表示されるまでに時間がかかる）

例えば「記事の続き」に大量の画像をおいている場合、表紙ページがすべて読み込まれるまで時間がかかる場合があります（ただし一度表示してしまえば、個別記事ページに移動して続きを読むより早くなります）。

個別記事表示時の動作変更方法

デフォルトの設定では個別記事表示時は“続き”が展開されますが、スタイルシートの記述を変更すれば動作の変更が可能です。

続きを常時閉じた状態にする

上記のステップ３の記述を以下のように変更してください。

  1. <style type="text/css">
  2. <!--
  3. .xt_contshow {display:block;}
  4. .xt_contmore {display:none;}
  5. -->
  6. </style>

注： JavaScript が無効の場合、“続き”部分を開く事が出来ないので読む事が出来ません。

「続きを読む」「続きを隠す」の表記変更

「function.php」の26行目あたりの赤文字部分を自分の好きな文字列に変更してください。

  1. $continue = '<div id="+'.$eid.'" class="xt_contshow">
  2. <a href="URL" onclick=\'xt_readmore("'.$eid.'",1);return false\'>続きを読む ≫</a>
  3. <noscript> （JavaScript を無効にしている方は<a href="index.php?e='.$eid.'">こちら</a>から）</noscript></div>
  4. <div id="-'.$eid.'" class="xt_contmore">'.$more.'<br />
  5. <a href="URL" onclick=\'xt_readmore("'.$eid.'",0);return false\' class="xt_conthide">≪ 続きを隠す</a></div>';

［サイト作成のヒント集に戻る］