写真をポラロイド風に簡単に装飾してくれるinstant.js 2.2を当ブログに設置しました。
参照
設置方法
ファイルのダウンロード
instant.jsから下記ファイルをダウンロードして解凍。
- instant.zip
ディレクトリ構成を決定
thickboxやSyntaxHighlighter設置時の構成に習い、下記構成に決定。
Movable Type インストールディレクトリ/
+-- js/
| +-- instant/
| | +-- instant.js
| | +-- cvi_text_lib.js
ファイルのアップロード
ディレクトリ構成に従い、各ファイルをアップロード
テンプレートの編集
Movable Typeの管理画面より[ヘッダー・テンプレート]のhtml要素内に下記項目を追加して保存。
投稿記事での使い方
img要素のclass属性に下記のinstant.js独自の値を指定します。複数指定の場合はスペースで区切ります。
| 値 | 機能 |
|---|---|
| instant | 初期設定値でエフェクト |
| ishadowxx | ドロップシャドウの透明度(0-100/デフォルト:33) |
| icolorxxxxxx | フレームカラー(16進数指定/000000-ffffff/デフォルト:f0f4ff) |
| itiltleft | 左に傾ける(未指定で[左傾斜/傾斜無し/右傾斜]の繰り返し) |
| itiltnone | 傾けない(未指定で[左傾斜/傾斜無し/右傾斜]の繰り返し) |
| itiltright | 右に傾ける(未指定で[左傾斜/傾斜無し/右傾斜]の繰り返し) |
| noshading | ドロップシャドウなし |
| historical | よれよれフレーム |
| nocorner | フレームを角丸に |
| preserve | 縦横比を維持 |
| itxtcolxxxxxx | キャプションの文字色(16進数指定/000000-ffffff/デフォルト:000000) |
| itxtalt | alt属性の値をキャプションとして取得 |
| itxttitle | title属性の値をキャプションとして取得 |
サンプル
よれよれフレーム・右傾斜・キャプション付
参考
このinstant.jsはMovable Typeのホーム(fukuchang.net)、カテゴリ別ページ(JavaScriptの最近のブログ記事)、月別ページ(September 2008アーカイブ)では問題なく表示されるのですが、個別ページ(Movable Type 4.21にinstant.js 2.2を設置)では、機能しません。
おそらく、個別ページでbody要素に追加されるonload属性(mt.jsのfunction呼び出し)とinstant.jsがバッティングしているようです。
コメントする