02 Movable Type 4の最近のブログ記事
こちらのエントリで記載した続きです。
IISからApacheへ移行し、Movable Type の設定を変更せず、動かしてみるが、エラーで動かない。
あたり前と言えば、それまでなんですけど．．．．．．．．．．
恥ずかしい話ですが、先ほどまで、当blogへのコメント・トラックバックに、全く気が付いておりませんでした。
「Movable Type 4 で Highslideを利用する」や、「Movable Type 4 で Highslideを利用する Part2」のエントリーに、
コメントやトラックバックを頂いた皆様、本日公開させて頂きました。
まさか、私のblogにコメント・トラックバックを頂けるとは思ってませんでした（言い訳みたいですね）。
超素人の私のエントリーを参考にして頂けるなんて．．．．嬉しいです
MT4.0を使用しており、4.1・4.2へのアップグレードを、迷っておりましたが、暇を見つけて、アップして行きたいと思います。
（いつになることやら．．．）
今後とも、当blogを宜しくお願いします。
以前、Movable Type 4 で Highslideを利用する方法を こちらのエントリーで記述しました。
さらに、Movable Type（ムーバルタイプ）の画像（ファイルのアップロード）挿入作業にて、Highslide JS用のアトリビュート（タグ）を自動で、吐き出すようにカスタマイズする方法をこちらのエントリーで記述しました。
いつも、お世話になっている、「marutyu」さんから、画像を閉じて他の画像を開き直す手間をなくして欲しい旨の要望がありました。
marutyuさん、簡単に出来ますよ！コントローラーを付けるだけなんです！
って事（どう言う事？）で、Part2でアトリビュート（タグ）を自動で吐き出すようにカスタマイズした部分を手直し、
キャプションにコントローラーを追加するタグの自動生成をすることにします。
以前、Movable Type 4 で Highslideを利用する方法を こちらのエントリーで記述しました。
画像挿入後に「Highslide JS」用のアトリビュート（タグ）を、いちいち手作業で挿入しなければならないため、とても手間が掛かると思います。
そこでMovable Type（ムーバルタイプ）の画像（ファイルのアップロード）挿入作業にて、Highslide JS用のアトリビュート（タグ）を自動で、吐き出すようにカスタマイズする方法の紹介です。
サムネイル画像をクールに拡大表示する 『Highslide JS』 を利用する方法です。
拡大ツールでは、『Lightbox JS』 が有名ですが、この 『Highslide JS』 には、下記の特徴があります。
- 拡大画像の下にキャプション（タイトル）の挿入が可能
- ウィンドウサイズに収まるように拡大（右下のアイコンをクリックすると 100% 表示）
- 拡大画像のドラッグが可能
下記画像をクリックして下さい。ドラッグも可能です。
以下、カスタマイズ方法です。
最近のデジカメは、性能が良く解像度も高くなってきており、ブラウザで表示するには大きすぎます。
画像をポップアップする場合、ポップアップウィンドウは、標準ではスクロールバーが表示されないため、画像全てを見ることが出来ません。
そこで、画像貼り付けの際に、自動でポップアップウィンドウのリサイズを可能にし、スクロールバー表示させる方法を覚書で記載します。
ポップアップウィンドウの設定は、mtフォルダー内の\lib\MT\Asset\Image.pmにあります。そこで、Image.pmを編集します。
『onclick="window.open('%s','popup','width=%d,height=%d,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0')』を
『onclick="window.open('%s','popup','width=%d,height=%d,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0')』を
に変更します。
これだけで、OKです。
但し、小さい画像の場合、スクロールバーの部分だけ、画像が表示されなくなりますので、適宣調整 （面倒） が必要です。
やはり、highslideにしたほうがカッコイイですね～！
暇があれば、こちらもカスタマイズに挑戦したいと思います。
ImageMagickのインストールが完了し、ImageMagick導入の本来の目的である、CAPTCHA利用の設定を行うことにする。
ネットを探しまわり、mt-config.cgiを修正しなければならないことが分かった。
- 「mtconfig.cgi」を修正。
- 「CaptchaSourceImageBase D:\www\aaa\bbb\mt-static\images\captcha-source」を最下行に追加。
- 「設定」→「ブログの設定」→「コメント」を選択。
- 「CAPTCHAプロバイダ」の「Movable Type 既定」選択
- 変更を保存。再構築が求められるので再構築を実施
- 「登録/認証」を選択。
- 「認証方式」の「認証なしコメント」にチェックを入れる。
- 「メールアドレスを要求」欄のチェックは、必要に応じてチェックを入れれば良い。
- 「変更を保存」をクリックし保存する。再構築が求められるので再度再構築を実施。
私の場合、相対パスでは画像が表示されなかったので、絶対パスで記述しました。
images以下のパスは、普通にインストールすれば存在しているはずです。
これで、CAPTCHA利用の設定が完了。
前回、本家からImageMagick-6.3.5-8-Q16-windows-dll.exeをDLして、インストールを行ったのだが、うまくインストールができなかった。
ImageMagick本家でなく、Randy Kobes さんがやってる "browse and search CPAN"があるようだ。そこからインストールしてみる事にする。
CPAN本家からのインストールでも良いのだが、上記も信頼できるサイトらしい。
現在の環境は、ActivePerl 5.8.8 Build 822。
インストール方法は、コマンドで、
ブログ内の、定義済みクラスの
- 通常のリンク
- 読み込み済みのリンク
- マウスが上に乗せられている状態のリンク
が、Maru-J Project HPと違うのが気に入らないので、上記３点のカラーを、HPと同色にするための修正を行う。
- 「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」を選択する。
- <style type="text/css">
<!--
a:link {color: #0000ff;}
a:visited {color: #cc0000;}
a:hover {color: #ff00ff;}
-->
</style>
を<head>～</head>内に追加する。 - 「保存」をクリックし、再構築すれば、出来上がり。
サイドバーの「photo」の画像が表示されてない事は、以前書いたが、ImageMagickをインストールされていないのが原因ではない様だ。 （->良く分からない）
うまく表示されないので、『サイドバー(２カラム)』をカスタマイズして、無理やり表示させる事に．．．．インチキくさいけど．．．
- 「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー (2カラム)」を選択する。
- <li class="item"><a class="asset-image" href="<$MTAssetURL$>"><img src="<$MTAssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" /></a></li>を探す。
- <li class="item"><a class="asset-image" href="<$MTAssetURL$>" target="_blank"><img src="<$MTAssetURL$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" height="70" /></a></li>へ変更する。
- <$MTAssetThumbnailURL height="70"$>が、『""（空）』となってしまうので、<$MTAssetURL$>へ変更
- 別窓で開くように、 target="_blank"を追記
- 画像表示サイズを、高さ70pxに固定するため、height="70"を追記
- 「保存」をクリックし、再構築すれば、出来上がり。
Movable Typeが素人なんで、良く分からないため、このような方法でサイドバーに画像を表示させた。
ネットをググっても、mt4がらみの説明が少ない（欲しい情報がない）ので、このような方法しか思いつかなかった。
ブログのタイトル（バナー）を「ブログの設定」→「名前」で設定した文字から画像へ変更する方法の紹介です。
- 画像を準備し、ブログディレクトリのトップページへ置く。
画像ファイルのサイズは、260×50 px のアニメーション画像で、ファイル名は、blog_title.gifとしています。 - 「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」を選択する。
- <MTIf name="main_index">
<h1 id="header-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="header-description"><$MTBlogDescription$></h2>
<MTElse>
<div id="header-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></div>
<div id="header-description"><$MTBlogDescription$></div>
</MTIf>
をソースの中から探す。 - <MTIf name="main_index">
<h1 id="header-name"><a href="<$MTBlogURL$>" accesskey="1"><img src="/aaaa/bbbbblog_title.gif" width="260" height="50" border="0"></a></h1>
<h2 id="header-description"><$MTBlogDescription$></h2>
<MTElse>
<div id="header-name"><a href="<$MTBlogURL$>" accesskey="1"><img src="/aaaa/bbbb/blog_title.gif" width="260" height="50" border="0"></a></div>
<div id="header-description"><$MTBlogDescription$></div>
</MTIf>
へ変更する。 - 「保存」をクリックし、再構築すれば、出来上がり。
最初、１箇所しか変更せずに、トップページのみしか画像表示がされず悩みましたが、よくよく見ると『else』を見落としていました （適当にやってるからだ！->反省）。
しっかり確認してから行いましょう （またまた反省です）。
カレンダー設置をしたのだが、月送りマーク （？） が、【＜】って文字になっている。
イマイチ気に入らない！って事で、文字を画像に変えて見ることにする。
- 矢印画像を作成 （画像サイズは11×11pxにしました） し、ブログディレクトリのトップページへ置く。
画像ファイル名は何でも良いけど、説明の中では、「arrow_left.gif」 （左向き） と「arrow_right.gif」 （右向き） としています。 - 「デザイン」→「テンプレート」→「アーカイブテンプレート」→「カレンダー」を選択する。
- <a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">＜</a>をソースの中から探す。
『＜』を『<IMG height="11" src="arrow_left.gif" width="11" border="0";>』へ変更。左向き矢印です。 - 右向き矢印も同様に、<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');" >＞</a>をソースの中から探す。
『＜』を『<IMG height="11" src="arrow_right.gif" width="11" border="0";>』へ変更。右向き矢印です。 - 「保存」をクリックし、再構築すれば、出来上がり。
以前html・cgi・ｊｓを少しかじっていたので、ソースを見ればある程度分かるから、以外に簡単に出来ましたね～。
Movable Typeって、難しく奥が深いです！->私が素人だからかな．．．．．．．
ブログにカレンダーを設置しました。カレンダー設置だけでもムズイ．．．．
2007.8.8に、Movable Type 4.0がリリースされました。
そこで、自鯖ブログサーバー構築にをチャレンジです。
当初、既存HPとの融合ができなく、さすが素人（－＞モチロン私の事です！）、
思考錯誤の末、インストール成功です。
うまく、投稿できてるか心配です。
