アファメーションで独立・起業・夢実現。「いきなり！社長宣言！！」-“夢は口に出すことで実現する！”というアファメーション：ライブラリー
2007年4月25日
MT（ムーバブルタイプ）は奥が深いっす。
夢実現のアファメーションを実践する起業家にもっとも読まれているブログは？
カテゴリページをカスタマイズする。
昨日に続きMTネタ。
がっつりとリニューアルはまだまだ先になるけど、小さなカスタマイズを。
だいぶエントリーが増えてきて、各カテゴリページが尋常じゃないぐらい長くなってしまったので、エントリーの「追記」部分をページ遷移せずに表示・非表示するように変更。
今更って感じもしますが…。
ホントはphp化して複数ページに分けるってのもアリだけど、静的な「html」のままにしておきたかったので、JSを使った表示・非表示を。
すでに枯れたネタなので、いろんなサイトでカスタマイズ方法が説明されてますが、今回は
http://hinagata.biz/log/2004/09/16/0144.html
を参考にさせてもらいました。
カスタマイズは簡単。
headタグの中に以下のJSを挿入。
<script type="text/javascript">
function toggleWithClass(o,tClassName,initState) {
var t = o.parentNode.nextSibling;
while (t.className != tClassName) {
t = t.nextSibling;
}
var s = t.style.display || initState;
if (s != "block") {
t.style.display = "block";
o.title = "Collapse";
o.innerHTML = "続きをかくす";
} else {
t.style.display = "none";
o.title = "Expand";
o.innerHTML = "続きを読む";
}
}
</script>
んでもって、「追記がある場合」というMTタグ、「MTEntryIfExtended」部分を以下のように修正。
<MTEntryIfExtended> <p class="extended"><a href="javascript:void(0)" onclick="toggleWithClass(this,'hidden','none')" onkeypress="toggleWithClass(this,'hidden','none')" title="Expand">続きを読む</a></p> <div id="<$MTEntryID$>-more" class="hidden"><$MTEntryMore$></div> </MTEntryIfExtended>
あとはCSSでshow、hiddenの設定
.show { display: block; }
.hidden { display: none; }
をして終了。
（.hiddenはCSSで非表示（display:none）にするので、SEO的にどうなのって気もするけど…っつかどうなんっすかね？）
※外部JS化しようと思ったけど、エラーが出てしまうので、残念ながら放置。
他は、以前他のサイトで使ったmt-trimj.plでエントリーページ上下にある、カレントエントリーの前後に移動するリンクの文字数を制限したり、MTTagInvokeでカテゴリ内にエントリのリストを表示したり…と、ちまちまと。
普通にMTタグだけでもいろいろできるけど、pluginやらDHTML化など、まだまだMT（ムーバブルタイプ）奥が深いっす。
この記事に関連する（かもしれない）書籍
投稿者 kuro : 2007年4月25日 22:47 | ID:676
