MT Template Javascriptサンプルの紹介
OPEN&CLOSEボタン
隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。隠れている内容です。
***************************************************************
その名の通り、そのボタンをクリックすることによりOPENとCLOSEの動作がされるボタンになります。
たくさんの情報を伝えたいが、ナビゲーション的には好まれない場合など多々あると思われます。
このボタンのすぐ上で目を引くキャッチフレーズだけ表示させ（シンプルなページの作りでわかりやすいナビゲーションを）、詳細はこのボタンの下に隠しておきます。
そして、そのキャッチに興味を引かれた訪問者は、このボタンをクリックするということです。
あらかじめ、ページ表示直後に、ボタンを閉じるブラインド（アクション）のアニメーションが自動的に表示されます。これにより、訪問者はそこに閉じた内容が存在することを認識します。
また、隠された情報には興味を引かれてしまうという人間の心理をつくニクい仕掛けになっています。
*極端に長い内容を隠すアニメーションには対応していないため、スムーズな動きが作動しない事があります。（アニメーションが機能しなくなることはありません。）
*このボタンは1ページに一つしか動作しませんのでご注意下さい。（1サイト内に一つだけ使用できるものとお考え下さい。）
■導入方法
エントリー投稿欄に以下の記述をすることで導入できます。
<div id="news1" class="click">OPEN&CLOSEボタン</div>
<div id="news1_cont">
通常、隠したい内容をここに記述。
</div></div>
[補足]
*<div id="news1" class="click">OPEN&CLOSEボタン</div>内のOPEN&CLOSEボタンの部分を書き換えることによってボタンの文字を変更できます。
*通常、隠したい内容をここに記述。という部分に記述したテキストが「OPEN&CLOSEボタン」を押したときに表示される部分となります。
ここには「img」や「table」等のHTMLタグで記述する事もできます。
サブウィンドウ表示01 - Show My Alert
ボタンをクリックするとウィンドウが立ち上がり、そこに簡単な告知やお知らせを載せることができます。
情報販売、セールスレター系に度々見られるものですが、バックに背景色をおしゃれに添え、今までとは違うおしゃれな告知を提供してみるのもいかがでしょうか。
■導入方法
エントリー投稿欄に以下の記述をすることで導入できます。
<button type="button" onclick="showMyAlert();">Show My Alert</button>
</div>
[補足]
*<button type="button" onclick="showMyAlert();">Show My Alert</button>の中のShow My Alertの部分を書き換えることによってボタンの文字を変更できます。
*サブウィンドウ内のテキストは「インデックス・テンプレート」のSite Javascript(mt-site.js)のテンプレートの内容を変更していただけます。（変更の仕方については、「インデックス・テンプレート：Site Javascript（mt-site.js）の変更の仕方」を参照。）
サブウィンドウ表示02 - Show My Info(カウントダウン)
01 - Show My Alert の仕様に時間制限を加えたものです。
お好きな時間を設定していただけます。
■導入方法
エントリー投稿欄に以下の記述をすることで導入できます。
<button type="button" onclick="showMyInfo();">Show My Info</button>
</div>
[補足]
*<button type="button" onclick="showMyInfo();">Show My Info</button>の中のShow My Infoの部分を書き換えることによってボタンの文字を変更できます。
*サブウィンドウ内のテキストは「インデックス・テンプレート」のSite Javascript(mt-site.js)のテンプレートの内容を変更していただけます。（変更の仕方については、「インデックス・テンプレート：Site Javascript（mt-site.js）の変更の仕方」を参照。）
サブウィンドウ表示03 - Show My Ajax Dialog
同じくボタンをクリックしていただくことによってウィンドウが立ち上がるのですが、最新で投稿したエントリー内容を表示できる仕組みになっています。最新のエントリーを上手に使うことによって、様々な引き付ける仕掛けを用意できます。
また、メインページ表示直後に自動的にこのShow My Ajax Dialogウィンドウを立ち上げる仕掛けも用意してあります。
■導入方法
エントリー投稿欄に以下の記述をすることで導入できます。
<button type="button" onclick="showMyAjaxDialog();">Show My Ajax Dialog</button>
</div>
[補足]
*<button type="button" onclick="showMyAjaxDialog();">Show My Ajax Dialog</button>の中のShow My Ajax Dialogの部分を書き換えることによってボタンの文字を変更できます。
*インデックスページ（トップページ）にて自動で立ち上がるのを解除するには、MT管理画面：インデックス・テンプレートのSite JavaScript03(mt-site03.js)を削除するか、テンプレートの中身を削除（空白に）して下さい。
画像を効果的に拡大表示
画像をクリックしていただくことで、おしゃれに拡大画像を表示させることができます。
このような、ちょっとした仕掛けの質を高めることにより、サイトの品格や信頼性をあげる効果が期待できます。
■導入方法
エントリー投稿欄に以下の記述をすることで導入できます。
<a href="拡大画像の絶対パス指定" rel="ibox" title="Auto Detect Image Size" ><img src="縮小画像の絶対パス指定" alt=""/></a>
</div>
[補足]
*画像の絶対パス指定とは"http://www.cmsagent.net/javascript_manual/image/large/image04.jpg"のような記述のURLのことです。
*尚、拡大画像、縮小画像については、当社が指定した「image」フォルダ内の「large」、「small」にそれぞれアップロードしていただけると管理しやすいかと思われます。
任意の日時までカウントダウン
任意の日時、テキストを設定することによってカウントダウンが行われます。
任意のサービスや商材についての告知等の仕掛けで効果を発揮するでしょう。
■導入方法
エントリー投稿欄に以下の記述をすることで導入できます。
<form name="f">
<input type="text" name="days" align="center" style="border:0px;" size="50">
</form>
</div>
[補足]
*カウントダウン内のテキストは「インデックス・テンプレート」のSite Javascript(mt-site.js)のテンプレートの内容を変更していただけます。（変更の仕方については、「インデックス・テンプレート：Site Javascript（mt-site.js）の変更の仕方」を参照。）