Movable Type 備忘録

 エントリの追記をページジャンプせず表示する

  • Mar192006
  • Vote:
    http://bizcaz.com/archives/2006/03/19-195536.php
  • Categories: JavaScript
  • Tags:
  • Social Bookmark
通常、ブログは本文と追記に分けてエントリを書くことができますね。これはMovableType(ムーバブルタイプ)でも同様で、エントリに追記がある場合には「続きを読む」などと表示されます。

ネットサーフしていて、あるサイトの追記を読もうとしたらリンク先にジャンプせず、そのページに表示された…なんてことありませんでしたか。

今回は、リンク先にジャンプせずにエントリの追記を表示するカスタマイズにチャレンジしてみたいと思います。

リンク先にジャンプせずに追記を表示させるにはJAVAスクリプトを使用します。
このJAVAスクリプトでは、追記のリンク「続きを読む」がクリックされた時に、ページはそのままで、追記の部分を表示してくれます。また、表示された追記の部分を隠す機能もついています。

今回お世話になったサイトは、小粋空間様です。
▼JAVAスクリプトの入手はこちらから▼
http://www.koikikukan.com/archives/2006/01/17-235313.php

カスタマイズ方法

  • まず、JAVAスクリプトをサーバにアップロードします。
    上記リンク先のページに、JAVAスクリプトのコードが記述されています。以下がそのコードです。
    1. function showHide(entryID, entryLink, htmlObj) {
    2.     extTextDivID = ('Text' + (entryID));
    3.     extLinkDivID = ('Link' + (entryID));
    4.     if( document.getElementById ) {
    5.         if( document.getElementById(extTextDivID).style.display ) {
    6.             if( entryLink != 0 ) {
    7.                 document.getElementById(extTextDivID).style.display = "block";
    8.                 document.getElementById(extLinkDivID).style.display = "none";
    9.                 htmlObj.blur();
    10.             } else {
    11.                 document.getElementById(extTextDivID).style.display = "none";
    12.                 document.getElementById(extLinkDivID).style.display = "block";
    13.             }
    14.         } else {
    15.             location.href = entryLink;
    16.             return true;
    17.         }
    18.     } else {
    19.         location.href = entryLink;
    20.         return true;
    21.     }
    22. }
    上記コードをコピペして、showhide.js というファイル名で保存します。
    アップロード先は、自分の環境に合わせてアップロードしてください。
  • 次に、テンプレートの修正を行います。
    修正するテンプレートは、追記のリンクがあるメイン・インデックスと日別、月別アーカイブにそれぞれ修正します。その他のテンプレートで 追記のリンクを入れている場合には、それらのテンプレートにも修正します。
    以下にメイン・インデックスを例にした修正内容を示します。MTEntryIfExtended をキーワードにして検索します。
    1. <MTEntryIfExtended>
    2. <p class="extended"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a></p>
    3. </MTEntryIfExtended>
    5. 　　　　　　　　　　　　　　　　　↓
    6. <MTEntryIfExtended>
    7. <noscript>
    8. <p class="extended"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a></p>
    9. </noscript>
    10.  
    11. <div id="Link<$MTEntryID$>">
    12. <p class="extended"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this);return false;">続きを読む ≫</a></p>
    13. </div>
    14. <div id="Text<$MTEntryID$>" style="display: none">
    15. <$MTEntryMore$>
    16. <p class="extended"><a href="<$MTEntryPermalink$>" name="<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this);return false;">≪ 続きを隠す</a></p>
    17. </div>
    18. </MTEntryIfExtended>
    青い字の行を赤い字の行に差し替えます。
    また、<noscript>～</noscript> は、ブラウザでJAVAを使用できない時に有効となるコードです。 人によってブラウザでJAVAを無効にしたりしてますもんね。さすがです♪
  • 後もう少し！！ JAVAスクリプトの定義を追加します。
    <head>～</head> の間に以下のコードを追加してください。
    1. <script type="text/javascript" src="<$MTBlogURL$>showhide.js" charset="<$MTPublishCharset$>"></script>
    青い字の部分を自分の環境に合わせて変更します。

以上で、ページジャンプせずに、同じページ上に追記を表示させることができました♪

SEE YOUハート３

 Trackback Pings(0)

No trackbacks found.

 Comments(2)

#1: Posted by T.Jiro @ November 28, 2006 [REPLY]
user-pic

Movable Type 3.33-jaにshowhide.js、index.htmlをコピーしたのですがうまく行きません。これをmtのデイレクトリーにアップロードしました。小粋空間も何度もよんでみたのですがどうしてもジャンプしてしまいます。showhide.jsは基本的にどこへアップロードすれば良いのでしょうか？現在勉強中で人に見て頂くにはあまりにもひどいのでURLはこの次に書き込みます。よろしく。

 
#2: Posted by bzbell @ November 28, 2006 [REPLY]
user-pic

>>1 T.Jiro さん

はじめまして^^

> showhide.jsは基本的にどこへアップロードすれば良いのでしょうか？

showhide.jsはどこに置いても構いません。
わたしの場合には、メイン・インデックス(index.html)と同じディレクトリの中にjsというディレクトリを作って、その中にアップロードしています。

その場合のテンプレート内の記述は以下のようになります。 

<script type="text/javascript" src="<$MTBlogURL$>js/showhide.js" charset="<$MTPublishCharset$>"></script>

ページジャンプしてしまう…とのことですが、T.Jiro さんのブラウザはJavaスクリプトを有効にしてますでしょうか。
Javaスクリプトが有効になっていないと、上記説明にもあるようにJavaスクリプトを使用しない方が有効となってしまいます。

では。

 

 Post a Comment

 

コメント用フィード