診断士の経営視点とSEのシステム技術の両面からIT・システム開発・Web技術+アウトドア情報を提供しています

トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報








スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[--------] スポンサー広告 | |

MTの画像のポップアップウィンドウをカスタマイズする 

画像のポップアップウィンドウに余白と閉じるボタンを入れる

MovableTypeで画像をポップアップ表示すると、画像サイズきっちりのウィンドウが開く。ウィンドウいっぱいに画像が開かれると余裕がなく見えてしまうことがある。閉じるボタンがなく、×ボタンで閉じるのも不便だ。

そこで、「小粋空間」さんの記事を参考に画像ポップアップウィンドウで画像の上下に均等な余白を入れ、閉じるボタンを画像下中央に追加してみた。

MovableTypeの画像ポップアップウィンドウに余白と閉じるボタンを追加する
変更のサンプル画像
MovableType画像ポップアップウィンドウ変更後サンプル

CMS.pmはどこにある?

前述の小粋空間さんの記事に従って、CMS.pmを変更する。CMS.pmはMovableTypeのインストールディレクトリ配下の lib > MT > APP の中にある。重要なファイルなのでバックアップを取ったうえで変更した。

ポップアップウィンドウのスクロール・リサイズをyesにする

エディターでCMS.pmを開き、window.openで先頭から検索すると3,600行あたりにポップアップウィンドウを開くための記述があった。
<a href="$url"
onclick="window.open
('$url','popup','width=$width,height=$height,
scrollbars=no,resizable=no,
toolbar=no,directories=no,location=no,
menubar=no,status=no,left=0,top=0'
); return false"
>$link</a>
この行の scrollbars=no,resizable=no を yes に変える。

ポップアップウィンドウのサイズを大きめにする

画像の周りに余白を入れるため、ウィンドウの上下左右を広げる。変更した行の2行上に下の行を追加。
 $width += 100;
 $height += 100;
これで画像の周りに100pxの余白が作れる。

画像を中央表示して閉じるボタンを追加する

このままだと画像は上左寄せになる。閉じるボタンも欲しいのでテンプレートを変更する。環境設定 > テンプレート > システム から 画像のポップアップウィンドウのテンプレートを開き、下記の内容で上書き。
<html>
<head>
<script type="text/javascript"
src="/cgi/mt/mt-static/mt_ja.js"
></script>
<script type="text/javascript">
ScriptURI = '/cgi/mt/mt.cgi';
ScriptBaseURI = '';
StaticURI = '/cgi/mt/mt-static/';
HelpBaseURI =
'http://www.sixapart.jp/movabletype/manual/3.2/';
</script>
<script type="text/javascript"
src="/cgi/mt/mt-static/js/tc.js"></script>
</head>
<body>
<div style="text-align:center">
<div style="margin:20px">
<img src="<$MTImageURL$>"
width="<$MTImageWidth$>" height="<$MTImageHeight$>" />
</div>
<input type="button"
onclick="window.close()"
value="このウィンドウを閉じる" />
</div>
</body>
</html>

これで画像サイズに合わせて、自動的に上下左右に余白を入れ、画像下中央に閉じるボタンを入れたポップアップウィンドウが表示される。


コメントの投稿













管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://wiz2.blog16.fc2.com/tb.php/110-82ff87da








トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。