Movable Type 備忘録

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

Mar192006
Author: bzbell
Categories: Customize
Tags: Customize, JavaScript, MovableType

Next Page: Flashカレンダーを設置してみる
Prev Page: カレンダーを横長に表示してみる

通常、ブログは本文と追記に分けてエントリを書くことができますね。これはMovableType(ムーバブルタイプ)でも同様で、エントリに追記がある場合には「続きを読む」などと表示されます。

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

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

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

今回お世話になったサイトは、小粋空間様です。

▼JAVAスクリプトの入手はこちらから▼
http://www.koikikukan.com/archives/2006/01/17-235313.php

カスタマイズ方法

まず、JAVAスクリプトをサーバにアップロードします。

上記リンク先のページに、JAVAスクリプトのコードが記述されています。以下がそのコードです。

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;
}
}

上記コードをコピペして、showhide.js というファイル名で保存します。
アップロード先は、自分の環境に合わせてアップロードしてください。

次に、テンプレートの修正を行います。

修正するテンプレートは、追記のリンクがあるメイン・インデックスと日別、月別アーカイブにそれぞれ修正します。その他のテンプレートで追記のリンクを入れている場合には、それらのテンプレートにも修正します。
以下にメイン・インデックスを例にした修正内容を示します。MTEntryIfExtended をキーワードにして検索します。

<MTEntryIfExtended>
<p class="extended"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a></p>
</MTEntryIfExtended>

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

青い字の行を赤い字の行に差し替えます。
また、<noscript>～</noscript> は、ブラウザでJAVAを使用できない時に有効となるコードです。人によってブラウザでJAVAを無効にしたりしてますもんね。さすがです

後もう少し！！ JAVAスクリプトの定義を追加します。
<head>～</head> の間に以下のコードを追加してください。
```
<script type="text/javascript" src="<$MTBlogURL$>showhide.js" charset="<$MTPublishCharset$>"></script>
```
青い字の部分を自分の環境に合わせて変更します。

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

SEE YOU

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(2)

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

#2: Posted by bzbell [RES]

>>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スクリプトを使用しない方が有効となってしまいます。

では。

Posted on November 28, 2006

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

カスタマイズ方法

Trackback Pings(0)

Comments(2)

Post a Comment