コンパクトデジカメ画像で、日常&花&趣味など!ボチボチ弄ってまぁ~す♪

 ジャプラノート2

 コンパクトデジカメ画像で、日常&花&趣味など!
 ボチボチ弄ってまぁ~す♪

Google
 

Yahoo!検索


pc1
       いらっしゃいませ♪ 現在ジャプラノート2をご訪問の方は 名様ですぅ~♪    

<<03 12345678910111213141516171819202122232425262728293005>>
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--/--/-- --:-- | スポンサー広告 | page top↑
幕の内イベントウのソース♪
緞帳風の幕を使った。。。
イベントハンドラですぅ~♪
名付けて!縮めて♪『幕の内イ弁当♪』ですぅ~(笑
ただ!これが言いたい為に。。。
記事にしてみますたー。 ♪~( ̄ε ̄;)

以下のソースの<center>から</center>までをコピーペーストしてくださいね♪
※センタータグは、外してもOKですが。。。
 最後の</div>は、改行が入れてありますので♪
 詰めずに!そのままの状態でご使用くださいね♪(今回のポイントです(笑)

****************** 【幕の内イベントウ】のソースですぅ~(笑 ****************

<center><div align="center" style="width:520px;overflow:auto;border:3px ridge #CCCCCC;padding:0px;background-color:#333333;BACKGROUND-IMAGE:url(★1枚目の画像★);background-repeat:no-repeat;background-position:50% 50%;"><SPAN style="font-size:1px;color:#333333;"><<div id="jn22" width="1" height="1"></div><<img id=j71126 onclick="if(jn22.width==1){jn22.width=2;j71126.style.filter='progid:DXImageTransform.Microsoft.Slide(Duration=2) Alpha(opacity=90)';j71126.filters[0].Apply();j71126.src='★1枚目の画像★';j71126.filters[0].play()}else if(jn22.width==2){jn22.width=3;j71126.style.filter='progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0.5)';j71126.filters[0].Apply();j71126.src='★2枚目の画像★';j71126.filters[0].play();}else if(jn22.width==3){jn22.width=4;j71126.style.filter='progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0.5)';j71126.filters[0].Apply();j71126.src='★3枚めの画像★';j71126.filters[0].play();}else if(jn22.width==4){jn22.width=5;j71126.style.filter='progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0.5)';j71126.filters[0].Apply();j71126.src='★4枚目の画像★';j71126.filters[0].play();}else if(jn22.width==5){jn22.width=6;j71126.style.filter='progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0.5)';j71126.filters[0].Apply();j71126.src='★1枚目の画像★';j71126.filters[0].play();}else {jn22.width=1;j71126.style.filter='progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=RIGHT) Alpha(opacity=90)';j71126.filters[0].Apply();j71126.src='★幕&扉の画像★';j71126.filters[0].Play();}"src="★幕&扉の画像★" width="500" height="375" style="border:0px ridge #ffffff;" style="filter:Alpha(opacity=90);"></SPAN>

</div></center>←ここまで!

●色の数値は、使用画像の横幅に20px以上をプラスして記入してくださいね♪

●色の数値は、ご使用になる画像の大きさです。

●色の三箇所の部分は、幕が開いた時の最初の画像アドレスを三箇所に記入してください。(同じURL!)

id は二種類(jn22・j71126)を使用していますので。。。
お好みの半角英数字に変えてください。(初回はこのままでも大丈夫です)

記事編集画面のプレビューによっては。。。
多少?ズレて、表示される場合がありますので ♪~( ̄ε ̄;)
UPして確認してから、調整してくださいね♪

gooブログ用のお呪いもかけてありますぅ~♪

"グゥ~"<<<<<お呪い>>>>>~ヘ(~ω~ヘ)


緞帳作成が、ちょいと面倒な方は。。。
以下のお好きなボタンを押し、右クリックで保存して♪
ご使用くださいねぇ~ ♪~( ̄ε ̄;)





スポンサーサイト
2007/11/27 16:58 | Blogカスタム | トラックバック(0) | コメント(23) | page top↑
緞帳リベンジ♪
【背景色が変更出来ます♪】 ⇒ <<<<<<<
<
<


【クリックで見てねぇ~゚・*:..。o☆゚・*:..。o♪】

昨日の改良版ですぅ~ ♪~( ̄ε ̄;)
昨日の作品は、マウスアウト時にスクリプト自体が一瞬!
息継ぎしてしまうなど。。。
あまりに!完成度が低いので。。。(泣
作り直してみましたぁ~♪

実は、思い切って!ピンクの緞帳も作って!
密かに!好感度UPを企んだのですが。。。 ♪~( ̄ε ̄;)
あまりにキモイので、却下しましたよ~♪
使い慣れない色は、やっぱ駄目ですねぇ~(笑
⊂(_ _⊂⌒⊃ ドテッ!!!
画像は、季節感のまったく感じられない。。。
使い回しですぅ~(笑
2007/11/26 15:36 | Blogカスタム | トラックバック(0) | コメント(14) | page top↑
拝啓♪変か?
前回の記事でUPしました ♪~( ̄ε ̄;)
背景色変化ツールの星タイプが欲しぃ~.。.:*・゚☆.。.:*・゚☆.。.:*・゚☆
との、ご要望にお答えしまして。。。
【濃口ソース】&【薄口ソース】の2種類を用意しましたので♪
今夜のおかずにどうぞ♪(笑

【濃口ソース】(笑
【背景色が変更出来ます♪】 ⇒ <<<<<<

************** 以下をコピペでご使用くださいね **************

<center>【背景色が変更出来ます♪】 ⇒ <span style="font-size:1px;color:#ffffff;"><<input type="button" style="font-size:13px;color:#000000;" value="★"onClick="bg03.style.backgroundColor='#000000';"><<input type="button" style="font-size:13px;color:#006666;" value="★" onClick="bg03.style.backgroundColor='#006666';"><<input type="button" style="font-size:13px;color:#006699;" value="★" onClick="bg03.style.backgroundColor='#006699';"><<input type="button" style="font-size:13px;color:#666699;" value="★" onClick="bg03.style.backgroundColor='#666699';"><<input type="button" style="font-size:13px;color:#990066;" value="★" onClick="bg03.style.backgroundColor='#990066';"><<input type="button" style="font-size:13px;color:#cc0066;"value="★" onClick="bg03.style.backgroundColor='#cc0066';"><<div id="bg03" style="width:500px;overflow:auto;border:2px ridge #CCCCCC;padding:0px;"></span><span style="font-size:13px;color:#cccccc;line-height:21px;">
★記事(画像&文字など)★
</span></div></center>

【薄口ソース】(笑
【背景色が変更出来ます♪】 ⇒ <<<<<<

************** 以下をコピペでご使用くださいね **************

<center>【背景色が変更出来ます♪】 ⇒ <span style="font-size:1px;color:#ffffff;"><<input type="button" style="font-size:13px;color:#DCDCDC;" value="★"onClick="bg04.style.backgroundColor='#DCDCDC';"><<input type="button" style="font-size:13px;color:#ccffcc;" value="★" onClick="bg04.style.backgroundColor='#ccffcc';"><<input type="button" style="font-size:13px;color:#99ffff;" value="★" onClick="bg04.style.backgroundColor='#99ffff';"><<input type="button" style="font-size:13px;color:#ccccff;" value="★" onClick="bg04.style.backgroundColor='#ccccff';"><<input type="button" style="font-size:13px;color:#ffffcc;" value="★" onClick="bg04.style.backgroundColor='#ffffcc';"><<input type="button" style="font-size:13px;color:#ffcccc;"value="★" onClick="bg04.style.backgroundColor='#ffcccc';"><<div id="bg04" style="width:500px;overflow:auto;border:2px ridge #CCCCCC;padding:0px;"></span><span style="font-size:13px;color:#003366;line-height:21px;">
★記事(画像&文字など)★
</span></div></center>

2007/11/23 11:48 | Blogカスタム | トラックバック(0) | コメント(8) | page top↑
backgroundColor変更 Script〔DIV〕
【背景色が変更出来ますぅ~♪】 ⇒ <<<<<<<

07/11/20 現在!
PIXIE&FC2の表示が当ブログ上で誠に不安定ですので、
一度PIXIEをお借りして記事をUPしましたが。。。
変更いたしましたので、あしからず♪

<マウスオンクリック&Wクリックでご覧くださいねぇ~♪>

前回の背景色変更用Scriptのソースですぅ~♪
DIVとTABLEの両バージョンで作ってみました。
TABLEタイプは、記事のレイアウトが複雑に組み込めるのですが。。。
ソースが、あまり綺麗ではないので。。。(笑
今回は、簡単にレイアウトし易い♪
DIVタグで作成した物をUPしてみました♪

※gooブログでも使えるように(多分?)お呪いもかけてありますぅ~(笑
"goo"(/-x-)/ ~<<<<<お呪い>>>>>

※今回のソースは、gooブログ用にアレンジしてありますので。。。
投稿画面内のプレビューでは、ボタンが小さく表示されますが、
そのまま投稿していただくと、普通の大きさで表示される予定です(笑

★追記 σ(=^ω^=) ニャ~♪
青空さん♪が色付きボタンで、素敵にアレンジしていましたので♪
そちらの方法もご紹介しますねぇ~♪
【こちらのボタンでも変更出来ますぅ~♪】 ⇒ <<<<<<

下のstyleを<input>内に記述しますと上記のような色付きのボタンになります♪
style="background-color:ボタン背景色;font-size:13px;color:ボタン文字色;"

<input>タグは、他のボタン形状なども使用できますので。。。
色々とアレンジしてご使用くださいねぇ~゚・*:..。o☆゚・*:..。o♪

【背景色変更 Script〔DIV〕用のソースですぅ~♪】

************** 以下をコピペでご使用くださいね **************

<center>【背景色が変更出来ますぅ~♪】 ⇒ <span style="font-size:1px;color:#ffffff;"><<input type="button" value="黒" onClick="bg02.style.backgroundColor='#000000';"><<input type="button" value="緑" onClick="bg02.style.backgroundColor='#009999';"><<input type="button" value="青" onClick="bg02.style.backgroundColor='#006699';"><<input type="button" value="茶" onClick="bg02.style.backgroundColor='#cccc99';"><<input type="button" value="灰" onClick="bg02.style.backgroundColor='#999999';"><<input type="button" value="赤" onClick="bg02.style.backgroundColor='#660000';"><<div id="bg02" style="width:500px;overflow:auto;border:2px ridge #CCCCCC;padding:0px;"></span><span style="font-size:13px;color:#00ccff;line-height:21px;">
★記事(画像&文字など)★
</span></div></center>

2007/11/21 01:47 | Blogカスタム | トラックバック(0) | コメント(18) | page top↑
BGカラーチェンジ

<マウスオン&クリックで見てねぇ~♪>

テンプレートのbackgroundColor(背景色)をJavaScriptを使って♪
ボタン1つで簡単に変えられるようにしようと思ったのですがぁ~(笑
一度!CSSで背景を指定してしまいますと。。。
これが!なかなか厄介でしてぇ~(笑
出来るとは思うのですが、今日のところは時間切れ♪
って、事で。。。
記事単位で背景色を簡単に変えるボタンを作ってみましたぁ~(笑
【お好きな背景色ボタンを押してご覧くださいねぇ~♪】
2007/11/19 02:02 | Blogカスタム | トラックバック(0) | コメント(8) | page top↑
イベントスタイル

<画像にマウスカーソルを載せて♪クリック&Wクリックでご覧くださいねぇ~♪>

onmouseover,onmouseout,onclick,ondblclick の各イベントごとに。。。
スタイルで〔'progid:DXImageTransform.Microsoft〕フィルターを指定してみました♪
お好きなフィルター効果♪やイベントの組み合わせでアレンジしてくださいねぇ~♪

【上記のソースですぅ~♪】
<center><SPAN style="font-size:1px;color:#000000;"><<img id="j71113" src="★最初の画像アドレス★" style="border-width:3px;border-style:groove;border-color:#cccccc;" width="380" onmouseover="j71113.style.filter='progid:DXImageTransform.Microsoft.Pixelate(Duration=2,MaxSquare=40,)';j71113.filters[0].apply();j71113.src='★オンマウス画像アドレス★';j71113.filters[0].play();" onmouseout="j71113.style.filter='progid:DXImageTransform.Microsoft.Slide(slideStyle=SWAP,Duration=1)';j71113.filters[0].apply();j71113.src='★マウスアウト画像アドレス★';j71113.filters[0].play();" onclick="j71113.style.filter='progid:DXImageTransform.Microsoft.Pixelate(Duration=2,MaxSquare=40)';j71113.filters[0].apply();j71113.src='★クリック画像アドレス★';j71113.filters[0].play();" ondblclick="j71113.style.filter='progid:DXImageTransform.Microsoft.Pixelate(Duration=2,MaxSquare=40)';j71113.filters[0].apply();j71113.src='★Wクリック画像アドレス★';j71113.filters[0].play();" alt="説明文">></SPAN></center>

画像は。。。
食べかけのリンゴ&足利名物♪古印最中ですぅ~(笑

2007/11/13 21:21 | Blogカスタム | トラックバック(0) | コメント(34) | page top↑
DXImageTransform

【DXImageTransform.】を使用したソースを良く目にしますが。。。
インターネットエクスプローラ(IE)専用のフィルターですので、
IE以外のブラウザで見ることは出来ませんが。。。
とても色々な効果を画像などに付け加えて、表示することができます♪
以下のような、アルバムでも使うことが出来ますぅ~♪

〔今年、三月に使用した物を流用しましたぁ~(笑〕

 < <CG画像〔1〕 <CG画像〔2〕 <CG画像〔3〕 <CG画像〔4〕 <CG画像〔5〕 <CG画像〔6〕 <CG画像〔7〕 <

ソース内の〔progid:DXImageTransform.Microsoft.○○○〕の中の○○○の部分を。。。
以下の表の左側の部分に書き換える事で、色々な効果を選ぶ事が出来ますぅ~♪

progid:DXImageTransform.Microsoft.○○○
○○○部分に記入する語句効果説明
Barn(Duration=1)左右観音開き(中から外)
Barn(orientation=horizontal,Duration=1)上下観音開き(中から外)
Blinds(Duration=1)ブラインド(上下)
Blinds(direction=right,Duration=1)ブラインド(左右)
CheckerBoard(direction=down,Duration=1)市松(上下)
CheckerBoard(Duration=1)市松(左右)
Fade(Duration=1)フェード
GradientWipe(Duration=1)左から右へ滑らかに変化
Inset(Duration=1)四角(左上から右下)
Iris(Duration=1)十字(中から外)
Iris(irisStyle=DIAMOND,Duration=1)ひし形(中から外)
Iris(irisStyle=CIRCLE,Duration=1)円(中から外)
Iris(irisStyle=CROSS,Duration=1)X型(中から外)
Iris(irisStyle=SQUARE,Duration=1)四角(中から外)
Iris(irisStyle=STAR,Duration=1) 星型(中から外)
Pixelate(Duration=1)モザイク
RadialWipe(Duration=1)時計回りに回転
RadialWipe(wipeStyle=WEDGE,Duration=1)左右に回転して開く
RadialWipe(wipeStyle=RADIAL,Duration=1)左上を中心に回転
RandomBars(Duration=1)ランダムな横線
RandomBars(orientation=vertical,Duration=1)ランダムな縦線
RandomDissolve(Duration=1)
Slide(Duration=1)右から左にスライド
Slide(slideStyle=PUSH,Duration=1)右から左に押し出す
Slide(slideStyle=SWAP,Duration=1)互い違いに入れ替え
Spiral(Duration=1)渦巻き
Stretch(Duration=1)中から外に押し出す
Stretch(stretchStyle=HIDE,Duration=1)左から右に広がる
Stretch(stretchStyle=PUSH,Duration=1)左から右に伸縮
Strips(Duration=1)右上から左下
Strips(motion=leftup,Duration=1)右下から左上
Strips(motion=rightdown,Duration=1)左上から右下
Strips(motion=rightup,Duration=1)左下から右上
Wheel(spokes=8,Duration=1)車輪のように回転
Zigzag(Duration=1)ジグザグ
※(Duration=1)の数値は効果の持続時間ですので、1~3くらいでご使用くださいね♪

前回使用しましたソースも♪
参考に、載せておきますねぇ~♪(画像五枚用です。)
<center><SPAN style="font-size:1px;color:#ffffff;"><<div id="jn2" width="1" height="1"></div><<img id=j7114 onclick="if(jn2.width==1){jn2.width=2;j7114.filters[0].Apply();j7114.src='★2枚めの画像URL★'}else if(jn2.width==2){jn2.width=3;j7114.filters[0].Apply();j7114.src='★3枚めの画像URL★'}else if(jn2.width==3){jn2.width=4;j7114.filters[0].Apply();j7114.src='★4枚めの画像URL★'}else if(jn2.width==4){jn2.width=5;j7114.filters[0].Apply();j7114.src='★5枚めの画像URL★'}else {jn2.width=1;j7114.filters[0].Apply();j7114.src='★1枚めの画像URL★'} j7114.filters[0].Play();" src="★1枚めの画像URL★" width="500" height="375" style="filter:progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=1);border-width:5px;border-style:ridge;border-color:#CCCCCC;"></SPAN></center>

【説明です♪】
●色文字は、gooブログ用のゴミ消しですので。。。
 背景と同色又は、類似色を記入してくださいね♪

●色文字は、画像の大きさを記入してくださいね♪

●色文字は、フィルター効果ですので♪
 上の表よりお好きな効果を選んで、記入してくださいね。

●色文字は、ID番号ですので、10箇所全てに。。。
 同じ半角英数字を記入してくださいね♪

●色文字も、IDですが。。。
 上のIDとは別の半角英数字を12箇所に同じのものを記入してくださいね♪



2007/11/08 23:30 | Blogカスタム | トラックバック(0) | コメント(12) | page top↑
gooブログパーツの変換方法♪

gooBlogのブログパーツの変換方法を。。。
今回は〔PIXIE〕を使って、簡単に説明しますぅ~♪

まず♪ PIXIEのホームページ へおじゃまして♪
以下のようなブログパーツのソースをコピーしますぅ~♪

表示されているソースを全て!コピーします♪

次にgooブログの管理画面にログイン後、左のメニュー内に有る♪
〔ブログパーツ〕をクリックします♪(下画像参照)

ブログパーツをクリック♪

パーツタイトルを記入し、その下に先程コピーして来たブログパーツのタグを
貼り付けて、〔goo ブログパーツに変換〕ボタンを押します♪(下画像参照)

パーツタイトルは、何でも結構です♪

以下のように、gooブログ用のタグに変換されますので。。。
コピーして!記事に貼り付けてくださいね♪

コピーして、表示させたい所に貼り付けてくださいね♪


☆.。*・゜・・:,・.。*・:,・.。*・゜・・:, .。* おまけですぅ~ *・゜・・:,・.。*・゜・・:,・.。*・:,・.。*・☆


当ブログでも度々使用していますが。。。
記事に貼り付けた複数の画像を隠したまま♪
PIXIEを利用してアルバムを作る方法ですぅ~♪

画像五枚用のアルバムです♪

<a href="★1枚目画像アドレス★" target="_blank" title=""><img src="★2枚目画像アドレス★" border=0></a>
<a href="★2枚目画像アドレス★" target="_blank" title=""><img src="" width="1" height="1" border=0></a><a href="★3枚目画像アドレス★" target="_blank" title=""><img src="" width="1" height="1" border=0></a><a href="★4枚目画像アドレス★" target="_blank" title=""><img src="" width="1" height="1" border=0></a><a href="★5枚目画像アドレス★" target="_blank" title=""><img src="" width="1" height="1" border=0></a>

赤字の部分の画像が、1枚だけ記事に表示される画像ですぅ~♪
でも、記事には表示されますが。。。
PIXIEには表示されませんので、その下に同じ画像が貼り付けてあります。
表示されないので、他の画像に(GIFアニメなど)に変更してもOKですよ~♪

※画像を増やす場合は、以下のソースを足してくださいね♪

<a href="★画像アドレス★" target="_blank" title=""><img src="" width="1" height="1" border=0></a>

※2枚め以降の〔img src=""〕の""の中には、何も記入しないでください♪
(ダミーです♪)

※title="" の "" の中に、画像の説明文を記入してくださいね♪

このソースで、画像一枚の表示で他の画像は隠したまま。。。
アルバムになりますぅ~♪



2007/11/06 23:45 | Blogカスタム | トラックバック(0) | コメント(43) | page top↑
PIXIE パートⅢ

無料のgooブログでは、サイドメニューにPIXIEの本体を
載せる事が出来ませんが。。。(泣
記事には載せられるので♪
こんな使い方をしてみましたぁ~♪ ⇒ ぴんぼけ日記へ♪

2007/11/03 12:36 | Blogカスタム | トラックバック(0) | コメント(0) | page top↑
PIXIE パートⅡ

今回は、昨日に続きPIXIEのお話ですぅ~♪
これが弄り始めてみると、なかなか面白いツールでして♪
アルバム風に見せるのは勿論なのですが。。。
画像下のテキストなども、title属性を設定することで。。。
その中のタグをHTMLエンティティに変換し使用するとで♪
テキストの変更が可能とのことですので♪
早速♪弄ってみましたので、下の画像をクリックしてみてくださいねぇ~♪



その他には、画面を大きなまま使用できるので♪
大きさの違う画像をそのまま使用出来るのが、良いですねぇ~♪

画像は、全て!季節外れですぅ~(笑

2007/11/01 14:00 | Blogカスタム | トラックバック(0) | コメント(18) | page top↑
ホーム古いページへGO♪

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