TopMovableType > MTカスタマイズ

2005年 4月 7日(木)   赤口    今日は何の日?   

MTカスタマイズサイドメニューの折りたたみマーク消えた new

先日 一部のページで 取り入れてた 新しいサイドメニュー折りたたみ技 ですが、
全てのページで 新しいスクリプト に切り替えました。
今までのように、サイドメニューのタイトル枠右端の [+] [-] マークを 押さなくて良くなりました。
というか、サイドメニューのタイトル枠右端から [+] [-] マークが なくなりました。
タイトル枠内のどこを押しても メニューの開閉ができます。
詳しくは、小粋空間 さま 「サイドメニューの折りたたみ(v4.0)」 をご覧ください。
今まで以上に スッキリしたでしょ。ヽ( ̄▽ ̄)ノ
カテゴリ一覧で 折りたたみマーク ▲ ▼ もカウントしてしまってたので、ここだけ 修正しました。
具体的には ここ を参考に FoldNavigationByTagName を使いました。

Posted by Caetla at 21:27 | Category : MTカスタマイズ | Trackbacks [1] | Clip!! | Ranking
Tag : MovableType , カスタマイズ , サイドメニュー , 折りたたみ
この記事はどうでしたか?(お気軽に 記事に点数を付けてみてくださいね♪)
Bad ← 1 2 3 4 5 → Good
評定平均:(3.0) 総合点:(1916) 投票人数:(640)

2005年 4月 3日(日)   友引    今日は何の日?   

MTカスタマイズサイドメニュー折りたたみヴァージョンアップ new

やむやむスタート時 から あれこれお世話になってる 小粋空間 さま 発の 数々のカスタマイズの中でも
お気に入りで ずーーーっと使わせていただいてる 「サイドメニューの折りたたみ」 技が この度、
従来の 折りたたみマークをクリックしてメニューを開閉するスタイルから、サイドメニューのタイトル枠全体を
画像のようにクリックできるスタイルに ヴァージョンアップされました。「サイドメニューの折りたたみ(v4.0)」 です。
そこで、早速 導入~♪・・・・と思ったのですが、とりあえず、一部のページでお試し導入、ってことにしました。
なぜ 潔く 一気に切り替えてしまわなかったのか・・・・ですが、今までの [+] [-] のような折りたたみマークが
ないと、スッキリ感アップで すごーく素敵なのですが、どのメニューが開いてて、どのメニューが閉じてるかが、
パッと見、今ひとつ わかりにくそうな感じがしたからです。今回の v4.0 でも 折りたたみマークを表示させることも
できるのですが、今までのように タイトル枠の端っこではなくメニュータイトルの文字列の横に くっついちゃうようなので、
今回は ひとまず、今後もしかしたら メインページに昇格するかもしれない 臨時のメインページ にのみ、
新しい折りたたみスクリプトを 適用させてみました。
なんとなく、極近い将来、全てのページで 新しい方式に 切り替えてしまいそうな気も しなくもないのですが・・・

2005年4月7日 はい、やっちゃいました。全てのページで 新しい方式になりました

Posted by Caetla at 02:42 | Category : MTカスタマイズ | Trackbacks [0] | Clip!! | Ranking
Tag : MovableType , カスタマイズ , サイドメニュー , 折りたたみ
この記事はどうでしたか?(お気軽に 記事に点数を付けてみてくださいね♪)
Bad ← 1 2 3 4 5 → Good
評定平均:(3.0) 総合点:(1359) 投票人数:(446)

MTカスタマイズ作成日時を更新してくれるボタン new

エントリの投稿時刻って 新規エントリーってとこを開いた瞬間の時刻になっちゃいますよね。
実際に 記事を作成し終わって、保存ボタンを押す頃には 凝った記事だと 数十分、長い時には
平気で1時間以上経ってたりすることありませんか?このズレが 前から気になってたんですけど
手動で 時刻を時計見ながら直さなくても 楽々 解決してくれる技を紹介した記事を 発見しました。
Masic White さま 「作成日時」を更新するボタン追加 です。
エントリーの投稿画面 下の方にある 作成日時のところに Just Now な時刻に更新してくれるボタンを
追加するカスタマイズです。手順は みよたんの記事 の引用になりますが・・・
/tmpl/cms/edit_entry.tmpl を ローカルにダウンロードして テキストエディタで開きます。

<input name="created_on_manual" id="created_on_manual" tabindex="8" value="<TMPL_VAR NAME=CREATED_ON_FORMATTED ESCAPE=HTML>" />

という一行を探し (テキストエディタの検索機能を使って、created_on_manual で検索すると すぐ見つかります)、
<input name="created_on_manual" size=25 id="created_on_manual" tabindex="8" value="<TMPL_VAR NAME=CREATED_ON_FORMATTED ESCAPE=HTML>" /><br />
<input onClick="nowDate()" type="button" value="Now" />

に変更します。あとは、<script> ~ </script> の間に ↓のJavaScript を追加しておしまい。
<!-- 更新時刻を現在の時刻にするボタン -->
function nowDate() {
dat=new Date();
yea=dat.getFullYear();
mon=dat.getMonth() + 1;
day=dat.getDate();
hou=dat.getHours();
min=dat.getMinutes();
sec=dat.getSeconds();
if(mon<10){mon="0"+mon;}
if(day<10){day="0"+day;}
if(hou<10){hou="0"+hou;}
if(min<10){min="0"+min;}
if(sec<10){sec="0"+sec;}
document.entry_form.created_on_manual.value=yea + "-" + mon + "-" + day + " " + hou + ":" + min + ":" + sec;
}

エントリーの投稿画面で 実際にボタンが表示され、ボタンを押すと 作成日時の時刻が
Just Now な時刻に 更新されるか 確認してみましょう。「 ’’)) ドレドレ・・・
(・ロ・)ホー(’ロ’)ホーー! この記事仕上げるのに 20分かかってますね。(〃_ 〃)ゞ ポリポリ

Posted by Caetla at 01:56 | Category : MTカスタマイズ | Comments [6] | Trackbacks [1] | Clip!! | Ranking
Tag : MovableType , カスタマイズ
この記事はどうでしたか?(お気軽に 記事に点数を付けてみてくださいね♪)
Bad ← 1 2 3 4 5 → Good
評定平均:(3.1) 総合点:(1788) 投票人数:(585)

2005年 3月 19日(土)   大安    今日は何の日?   

MTカスタマイズ横型リアルタイム版月送りカレンダー new

小粋空間 さま 「月送りカレンダー(横型・リアルタイム版)」 に 挑戦してみました。
思いのほか、悪戦苦闘しちゃいました。設置方法については 小粋空間さまのエントリ のとおりにやればOKなので
悪戦苦闘したことについて、2点ほど 触れておきます。・・・・・の前に・・・・・
横型のカレンダー設置については どうしようか、かなり迷いました。今までのカレンダーには 日曜・祭日に
色を付けてみたり、あれこれカスタマイズしていて 相当 愛着があったし、曜日ごとにテーブルにおさまってる
従来のカレンダースタイルが 気に入っていたので、横一列のカレンダーは要らないかな・・・と思っていたんです。
けど、yujiroさんのエントリ を読んでると どうしても カスタマイズに挑戦してみたい衝動に駆られてしまって。。。笑
それと メインページ以外の アーカイブページには タイトルボードの中央真下、エントリの上に
前後のエントリや メインページへのリンクが表示されてるんだけど、メインページだけは その欄に なにも
ないので、そうだ!ここに 横型カレンダーを設置しちゃえ!・・・・と 思い立ったのです。
つまり 横型カレンダーは メインページのみに 設置することに決めて、カスタマイズをスタートしました。

まず、今までのカレンダーのアーカイブ・テンプレートや スタイルシートは そのまま残しておいて
それとは別の 横型カレンダー用のテンプレートとスタイルシートを 用意しました。
今までのカレンダーが Calendar、スタイルシートが calendar.css だったので、横型用のは
アーカイブ・テンプレートを Calendar2、スタイルシートを calendar2.css という名前にしまして、
Calendar2 の テンプレートの中身には

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1./ Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<link rel="stylesheet" href="<$MTBlogURL$>calendar2.css" type="text/css" />

<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>

</head>
<body >

<div class="calendar">

<span class="calendarHead">
<MTArchivePrevious>
<a href="<MTBlogURL>archives/calendar2/<MTArchiveDate format="%Y/%m/index">.php"><</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y" language="en"$>
<MTArchiveNext>
<a href="<MTBlogURL>archives/calendar2/<MTArchiveDate format="%Y/%m/index">.php">></a>
</MTArchiveNext>*
</span>

<?php $day = date(j); $year = date(Y); $month = date(m); ?>
<MTCalendar month="this">
<MTCalendarIfEntries>
<?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = "today"; } else { $style = "notoday"; } ?>
<span class="<?php print "$style"; ?>">
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" target="_top"> <$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<?php $y="<$MTCalendarDate format='%Y'$>"; $m="<$MTCalendarDate format='%m'$>"; $d="<$MTCalendarDay$>"; if($year == $y && $month == $m && $day == $d) { $style = "today"; } else { $style = "notoday"; } ?>
<span class="<?php print "$style"; ?>">
<$MTCalendarDay$>
</MTCalendarIfNoEntries>
</span>
</MTCalendar>
</div>

</body>
</html>


・・・・・・と、ちゃんと間違えないように 3箇所ほど 修正しました。
赤い字の スタイルシートは 当然 calendar2.css のほうを 指定してあげないといけないんだけど
ウェブログの設定 → アーカイブの設定で 横型カレンダー (Calendar2) も 月別 に関連付けをし、
アーカイブファイルのテンプレート の欄に
<$MTArchiveDate format="calendar2/%Y/%m/index.php"$>

・・・・と記して 今までのカレンダーと ディレクトリを分けたため、青い字の2箇所に修正が必要でした。
さらに メインページの 横型カレンダーを表示したいところに
<div id="globalnavi">
<iframe name="cal-iframe2" src="<$MTBlogURL$>archives/calendar2/<$MTDate format="%Y/%m/index"$>.php" width="***" height="**" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>

これで、すべて再構築したら ちゃんと表示されるはずでした。なのに 実際は・・・(|||_|||) ガビーン
横型カレンダーのところに 通常のカレンダーが表示されてる!これ、何度やり直してもダメだったんです。
そこで 通常のカレンダーでそうしてるように 横型カレンダーも モジュール化して calendar2.php にして
<? include("calendar2.php"); ?>

と 試しにやってみたら、これのおかげかどうか不明なんだけど やっと 表示されましたぁ!(= ̄▽ ̄=)V やったね!

これで あとは Mozilla系のブラウザからアクセスしたときの カレンダーの下が切れちゃう現象を
こちら で使った util.js で 回避すれば すべてオーライね♪・・・・と思ったら・・・・・
これが 何度やっても JSが適用されない。。。どころか、オブジェクトを指定してください、とかいうエラーが
出る始末。あーでもない、こーでもない・・・・・と 細かい数値をいじってみたりしたけど さっぱりダメ。
そうこうしてるうちに |・) ジー ( °o°)ハッ もしかして、util.js の中身が 変わってるんじゃ???と
思い立って (気付くの、遅っ!)、スクリプトのページ に行ってみたら、やはりそうでした。
ヴァージョンアップで 「任意のタグ+任意の属性による属性値変更関数追加」 されていたのですねーーー。
ということで、util.js を 最新版に差し替えたら エラーも消え、util.js が 働いて Mozilla系ブラウザで
見たときの インラインフレームの height を 調整してくれるようになりました。これで やっと完成です。

・・・・・と言いたいところだけど、スタイルシートを もう少しだけ 調整する必要があります。今月のように
短い月名(March)だったら ちゃんと31日まで 表示されるんだけど December のような長い月名だと
31日が表示されないのよねー。これは yujiroさんのお見本のように タイトルの下に 横型カレンダーを表示してれば
問題ないんだけど、あたしの場合、3カラムの真ん中の エントリの欄に 納めようとしてるものだから
横幅が 足りなくなっちゃうのですよ。。。。このへん、もう少し頑張って修正しますです。ヽ( ´ ▽ ` )ノ

Posted by Caetla at 03:11 | Category : MTカスタマイズ | Trackbacks [0] | Clip!! | Ranking
Tag : MovableType , カスタマイズ , 月送りカレンダー
この記事はどうでしたか?(お気軽に 記事に点数を付けてみてくださいね♪)
Bad ← 1 2 3 4 5 → Good
評定平均:(3.0) 総合点:(1274) 投票人数:(424)

2005年 3月 8日(火)   仏滅    今日は何の日?   

MTカスタマイズブラウザを識別してフォントサイズを変えるワザ new

久しぶりに 骨のあるカスタマイズに挑戦!(^^*) ホホホホ
小粋空間 さま 「ユーティリティスクリプト(その1:フォントサイズ切り替え)」 です。
以前は InternetExplorer で アクセスすることが圧倒的に多かったのですが、最近 Firefox や Netscape で
やむやむを見る機会も多くなり、サイドメニューの ムシメガネが必要かしらん?・・・・と思うほどチマチマなフォントが
少々 気になってました。このスクリプトは まさに それを解消してくれるものなのです。
つまり、Firefox ・ Netscape といった Mozilla系ブラウザ で表示した時だけ フォントサイズを 大きめ (指定したサイズ) に
修正してくれる・・・・・ってわけです。これ、いいですよね。というわけで、早速 やってみたかったんだけど
サイドメニューを 一つ一つ モジュール化してることもあり、修正しなくちゃいけないテンプレートが たくさんになるので
なかなか思いきれず、今朝 たまたま 早く目が覚めたので やっと 着手したのでありまする。。。
はい、まず 小粋空間 さまのエントリ 内リンクから util.js をいただいてきたら、これを ローカル・サイト・パスに配置します。
そして、テンプレートの修正なんだけど・・・やむやむの場合、先に 折りたたみの起動スクリプトを入れてたので
そこに id 属性による指定(changeFontSizeById) の方法で 一行ずつ 追加しました。
例えば 「検索」 のテンプレートなら

<script type="text/javascript">
<!--
FoldNavigation('search','off',false);
changeFontSizeById(1, 'searchlist', '10px');
//-->
</script>

赤い字のところが 追加した一行です。メニューをツリー化してるところは この方法では うまくいかなかったので
id属性+内部タグ名による指定(changeFontSizeByIdAndTagName) の方法で やりました。
例えば 「カテゴリ一覧」 でしたら やむやむの場合、↓こんな感じ。
<script type="text/javascript">
<!--
FoldNavigation('category','off',true);
changeFontSizeByIdAndTagName(1, 'categorylist', 'ul', '10px');
//-->
</script>

最後に スクリプトを設定した各テンプレートの <head> ~ </head> の間に ↓のタグを追加してできあがり。
<script type="text/javascript" src="<$MTBlogURL$>util.js" charset="utf-8"></script>

これでもう、ムシメガネは要りませんね~♪ヽ( ̄▽ ̄)ノ


3月9日 追記です。サイドメニューにばかり気をとられてて、もう一箇所 フォントがチマチマなところを見落としてました。
Vote の欄です。(;^_^ A ・・・・かなりチマチマしてるぅ・・・・Vote の欄には id属性を指定してないので
タグ名+クラス属性名による指定(changeFontSizeByTagNameAndClassName) の方法を使いました。
<script type="text/javascript">
<!--
changeFontSizeByTagNameAndClassName(1, 'div', 'vote', '10px');
//-->
</script>

これでもう、見落としはないかなぁ。。。。(;¬_¬)   実はまだありました。↓続きを開いてみてね。

Posted by Caetla at 14:44 | Category : MTカスタマイズ | Comments [7] | Trackbacks [0] | Clip!! | Ranking
Tag : MovableType , カスタマイズ , ブラウザ識別 , スクリプト
この記事はどうでしたか?(お気軽に 記事に点数を付けてみてくださいね♪)
Bad ← 1 2 3 4 5 → Good
評定平均:(2.9) 総合点:(1479) 投票人数:(502)

2005年 2月 26日(土)   赤口    今日は何の日?   

MTカスタマイズカレンダーの本日を 背景画像で強調表示 new

TOY COZY MUSEUM 別館 さまの 「カレンダーの“今日”に画像を!!・・・の巻。」 を 拝見して
いい感じだなー、と思ったので、やむやむでも カレンダーの 「本日」 のところを
今までの 枠囲みから 背景画像に 変更してみました。
カレンダーのスタイルシートで 背景画像を 指定します。↓こんなふうに。。。

.today {
background-position:center;
background-repeat:no-repeat;
background-image: url("画像のURL");
}

toycozy さんの真似して、アニメーションGIFを使ってみました。
画像は Mariのいろえんぴつ さまでいただきました。

Posted by Caetla at 10:30 | Category : MTカスタマイズ | Comments [4] | Trackbacks [0] | Clip!! | Ranking
Tag : MovableType , カスタマイズ
この記事はどうでしたか?(お気軽に 記事に点数を付けてみてくださいね♪)
Bad ← 1 2 3 4 5 → Good
評定平均:(3.0) 総合点:(1596) 投票人数:(534)

2005年 2月 25日(金)   大安    今日は何の日?   

MTカスタマイズコメント・トラックバックランキングプラグイン new

The blog of H.Fujimoto さまで エントリについたコメント数でランキング表示するプラグイン をいただいてきました。
このプラグインを使えば、エントリを コメント数の多い順に ランキング表示できるだけでなく、
トラックバック数でのランキング、コメントとトラックバックの合計でのランキングも 表示することができます。

やむやむでは、下記のようにしてみました。3つとも 全エントリの中から 各10位までを表示させてます。
実際、どんなふうに表示されるかは 右サイドバー BlogStatus のところを 開いてみてください。

コメントランキング
<ol>
<MTEntriesRanking mode="comment" lastn="10">
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>" target="_blank"><$MTEntryTitle trimj_to="16"$></a>(<$MTEntryCommentCount$>)</li>
</MTEntriesRanking>
</ol>

トラックバックランキング
<ol>
<MTEntriesRanking mode="trackback" lastn="10">
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>" target="_blank"><$MTEntryTitle trimj_to="16"$></a>(<$MTEntryTrackbackCount$>)</li>
</MTEntriesRanking>
</ol>

コメント&トラックバック合計ランキング
<ol>
<MTEntriesRanking mode="both" lastn="10">
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>" target="_blank"><$MTEntryTitle trimj_to="16"$></a>(<$MTEntryCommentAndPingCount$>)</li>
</MTEntriesRanking>
</ol>


2005年6月26日 プラグインを 改良版 に差し替えました。 ⇒ こちら のエントリを見てね。

Posted by Caetla at 01:41 | Category : MTカスタマイズ | Comments [6] | Trackbacks [0] | Clip!! | Ranking
Tag : MovableType , カスタマイズ , プラグイン
この記事はどうでしたか?(お気軽に 記事に点数を付けてみてくださいね♪)
Bad ← 1 2 3 4 5 → Good
評定平均:(3.0) 総合点:(1605) 投票人数:(534)

2005年 2月 14日(月)   赤口    今日は何の日?   2006年の今日のエントリ

MTカスタマイズ全コメント・全トラックバックのリスト手入れ new

こちら で 登場させた 全コメントリスト全トラックバックリスト のページを、少しお手入れしました。
まず、全トラックバックリスト は やはり この方が 見やすいでしょうということで、サイドバーの 最近のトラックバックと
同じ形式 (エントリごとに トラックバックを まとめてツリー表示) に 変更しました。
また、全コメントリスト全トラックバックリスト ともに、テーブルを使って 真ん中寄りにし、スクロールバーを付けました。
なお、全コメントリストのページ には サイドメニュー Recent Comments から
全トラックバックリストのページ には サイドメニュー Recent Trackbacks から それぞれいけるようにしています。

Posted by Caetla at 09:41 | Category : MTカスタマイズ | Trackbacks [0] | Clip!! | Ranking
Tag : 全コメント , 全トラックバック , MovableType , カスタマイズ
この記事はどうでしたか?(お気軽に 記事に点数を付けてみてくださいね♪)
Bad ← 1 2 3 4 5 → Good
評定平均:(3.0) 総合点:(1721) 投票人数:(572)