ブログカスタマイズその１

：2005年03月25日 00:49
：どんぐり日誌, Movabletypeについて
：0 ：0

≪『続きを読む』の折りたたみ≫

私の書くエントリーでもたまに出てくる「続きを読む≫」という文字。

私はあれは、画像を２枚以上載せてるときとか、
ネタを載せてて、少しワクワクしてほしいときとかに使ってます(笑)

ＭＴの通常だと、続きを読むをクリックすると、個別ページへジャンプします。
個人的に、好ましくありません。

なので、続きを読むを折りたたみで、しかももう一度押すと隠せるという優れものを取り入れてみました。

■ネタ元　　scriptygoddessさんのanother revision to the show/hide script
■参照元　　なかよしこよしさんの「続きを読む（新バージョン）」

以下、コピペ。

そしてさっそく(笑)

メインページのJavaScript内に、以下を記述。

（もともとJavaScriptが入っている人用）

function showHide(entryID, entryLink, htmlObj, type) {
if (type == "comments") {
extTextDivID = ('comText' + (entryID));
extLinkDivID = ('comLink' + (entryID));
} else {
extTextDivID = ('extText' + (entryID));
extLinkDivID = ('extLink' + (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;
}
}

（JavaScriptがひとつも入ってない人用）

<script language="JavaScript">
function showHide(entryID, entryLink, htmlObj, type) {
if (type == "comments") {
extTextDivID = ('comText' + (entryID));
extLinkDivID = ('comLink' + (entryID));
} else {
extTextDivID = ('extText' + (entryID));
extLinkDivID = ('extLink' + (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>

そして、メインページテンプレートの

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

これを

<MTEntryIfExtended> <div id="extLink<$MTEntryID$>"> <a href="<$MTEntryPermalink$>" name="ext<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this,'entry');return false;">続きを読む»</a> </div> <div id="extText<$MTEntryID$>" style="display: none"> <a href="#ext<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this,'entry');return true;">«続きを隠す</a> <$MTEntryMore$> <a href="#ext<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this,'entry');return true;">«続きを隠す</a> </div> </MTEntryIfExtended>

これに書き換えて、リビルドして完了。

これで、続きを出したり隠したりがワンクリックでできるようになりました。

ずっとやりたかった機能なんです。

なかよしこよしさんに感謝！

☆注意！☆
カスタマイズするときは、かならずバックアップをとってからにしましょう。
動かなくなった・レイアウトがごちゃごちゃになった・・・なんてこともありますから。
私の場合、一文字コピーしそびれてるとか、そんなケアレスミスばかりですが、それでも解明するまでに数日かかることもしばしば・・・。
みなさんは、そんなことないよう気をつけてくださいね。

ランキングに参加しています。よろしければクリックお願いします。

この記事を読んだ人はこんな記事も読んでいます