SWEET WATER

Highslide JS

昨日から画像のポップアップ方法を変更しました。

Highslide JS

こちらのJavaScriptを利用する事で、サムネイル画像が滑らかに拡大表示されます。ただし、当サイトのようにJavaScriptを多用している場合、正常に動作しない事も[:cry:]

まずは直前のエントリーで動作を確認してみてください[:-)] Gecko系のブラウザーをお勧めします（IE7やOperaでは他のJavaScriptと干渉して思わぬ所からポップアップしてしまう・・・一応動作してますが[:sweat:]）。

設置方法は簡単です。
Highslide JSよりスクリプトをダウンロードし、展開してhighslideフォルダーをアップロード。テンプレートをちゃちゃっと編集後、Highslide JS用CSSを追加すれば完成！[:-D] 詳しくは小粋空間さんの「Highslide JS でサムネイル画像を拡大表示する」をご覧あれ。

当サイトで紹介するのはここからです[:-)]
このままでは毎回画像をアップする毎にHighslide JS用の記述に直す必要があるので、ここではMTのアップロードフォームを改造します。とは言っても大袈裟な改造ではありません。当サイトでは以前から行っていたものなので、その部分を書き換えるだけ・・・

その改造とは、アップロードフォームの縮小画像作成「埋め込み」をHighslide JS用にしてしまいます。

「MTディレクトリ/lib/MT/App/CMS.pm」の4803行目を以下のように書き換えます。

オリジナル：
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
　　　　　　　　　　↓　　　　　　　　　　↓
修正後：
<div id="highslide-container"></div><a href="$url" class="highslide" onclick="return hs.expand(this)"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>

修正が終わったら保存して上書きでアップし直します（CMS.pm行数はv3.34を前提にしています）。

以上で完了！

注！
小粋空間さんの説明通りに設置しても動作しない状態での改造は無意味です。動作するようになってから挑戦してください！
なお、この書き換えを行った場合は小粋空間さんの「４．ポップアップ用空要素設定」の空要素は削除してください。上記修正により、新たに追加されます！
また、captionを利用する場合はIDを設定して直後に追加する必要があります。WEBデザインBLOGさんの「埋め込み画像生成ファイルperlスクリプト」の項にID作成のヒントがあります。

カレンダーを変更しました

久しぶりに少し大掛かりな（？）カスタマイズをしました[:-)]

小粋空間： Ajax 月送りカレンダー

必要なものは「Prototype.js（JavaScript Framework）」と小粋空間さん作成の「ajaxCalendar.js」「dayChecker.js」の3つ。

実はこれを導入すると「スタイル変更時にカレンダースタイルも即反映される」ようになります。と言うのも、今まではiframeを利用してカレンダーページを呼び出していた為、リロードやページ移動をしなければ反映されなかったのです（JavaScript等を使えばできるかもしれませんが）。
今回のカレンダーは「Ajax」を利用して現在のページ上に表示させる為、リロードもページの移動も必要ありません[:-)]

カスタマイズ方法は特に面倒な操作はないのでリンク先を参照してもらうとして、ここでは導入時の顛末を・・・・・[:hopeless:]

メロメロパーク

当サイトのメロメロパークがマウスカーソルを乗せる度に再描画する方はいなかったかな？[:sweat:]

メロメロパークのブログで「IE6でFlash Player 9にバージョンアップするとメロメロパークを表示したとたんIE6が落ちる」と言う方が少なからずいるようです。
うちはIE6で一度も落ちた事がないのですが、何故かGecko系ブラウザーのSerMonkeyやBon Ocho（Firefox2.0のnightlyビルド）にFlash Player 9を入れてメロメロパークを表示していると「マウスカーソルを乗せる度に再描画する」のです。今までもそうだったのか疑問ですが（少なくともFlash Player 8では問題なかった）、そのおかげでかなり悩みました[:hopeless:]

他のメロメロパーク設置サイトでは同じ現象があまり見られなかったので、当サイトだけと言う説もありますが[:sweat:]
悩み抜いた末にスタイルシートを手直ししたら直りましたが、今までは問題なかったのに・・・やはり「Flash Player 9」に正式対応してないからか・・・

どういう不具合にせよ、これはメロメロパーク側の問題のような気が[:sweat:]

IE6で一部スタイルが効かない件

IE6を利用して当サイトの一部スタイルを選択した場合、タイトルのバックグラウンドカラーおよび画像が表示されない不具合がありました。どうやらリキッドタイプに変更した時からのようです[:sweat:] さきほど該当のスタイルを修正しておきました。

この不具合の原因は、「本来ベーススタイルと色味スタイルが同じ方法で指定するべきところを、色味スタイルで簡略化して記述していた」為に起こったようです。

例えばベーススタイルで

border-top:～～;
border-bottom:☆☆;

と言うものがあるとします。これを色味スタイルで

border:none;

としていました。この状態でIE6で不具合発生。

これを個別に

border-top:none;
border-bottom:none;

とした結果、従来通りに表示されるようになりました。

上記記述（一括指定）でもFirefoxやIE7ベータでは問題なく表示されていたのですが、この場合はIE6のほうが正しい解釈のような気がしないまでもない[:-D]

カレンダーの本日表示

小粋空間さんのカレンダースクリプトに不具合があったそうです。

カレンダースクリプト不具合のお知らせ

当サイトでは本日が8月最初のエントリーだったので不具合は確認できていません（エントリー前に修正してしまった[:sweat:]）が、一応修正箇所を以下に記しておきます（小粋空間さんのエントリーよりコピペですm(._.)m）。

dayChecker.jsを以下のように修正します。

修正前

　　　　　　　　　：
function isToday(year, month, day) {
if (year == currentYear && parseInt(month) == currentMonth && day == currentDay) {
return true;
}
return false;
}
　　　　　　　　　：

修正後

　　　　　　　　　：
function isToday(year, month, day) {
if (year == currentYear && parseInt(month,10) == currentMonth && day == currentDay) {
return true;
}
return false;
}
　　　　　　　　　：

「,10」を追加するだけです。

絵文字画像の表示方法変更

自己満足なテスト込みのエントリーです[:-D]

今までの絵文字画像はURLをそのまま読み込んで表示していました。この方法は手っ取り早くて簡単なのですが、エントリー時にimgタグを晒している為に余分にスペースを使います。

今回の変更はURLを直接読み込むのではなく、当サイトのコメントで使っているスクリプトを改造し、エントリー部分もそのスクリプトで表示させるようにしたのです。BBコード風な埋め込み方なのでテキストエリア内はスッキリしました[:-)]

以下は表示テスト[:lol:]

[:-D][:-)][:-(][:-o][:shock:][:confused:][8-)][:lol:]

ローカルでテストしていたので失敗はないと思いますが[:sweat:]

月別アーカイブリストの折りたたみ

例によって、小粋空間さんのプラグイン＆スクリプトを利用し、月別アーカイブリンクの年毎の折りたたみに挑戦してみました

月別アーカイブリストの年毎の折りたたみ for Movable Type

上記リンク先を参考にすれば簡単に設置できると思います。が、当サイトのツリー表示が特殊なのでちょっと苦労しました

一目で解ると思いますが、各タイトルとツリー画像一体化してます。今回もこれに対応させる為にデフォルトの記述に手を加えました。以下は変更点だけ記しています。

<div class="side">
<ul>
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><li><div id="archive<$MTArchiveDate format="%Y"$>name"><$MTArchiveDate format="%Y年"$></div>
<div id="archive<$MTArchiveDate format="%Y"$>list"><ul></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>" title="<$MTArchiveDate format="%Y年%B月"$>のアーカイブページへ"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]<MTArchiveDateFooter></ul></div></li></MTArchiveDateFooter>
</MTArchiveList>
</ul>
</div>

ulとliを追加、元々あるulをdivに変更してulを再配置。赤字部分が変更または追加した箇所です。さらにツリー化のJavaScriptを利用しているので、これに対応させるべく本来の記述方法を以下のように変更します。

generateNormalTree("monthlylist");
　　　　　　↓
generateTreeForTreeStructure("monthlylist");

ここまで来るのに久しぶりに悩みました

スマイリー表示方法変更

今までコメントのスマイリーは「MTSmiley」と「MTMacro」を導入して実現していましたが、今回新たな方法を発見して入れ替えてみました

コメントにカスタマイズ絵文字入力機能

動作的に言うと結果は同じなのですが、余計な空間が空かないのが魅力的です（「MTSmiley」と「MTMacro」ではHTMLの先頭に画像数分だけ空白行が空く）。また、導入時の設定方法（タグのidやclass属性指定）が解れば、すぐにでも使えるのが嬉しいです♪
（実際に導入したのはゲーム用のブログでしたが、試してみた結果からこちらでも使う事に決めました）