最近の記事
(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"+村上スクリプト
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年06月21日

Webサイト/ブログのCSSを直感的に理解できるFireFoxアドオン 〜 EditCSS この記事をはてなブックマークする |

Evernoteにクリップする

 クールなWebサイトやブログを見かけたとき、Webブラウザでそのサイトのソースを表示してみたり、FireFoxならスタイルシートを使う/使わないを切り替えて表示させてみることでスタイルシート(以下CSS)の使い方を勉強することができます。しかし、CSSを見たからといって、どこがサイトのどの部分を指定しているかはなかなかわかりません。

 また、無料のブログを使っている場合もそうなのですが、無料ブログのカスタマイズで難しいのは、デザインを変更したいと思っても、もともとCSSの書かれたテンプレートは運営会社の方で用意したものを使っているだけなので、自分ではどのように変更したら良いかがなかなかわからないといったことがあります。 

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

記事の中でHTMLタグを表示したい この記事をはてなブックマークする |

Evernoteにクリップする

 カスタマイズに関するブログやサイトでは、記事の中でHTMLやCSSのタグを表示させて説明しているのですが、記事の中で普通にHTMLタグを使ってしまうとタグが反映されてしまって文字としてうまく表示されません。

 例えば <font color=red>テスト</font>  と記事にHTMLタグそのまま書くと、実際にはテストとHTMLが解釈されて表示されてしまいます。

 このため、<> といったタグの括弧部分を全角の に直してタグとして解釈されないような形で記事としてアップし、実際に使用する場合は半角に直してくださいとの注意書きを付しているブログ、サイトがあるのですが、それだと書かれている記事のHTMLタグをそのままコピペして使えず不便です。

posted by 飛梅 at 20:29 | Comment(0) | TrackBack(0) | カスタマイズ(Seesaaブログ) | このブログの読者になる | 更新情報をチェックする

パンくずリストをつける この記事をはてなブックマークする |

Evernoteにクリップする

 ブログ訪問者に対して、いま自分がいる階層を知らせ、訪問者の道しるべとなる”パンくずリスト”をつけてみました。

 この記事の上に Top>Seesaaカスタマイズ>パンくずリストをつける となっている部分がそうです。

HTMLとCSSへの追加が必要になりますが、追加HTMLは翔泳社発刊の「無料ブログSEOバイブル」から、CSSはInqsite Blogさんの記事を参考にしました。パンくずリストはユーザビリティ向上以外にも、ブログの内部リンクを強化することになるのでSEO対策としても有効な方法といわれています。

posted by 飛梅 at 19:04 | Comment(0) | TrackBack(0) | カスタマイズ(Seesaaブログ) | このブログの読者になる | 更新情報をチェックする
2008年06月12日

Slimbox / Lightbox のキャプションにリンクを貼るには この記事をはてなブックマークする |

Evernoteにクリップする

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

 Slimbox / Lightboxで画像を拡大表示させたあと、関連サイトにジャンプさせたいと思って、キャプションにリンクを貼る方法を調べてみたら、ONE DIGITAL LIFEの記事で回答を見つました。

title="キャプション (<a target="_blank" href="リンク先URL ">aアンカーテキスト </a>)"  

と記述すれば良いようです。

iPhone.jpg実際に試してみてちゃんと動作するのを確認できました。 これ、特にSlimboxやLightboxに限った使い方ではなく、HTMLでTITLE要素の中にリンクを埋め込む記述方法だとわかれば、いろいろ応用もできます。

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

slimbox1.52 reflection1.3 バージョンアップへ対応 この記事をはてなブックマークする |

Evernoteにクリップする

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

 slimbox, Reflection のバージョンアップに伴い、管理中のブログを更新しました。

slimboxは1.52、Reflectionは1.3に入替。slimboxはmootools1.2に対応したバージョン1.63が出ていますが、slimbox以外のツールでmootools1.2での動作確認を行っていないので、mootoolsは1.1のまま据置きました。

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

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