最近の記事
(02/02)ブログ更新の終了について
(01/22)Picasaでテンプレートを使う 〜 操作方法を動画で解説
(01/13)ShoutMix と Skypeボタンを組み合わせた足跡帳 & チャットボックスの設置
(01/07)画像を使ったクールなスライド・メニュー 〜 imageMenu
(01/03)iPhone/iPodのカバーフロー表示をサイトやブログでも 続きその2
(01/03)イメージスライドスクリプト”noobSlide” 〜サンプル切り出しとボタン画像の利用
(12/31)iPhone/iPodのカバーフロー表示をサイトやブログでも 続き
(12/30)iPhone/iPodのカバーフロー表示をブログでも 〜 ImageFlowをブログで使うには
(07/03)たった1行のスクリプトでできること 〜 IEのJavascript高速化 / IE判定
(07/02)Seesaaブログカスタマイズ 記事ページング機能 / ソーシャルブックマーク機能
(07/02)ブログ記事でHTML/CSS/Javascriptなどのソースコードを綺麗に表示したい 〜 dpSyntaxHighlighter
(06/25)Javascript onloadが複数ある場合の対処法 〜FancyZoomとCubeブログシールを共存させる
(06/25)クールなズームアップを手軽に実現 〜 FancyZoom 1.1
(06/21)Webサイト/ブログのCSSを直感的に理解できるFireFoxアドオン 〜 EditCSS
(06/15)記事の中でHTMLタグを表示したい
(06/15)パンくずリストをつける
(06/12)Slimbox / Lightbox のキャプションにリンクを貼るには
(06/10)slimbox1.52 reflection1.3 バージョンアップへ対応
(05/31)mooSlideBox3.2 が動かない 〜 mooSlide2.jsの修正で解決
(05/28)Mootoolsパノラマ・スクリプト "Pamoorama" VS "Mediabox"+村上スクリプト
2010年02月02日

ブログ更新の終了について この記事をはてなブックマークする |

Evernoteにクリップする

 このブログではこれまで、Javascriptライブラリー”mootools 1.1”利用のスクリプトを使った、Seesaaブログのカスタマイズ方法についていくつかを紹介してきました。

 しかし、管理人は現在新たにCMSを利用してサイトを製作中であり、今後はカスタマイズもそちらが中心になる予定です。

このため今後Seesaaブログのカスタマイズを行う予定がないことから、勝手ながらこのブログの更新を終了させていただくことになりました。

これまでの記事が今後とも参考にしていただくこともあるかと思いますので、当面ブログはそのまま残しておきます。

但し、コメントやトラックバックについては受付終了とさせていただきます。

ご訪問いただきました方々には大変ありがとうございました。

 



posted by 飛梅 at 20:28 | Comment(1) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
2009年01月22日

Picasaでテンプレートを使う 〜 操作方法を動画で解説 この記事をはてなブックマークする |

Evernoteにクリップする

 関連記事 iPhone/iPodのカバーフロー表示をサイト/ブログでも 続きその2

 上記関連記事に関して、Googleの無料の画像管理ソフト”Picasa”のテンプレートの操作方法についてのお尋ねをいただきましたので、簡単に動画を作ってみました。

 Googleの無料画像管理ソフト”Picasa”を使えば、画像管理だけでなく、簡単にスライドショーを作成したり、Web上のオンラインアルバムに画像を投稿できるのでとても便利です。さらにネットで公開されているテンプレートを使えば、さまざまな表示方法でアルバムサイトのHTMLを自動生成できます。

 テンプレート公開サイト 19Free Picasa Flash and HTML templates to showcase your photos

 こちらでは19ケの異なるテンプレートがアップされていて、デモを見たりダウンロードもフリーでできます。

posted by 飛梅 at 00:48 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
2008年06月25日

Javascript onloadが複数ある場合の対処法 〜FancyZoomとCubeブログシールを共存させる この記事をはてなブックマークする |

Evernoteにクリップする

 前記事で紹介した”FancyZoom”を、運営中の他のブログにも設置してみたところ、サムネイル画像をクリックしても別画面で元画像を表示するだけで、うまくズームアップ表示してくれません。

Cube blogseel.jpg 何か他のJavaScriptとバッティングしていないかと調べてみると、以前から設置していた日産キューブのブログシール(以下ブログシール)との相性が悪いようです。ブログシールを外すとFancyZoomはちゃんと動作します。でもお気に入りのブログシールを外すのは忍び難い。何とかならないものか・・・   
 ※対策後は両方ちゃんと動きます。(確認のためこちらにもブログシールを設置)

 ブログシールで読み込まれる外部スクリプトを開いてみると、バッティングの原因が見つかりました。

 163行目からの記述に、window.onload = function(){ document.body.appendChild(cubeLayer); setLayer(); というのがあります。

 一方、FancyZoomの起動には HTMLの<body>タグにonload="setupZoom()"を追加するようになっています。 

 window.onload と body.onload との違い(動作を含めて)は初心者の私にはよくわかりませんが、いずれにせよページが読み込まれたら何か処理を行うという意味で使われるこれらのコードは、後に書かれたものだけが実行されるため、私の場合、FancyZoomの後に記述されているブログシールの処理だけが実行されて、FancyZoomは動かないのです。 やれやれ・・・

posted by 飛梅 at 22:21 | Comment(3) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

クールなズームアップを手軽に実現 〜 FancyZoom 1.1 この記事をはてなブックマークする |

Evernoteにクリップする

 "MooTools"や"Prototype"、"jQuery"などのライブラリを使用せず単独で動作するズームアップJavaスクリプト ”FancyZoom”を設置してみました。

 <head>〜</head>タグ内にスクリプトを記述したら<body>タブにonload="setupZoom()"を加えるだけで、あとは、スクリプトの方で自動的に<a href="元画像.jpg"><img src="縮小(サムネイル)画像.jpg></a> となっている部分を検出してズームアップ表示してくれます。

 LightboxやSlimboxならば、<a>タグの中に 都度rel="lightbox"の記述を書き加えておく必要があるのですが、”FancyZoom”だと、逆にズームアップさせたくない場合だけ、rel="nozoom"を記述しておけば良いの楽チンです。

MIL52023.JPG MIL52042.JPG MIL52045.JPG

※仕様ではできるとなっているのですが、こちらではキャプションが表示できません。現在検証中です。

posted by 飛梅 at 12:34 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
2008年05月31日

mooSlideBox3.2 が動かない 〜 mooSlide2.jsの修正で解決 この記事をはてなブックマークする |

Evernoteにクリップする

mooslide_logo.jpg リンクをクリックすると、ボックスがスライドしてきて内容をを表示できる”mooSlideBox

 LightBoxの一種ながら、LightBox/Slimboxとはまた違ったエフェクトでとてもクールです。

 ”mooSlideBox 3”では画面下からのスライドアップだけだったようですが、この5月に”mooSlideBox 3.2”が登場して画面上部からのスライドダウンも加わりました。 それぞれ上記リンクにあるデモで確認してみてください。

 さっそく私も”mooSlideBox 3.2”を設置してみることに。ところが・・なかなかうまくいきません。

 サイトのからダウンロードした”mooSlide2.js”をアップし、HTMLでmooSlide2の呼び出しと、Top、Bottom表示用に2つのリンクを記述してから、指示通りの方法でボックスを起動してみるのですが・・・・

  •  現象1 ボックスを呼び出す前に、最初からボックスの内容(文字)が画面に重なって表示されてしまう。
  •  現象2 リンクをクリックすると、Bottomからのボックスは表示されるが、Topについてはうまく表示されない。※実際は画面を下にスクロールしてみるとボックスは表示されているのですが、画面上からのスライド表示にはならない。

といった症状が起きてしまいます。

posted by 飛梅 at 17:28 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
2008年05月28日

Mootoolsパノラマ・スクリプト "Pamoorama" VS "Mediabox"+村上スクリプト この記事をはてなブックマークする |

Evernoteにクリップする

 Mootoolsを導入したので、あれこれMootoolライブラリを使ったスクリプトを紹介してみます。こちらはパノラマ・スクリプト”Pamoorama”で3月に撮影したバリ島サヌールの海岸の写真を表示。 現行バージョンは0.3 

Demo1:初期設定:自動スクロール


Demo2:初期設定:手動スクロール (画像にマウスを重ねるとスクロールします)


 ※当方で確認済の現症:
  サムネイルが枠から少々はみ出してしまいます(FireFox2.0の場合。IE7はOK)。
  自動スクロール中にマウスのスクロールボタンでページスクロールするとスクロールが
  止まってしまいます。一旦Stop Autoscrollを押し、再度Start Autoscrollを押すと治ります。

 360度スクロールも今後正式対応の予定とのこと。

 さてこちらをクリックすると、従来から使わせていただいている”瀬戸の夜景”:村上さんの作成スクリプト(以下村上スクリプト)を利用したパノラマを”Mediabox”で表示します。

 以前はこのように別ページで全画面表示させていたのですが、”Mediabox”を使えばWebページもLightbox風にオーバレイ表示できます。”Pamoorama”はLightbox風に表示できないので、記事中でパノラマ表示させたい場合は”Pamoorama”で、オーバレイ表示で見せる場合は”村上スクリプト”と、状況によって使い分けるのが良いと思います。

瀬戸の夜景 日本全国の素晴らしい夜景の数々をパノラマで楽しめます。スクリプトも秀逸!

posted by 飛梅 at 07:16 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
2008年05月26日

ムービーにLightbox効果を 〜 Mediaboxを使ってみる この記事をはてなブックマークする |

Evernoteにクリップする

 ここ数日来動作確認を行っていた”Mediabox”を正式運用開始しました。

 ”Mediaboxは、YouTubeやGoogle Videoなどのオンラインムービーだけでなく、Flash、QuickTime、WMVなどのムービー形式、さらにはWebコンテンツもLightbox風のエフェクトで表示できるスクリプトです。 現行バージョンは0.72

 ”mootools”ライブラリ上で動作するので、先日紹介した”Slimbox”との共存が可能。静止画/写真はSlimboxで、ムービー/Webコンテンツの表示はMediaboxでと使い分けています。

 なお、Mediabox同様、ムービーにLightbox効果を付けることができる”Videobox”を先週紹介したばかりですが、”Mediabox”の方がたくさんのムービーや、Webコンテンツにも対応していることから新たに設置しました。Videoboxは削除しても構わないのですが、関連記事をアップした経緯もあり、そのまま残しておきます。(従って、現在Slimbox,Videobox,Mediaboxが共存しています。)

 Firefox2.0 と IE7、IE6 (いずれもOSはWindowsXP)で動作確認済。IE5.5は非対応となります。

 私のブログのカラーに合わせて、ボタン用の画像を作り直し(オリジナルは背景色が黒または白のため)、CSSの中のオーバレイフレーム色の変更を行いました。CSSはSlimboxとMediaboxで共用しています。

  play Google video  play MetaCafe  play MySpace  play Revver  play YouTube

  play Veoh  play Viddler  play Vimeo  play DailyMotion  play Flickr video

  play flash animation  play flash video  play quicktime movie  play wmv file

  open inline content

  open Yahoo Movies  open Google.com

 ※ムービーが再生されない場合は、プラグインがインストールされていない場合があります。
   Flash Player :   Windows   MacOSX 10.4  Linux x86

posted by 飛梅 at 22:56 | Comment(10) | TrackBack(1) | 日記 | このブログの読者になる | 更新情報をチェックする
2008年05月24日

再構築が自動化!〜 Seesaaブログカスタマイズがさらに簡単に この記事をはてなブックマークする |

Evernoteにクリップする

 Seesaaブログで再構築が不要に! 

 カスタマイズの自由度がとても高いとして選んだSeesaaブログですが、これまでデザインやコンテンツ、HTMLの変更なブログ上の設定内容を変更した場合、実際のブログに反映させるためは必ず「再構築」を手動で行う必要があり、全ページに適用しようとすると、記事数が増えれば増えるほど時間がかかるのが難点でした。

 このため、もともと再構築の概念がない、WordPressなどへ切り替えも検討していたところだったのですが、5/22にSeesaaブログの機能強化が行われて、再構築が自動化されたのです。

posted by 飛梅 at 14:06 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
2008年05月17日

Lightbox風スクリプトの数々 この記事をはてなブックマークする |

Evernoteにクリップする

※おことわり:本記事アップ後にFancyZoomの導入により原則としてSlimboxと共存できなくなりましたが、一部コード改変によりSlimboxで起動できるようにしてあります。但しイメージセットでのNEXT,BACKボタンは表示できなくなりました。

Design Walkerさん のサイトでLightboxスクリプトの数々が紹介されています。

それだけLightboxが使われているということなのでしょう。

どれにしようか目移りしそうですね。

このブログでは、Slimbox + Videobox の組み合わせですが、今後別のブログではまた違ったものを試してみようかしら。

でもSlimboxのように仕様がLightboxと同じ rel=”lightbox” ならいいのですが、それぞれに記述が異なると、過去記事を全部書き換えなくてはいけないので面倒です。

またmootoolsやprototypeなどのライブラリを使っている場合は、複数を組み合わせて使うとバッティングして動かないなどの不具合が生じるのでダウンロード前に確認が必要です。

posted by 飛梅 at 07:07 | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
2008年05月16日

Lightbox / Slimbox とVideoboxの共存 IE6でのエラー対策 この記事をはてなブックマークする |

Evernoteにクリップする

※おことわり:本記事アップ後にVideoboxに追加してMediaboxも設置しています。なおFancyZoomの導入により現在オリジナルではSlimboxと共存できませんがなくなりましたが、一部コード改変によりSlimboxと共存できるようにしました。但しSlimboxではイメージセットでのNEXT,BACKボタンは表示できません。

  写真などの画像のサムネイルをクリックすると、背景が暗くなって画面中央にオリジナル画像がハイライト表示される”Lightbox”、最近はあちこちのサイトで見かけるようになりました。今回は”Lightbox”に、さらにYouTubeなどのFlashムービーをLightbox風に表示してくれるという”Videobox”をブログに追加で設置してみました。 

videobox.jpg紆余曲折ありましたがやっと表示されるようになりました。サンプルがこちら。または左の画像をクリックするとYouTubeがLightbox風に表示されます。

  実は静止画、動画を問わずまとめてLightbox風に表示してくれる”Lightwindow”を1ケ月ほど前に試してみたのですが、現在IE6ではうまく表示できないようで、せっかく設置したのに仕方なく断念。

そんな折、Gigazineさんの記事で”Videobox”を知りました。

posted by 飛梅 at 07:36 | Comment(1) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。