« スタイルシートの再構築を不要化 | Kazuの挑戦日記TOP | Lightboxで画像をCoolに! »

追記文章の折りたたみ開閉

Movable Typeのデフォルトのテンプレートでは、
 ・メインページ
 ・月別アーカイブ
 ・カテゴリアーカイブ

の各ページで『追記』部分に書かれた文章がエントリー本文の最後に「続きを読む」というリンクが現れ、それをクリックした時に読めるようになります。

しかーし、これがなにせ使い勝手が悪い!どくろ
だって、「続きを読む」をクリックすると、個別アーカイブのページにジャンプした上、追記の始まりのところに自動的に移動されてから表示されるもんだから、一瞬何の記事を読んでいたんだっけ?って結局またマウスで上にスクロールして読み返したり、なんてことになってる。(少なくとも私の場合は)

なのでこのブログ、KAZUの挑戦日記では使っていませんでした。汗

このブログでは今まで以下のようにしていました。

■トップページ
 ・カテゴリ(トップカテゴリのみ)別にイメージ写真付きで、そのカテゴリ(サブカテゴリ含む)に属するエントリのタイトルを10件表示
 ・上記エントリのタイトル一覧は個別アーカイブページのリンクを持たせる
 ・10件を超えるものは「さらに・・・」でカテゴリアーカイブページに飛ばす

■カテゴリアーカイブページ
 ・そのカテゴリのイメージ写真と、属するカテゴリ内(サブカテゴリ含む)のエントリのタイトル、概要を一覧表示する
 ・上記エントリのタイトルと、概要の右端にある「・・・続きを読む」ではエントリのアーカイブページへリンクを張る

■月別アーカイブページ
 ・その月に属するエントリを全て表示(追記も全部表示)

■エントリの個別アーカイブページ
 ・そのエントリを表示(追記も全部表示)

 

そもそも、追記なんてものは不要だと思っていたので入れていませんでした。

しかーし、上記を見ると鋭い人ならお分かり(というか見た人ならすぐ分かる)ように、『月別アーカイブページ』が非常に縦に長い!!

うーん、困った、けど、MTデフォルトの「続きを読む」は使いたくないし、と思っていると、見つけました!
小粋空間さん追記文章の折りたたみ用スクリプト(改)

追記文章が簡単に「開閉」できます。デフォルトの「続きを読む」と違い、そのまま下にサクサクっと開いたり閉じたりできます。非常に便利。

方法は、以下。

1.テンプレートにスクリプト追加

追記を開閉したいテンプレート(私の場合は月別アーカイブページ)を開いて、<head>~</head>の部分に以下を追加
<script language="javascript" type="text/javascript">
function showHide(entryID, entryLink, htmlObj) {
  extTextDivID = ('Text' + (entryID));
  extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
    if( document.getElementById(extTextDivID).style.display ) {
      if( entryLink != 0 ) {
        document.getElementById(extTextDivID).style.display = "block";
        document.getElementById(extLinkDivID).style.display = "none";
        htmlObj.blur();
      } else { 
        document.getElementById(extTextDivID).style.display = "none";
        document.getElementById(extLinkDivID).style.display = "block";
      }
    } else {
      location.href = entryLink;
      return true;
    }
  } else {
    location.href = entryLink;
    return true;
  }
}
</script>

2.テンプレートタグの修正

そのままそのテンプレートで以下の部分を見つける。
<MTEntryIfExtended>
<span class="extended">
<a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a>
</span><br />
</MTEntryIfExtended>

上記を、下のタグで置き換える。

<MTEntryIfExtended>
<div id="Link<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a>
</div>
<div id="Text<$MTEntryID$>" style="display: none">
<$MTEntryMore$>
<a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 続きを隠す</a>
</div>
</MTEntryIfExtended>

3.テンプレートを再構築

メインページのテンプレートの場合は単純に「保存して再構築」、アーカイブページの場合は、「サイトを再構築」から該当のアーカイブを選択して再構築。

以上で完了です。
動作サンプルはこのブログの2006年1月のアーカイブをご覧下さい。

実は追記を開いたり閉じたりすることは初期の段階から諦めていたため、「追記に何も書いてない」エントリがほとんどなのです。
とりあえず今年(2006年1月)分からはやっていこうかと。biggrin

コピペ用リンク

このエントリーのトラックバックURL:


このエントリーへのリンクURLを含むHTML:

同じカテゴリの記事

トラックバック

コメントを投稿



RSS

Add to goo
Add to google

はてなRSS
feedpath
Subscribe in Bloglines
Subscribe with livedoor Reader




Tag cloud

お勧め!