最近の記事
(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"+村上スクリプト
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) | 日記 | このブログの読者になる | 更新情報をチェックする
2009年01月13日

ShoutMix と Skypeボタンを組み合わせた足跡帳 & チャットボックスの設置 この記事をはてなブックマークする |

Evernoteにクリップする

shotmix_logo.jpg

 ミクシーmixiでおなじみの「足あと」ですが、mixiでは日記を足跡帳として利用しているメンバーも多いようです。

 自分のサイトやブログでも足跡帳を設置したいという方も多いのでは。

 こちら”ShoutMix”は私も偶然見つけたサイトですが、わずか3ステップで自分専用のメッセージボードが作成できて、サイトやブログにもコードを貼り付けるだけで設置できます。

posted by 飛梅 at 01:30 | Comment(0) | TrackBack(0) | カズタマイズ(一般) | このブログの読者になる | 更新情報をチェックする
2009年01月07日

画像を使ったクールなスライド・メニュー 〜 imageMenu この記事をはてなブックマークする |

Evernoteにクリップする

 こちらのSONYのサイトのトップには画像を使ったスライド・メニューが設置してあって各製品のページへジャンプできるようになっていますがなかなかクールです。 ただこれFlashで作成されているので、自作するには敷居が高そうです。

  Mootoolsライブラリを利用した画像メニュースクリプト ”imageMenu”を使えば、スライドメニューを簡単に作成できてしまいます。
オプションのパラメータを組み合わせればいろいろできそうです。

  こちらは私の試作品

imagemeu_sample.jpg 

 公式サイトでは現在Mootools 1.1にしか対応していませんが、ググッてみるとこちらにはMootools 1.2対応版がありました。 

でもこうなると画像作成のセンスが問われますね(汗)

posted by 飛梅 at 07:08 | Comment(6) | TrackBack(0) | mootools | このブログの読者になる | 更新情報をチェックする
2009年01月03日

iPhone/iPodのカバーフロー表示をサイトやブログでも 続きその2 この記事をはてなブックマークする |

Evernoteにクリップする

 もっと手軽にカバーフローを作成してくれるツールをダウンロードしていながらすっかり忘れていました。

 19Free Picasa Flash and HTML templates to showcase your photos

 こちらにはGoogleの画像管理ソフト”Picasa2”のテンプレートが19あって、フリーで利用できるようになっています。

どれも素晴らしいテンプレートですが、その中の”ImageFlow”テンプレートを使えば、簡単にお気に入りの画像をカバーフローで表示でき、必要なWebページも自動で生成されるので、サーバーにアップするだけでサイトページができあがります。

こんな感じです。※ブログの記事の横サイズの関係で70%程度に縮小表示しています。

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

イメージスライドスクリプト”noobSlide” 〜サンプル切り出しとボタン画像の利用 この記事をはてなブックマークする |

Evernoteにクリップする

 mootoolsライブラリを使ったスライドスクリプト”noobSlide”、サンプルが8種用意されていて、応用もできそうなのでブログでも使ってみることに。

 ところがサンプルページ(8種)をそっくり自分のブログにHTMLを貼り付けてみたら問題なく動いたのですが、自分の使いたいサンプルだけを切り出して貼ってみたら急に動かなくなり随分悩まされました。

 HTMLに書かれているサンプル用の一連のJavascriptでは、前のサンプルのパラメータ値を参照しているものがあって、使いたいサンプルのコードだけ切り出すと必要なパラメータ値が抜け落ちてしまっていたのが原因でした。 時間はかかりましたがなんとか全てのサンプルを個々に切り出すことには成功しました。

 このnoobSlideとても素敵なスクリプトですが、サンプルで使われている画像(横サイズ240px、既定値)をもっと大きなサイズの画像に変更しようとすると、CSSもJavascriptも両方パラメータを修正、追加しなくてはならないなど、私のような初心者にとっては敷居が高いところも。でもCSSもJavascriptも勉強できていいかな。

 余談ですが、サンプルではテキスト表示されているPlay,Stop,Next,Previousといったコントロールボタンを画像化してみました。最近少し覚えた”画像置換”の手法でCSSに手を加えています。noobSlideに限ったことではありませんのでいろいろな場面で使えるかと。参考までにどうぞ。

 

サンプル 

オリジナルのサンプル2を画像サイズ480pxに、コントルールボタンを画像化。Javascript多用のため重いです

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

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