Instant.jsで画像にフレームを表示

前記事ではCSSで画像に枠をつける方法を書きましたが、今回は「Instant.js」というjavascriptで画像にポラロイドのような枠をつける方法を紹介したいと思います。

このブログはちょっと重いので、読み込みに時間がかかると思います。
全部を読み込むと、この記事の画像にフレームがつきますので、画像にフレームがついていない場合はしばらく時間が経ってから確認して下さい。


09062812.jpg



09062901.jpg
こちらのページから「instant.js」をダウンロードします。
(この画像をクリックすると「instant.js」のページに飛びます。)

←の赤丸部分をクリックしてもダウンロードできるし、この画像のもう少し下の方にある「Download」からでも同じものがダウンロードできます。

09062902.jpg
  展開します。

09062903.gif
展開するとこのようなファイルが入っていますが、使用するのは「instant.js」ファイルのみです。
(フレームに文字を入れる場合は「cvi_text_lib.js」も使用します。)

このファイルを管理画面のファイル管理からアップロードしておきます。

<script type="text/javascript" src="http://blog-imgs-32.fc2.com/○/○/○/XXXXXX/instant.js"></script>

赤字の部分は先ほどアップロードしたURLを書き込みます。
09062904.gif
例えば…アップロードした時にこのように出ますのでこのURLを記入します。

09062905.gif
これをテンプレート管理のHTML編集画面の「<head>~</head>までの間に貼り付けます。

私のテンプレート編集画面の場合でしたら、この位置に貼り付けてみました。


以上で準備は終了です。
以下使い方です。

記事を書く時に通常通り画像を挿入します。
以下のような表示(赤字部分はなし)になっていますので、赤字部分を書き足します。
これだけでポラロイド枠がつきます。

<a href="http://blog-imgs-32.fc2.com/s/a/k/sakuraxren/09062812.jpg" target="_blank"><img src="http://blog-imgs-32.fc2.com/s/a/k/sakuraxren/09062812s.jpg" alt="09062812.jpg" border="0" width="300" height="226" class="instant"/>


このinstant.jsにはいろんなオプションをつけることができ、「class="instant」の部分を書き換えるだけでいろんな枠をつけることができます。

画像を傾ける方向  itilt (例:itiltleft 左に傾ける / itiltnone 傾けない)
枠の色   icolor (例:icolorFF0000 赤【ff0000】)
影の濃度  ishadow (例:ishadow50 影の濃度50%)
枠のギザギザ historical
角丸  nocorner
下部を光らせない noshading

例を画像で表示しておきますので参考にどうぞ。
(読み込みに時間がかかるかもしれません
09062906.jpg
  class="instant itiltright"      class="instant itiltleft"

09062906.jpg 09062906.jpg
  class="instant itiltnone"      class="instant itiltnone ishadow50"

09062906.jpg 09062906.jpg
class="instant itiltnone ishadow30"  class="instant itiltnone ishadow100"

09062906.jpg 09062906.jpg
左: class="instant itiltnone ishadow50 icolorcccccc"
右: class="instant itiltnone ishadow20 icolor000000 historical"
右は「historical」でフレームがギザギザになる。

09062906.jpg 09062906.jpg
左: class="instant itiltnone ishadow30 icolor006699 nocorner"
右: class="instant itiltnone ishadow30 icolor006699 nocorner noshading"
「nocorner」でフレームの角が丸くなる。
右は「noshading」で写真の下部が光ったようになっていない。




【追記】

ここからの説明と同様にダウンロードしてきたフォルダの中にある「cvi_text_lib.js」をアップロードして、テンプレートのヘッド部分に書き込むと(英数しかダメみたいですが)フレームに文字を入れることができます。

文字を入れる場合は
itxtalt → alt部分の文字が入ります。
itxttitle → title部分の文字が入ります。

  Kino muku mama ni...

<img src="http://blog-imgs-32.fc2.com/s/a/k/sakuraxren/09062906.jpg" alt=" Kino muku mama ni..." border="0" width="225" height="149" class="instant itiltnone ishadow30 icolorcccccc nocorner noshading itxtalt itxtcolcc6600"/>
↑ itxtalt 文字を入れる
    alt="○○"の部分が文字になります。
  itxtcol 文字色



<img src="http://blog-imgs-32.fc2.com/s/a/k/sakuraxren/09062906.jpg" title="Ajisai 2009.6.10" border="0" width="225" height="149" class="instant itiltnright ishadow70 icolor339999 noshading itxttitle itxtcolffffff historical "/>






関連記事

コメントの投稿

こんにちは☆

いつもながら楽しい記事でワクワクしちゃいます~e-349
れんさんは自由自在ですよね♪凄いなぁe-349

息子さん、お帰りなさ~い!
こちら地方だったんですね!天気どうだったかなぁ(汗;
縫った傷はいかがですか?
やっぱり疲れてたんですねe-260
くれぐれもお大事にどうぞ!

こんばんは

れんさん本当に凄すぎます、本当自由自在なんですね
どうすれば、れんさんの様になれるのでしょうか

うわぉ・・・・
これ、ちび介の サッカーの写真に使うとおもしろい?
パラパラまんがのような、シュートシーン、とか、ありですよね??

みるぼ様

返信が大変遅くなり申し訳ありませんm(__)m

パソコン楽しすぎです!
こんなことやってるとあっという間に時間が過ぎちゃって…e-330

自分でもできるおもしろいことを発見(検索で見つける)とうれしくなっちゃいます♪
で、ついついうれしそ~に記事にしちゃうのよね( *^艸^)

縫った傷は昨日抜糸してもらい、唇の色も普通に見え、パッと見てわからなくなりました。
足の痛みもだいぶよくなったようです。
ご心配していただきありがとうございますm(__)m

息子が撮ってきた写真を見てると私も北海道に行きたくなってきました。
いつかは行くぞ!

ニュータイガー8様

返信が遅くなり申し訳ありませんm(__)m

うれしくなってしまうようなコメントありがとうございます( *^艸^)
「好きこそものの上手なれ」でしょうか…。
私は誰かに教わったこともないし、全て独学です。
いえ、「独学」を言うのは「自分で勉強している」ってことですから、正しくはそうではありません。
だって勉強なんてしてませんもの( *^艸^)

ただ、パソコンを触るのが楽しくて、いろいろと真似てやっているうちにできるだけで、知らず知らずのうちに今の状況になっていただけです。

お料理の好きな方は「料理が上手になろう」と思わなくてもいつの間にか料理上手になられているんでしょうし、お裁縫の好きな方は練習しなくてもいつの間にか何でもご自身で作られてると思うんですよね。
それと同じ。
私の場合そういう家庭的なことは大の苦手ですが、パソコンは好きだから上達した(?)みたいです( *^艸^)

できれば…家庭的なことも上手になりたいです……。

ぷぅちゃん☆様

ひょっとしてぷぅちゃん☆見に来て下さった時フレーム表示されてなかったのでは…と心配しております。
どうやら上記記事の「ページをめくる」の画像(javascript)とこのフレームのjavascriptの両方を使うとフレーム表示がされてなかったようなのです。

パラパラマンガのように少しずつコマを変えて、フレームをつけてやるとまた楽しそうですね!
私も何か…連続写真撮ってみてやってみようかな~(#^.^#)
**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ