猫とMacの日々
Tag : FancyZoom
07
数年前からでしょうか、サムネイルをクリックするとそのままのページで画像が浮いたように拡大するエフェクトをブログでよく見かけるようになりました。
それを行うエンジンを Lightbox系スクリプトといい下記リンクによると36種類上もあるんだそうです。
◯THE HAM MEDIA BLOGより「イメージのLightbox系スクリプトのまとめ」
やっぱりApple系ブログのみなさんもしっかり使っておられます。
ダンボさんの「Macお宝鑑定団Blog(羅針盤)」では PrettyPhotoを、
wakabaさんの「わかばマークのMacの備忘録」では Lytebox を、
立花岳志さんの 「No Second Life」では Simple Lightboxを。
この私もヘタレながら FancyZoom というのを使っていたんですが Twitterなどを機能的にリンクしてくれる zenback と干渉しちゃうんですよ。
干渉の回避はできるそうですが何やら呪文のようなスクリプトを変更しなければなりません。そんなスキルが猫の頭の私にあるはずもなく FancyZoom を泣く泣く外すことになりました。 なんだかんだ言っても zenback は便利だもんね。
もちろん FancyZoom と zenback を共存させて使っておられる Apple系ブログもあります。
くじゃくさんの「リンゴが好きでぃす♪」 や veadarさんの「Macの手書き説明書」、ジェットさんの「MacBookの小部屋」 などです。
ホントすごいなぁ～憧れます。爪の垢を送ってください！
それでも、FancyZoom を諦めても画像拡大エフェクトしたい思いはどんどん拡大し、「違うスクリプトならうまくいくかも？」と淡い期待をそれに賭けることにしました。
FC2ブログでどんな Lightbox系スクリプトが人気かなぁ～とぐぐってみたら、派生の Lightbox 2 をみなさん使われていることがわかりました。
◯oyoyo Memo Blog より「2011/3/18/ にリリースされた Lightbox 2.05 を試用してみる 」
◯京都THUG LIFEより「高瀬川＋小雨＝Lightbox 2.05 京都・木屋町通 」
調べると Lightbox 2 は最近2.05にバージョンアップしてIE9対応になったそうです。こりゃ好都合ですね。
Lightbox 2.05の導入方法は下記リンクを見てその通りやればばっちりでした。
◯覚書 - My Knowledge Base - FC2ブログ版より 「FC2ブログで「Lightbox 2」を導入する方法」
導入方法をざっくり書くと以下の通りです。（詳細は上記リンクで見てね）
１）Lightbox v2.05.zipをダウンロードして解凍する。
２）解凍した中身から「lightbox.js」「lightbox.css」「image-1.jpg」「thumb-1.jpg」の4つ以外をFC2ブログにアップロードする。
３）アップロード後にアップロードされたURLを必ずメモする。
４）「lightbox.js」をテキストエディタで開き「closelabel.gif」「loading.gif」のURLをメモしたのに変更し上書き保存する。
５）「lightbox.css」をテキストエディタで開き「nextlabel.gif」「prevlabel.gif」のURLをメモしたのに変更し上書き保存する。
６）上書き保存した「lightbox.js」と「lightbox.css」を他のファイルを同様にアップロードする。
７）アップロード後にアップロードされたURLを必ずメモする。
これでアップロードは完了です。
次にお使いのFCブログのテンプレートの変更をします。
テンプレートの＜head＞ ～ ＜/head＞の間に以下の行を追加してテンプレートを更新して保存する。
もちろん「アップロード先」とあるところは書き換えてくださいね。
そしていつものようにブログを書いて写真を貼ったら
拡大したい画像のリンクタグに「rel="lightbox"」を追加すると準備万端となります。
テストしてみましょう。
前回の記事で紹介しました愛猫メロンのいたずらを写した４コマ写真です。
猫軍団の hosomichiさんが MacBook Pro 17インチ買ってすぐお披露目に来てくださった時のことです。
メロンはマジックトラックパッドに大変興味を持ちまして…こっそり…
なんかうまくいきましたね？ メロンはマジックトラックパッドをゲットする前に捕まりましたけど（笑）
現在私の環境では Lightbox v2.05は zenbackと干渉もなくうまく動いております。
めでたしめでたし。
それを行うエンジンを Lightbox系スクリプトといい下記リンクによると36種類上もあるんだそうです。
◯THE HAM MEDIA BLOGより「イメージのLightbox系スクリプトのまとめ」
やっぱりApple系ブログのみなさんもしっかり使っておられます。
ダンボさんの「Macお宝鑑定団Blog(羅針盤)」では PrettyPhotoを、
wakabaさんの「わかばマークのMacの備忘録」では Lytebox を、
立花岳志さんの 「No Second Life」では Simple Lightboxを。
この私もヘタレながら FancyZoom というのを使っていたんですが Twitterなどを機能的にリンクしてくれる zenback と干渉しちゃうんですよ。
干渉の回避はできるそうですが何やら呪文のようなスクリプトを変更しなければなりません。そんなスキルが猫の頭の私にあるはずもなく FancyZoom を泣く泣く外すことになりました。 なんだかんだ言っても zenback は便利だもんね。
もちろん FancyZoom と zenback を共存させて使っておられる Apple系ブログもあります。
くじゃくさんの「リンゴが好きでぃす♪」 や veadarさんの「Macの手書き説明書」、ジェットさんの「MacBookの小部屋」 などです。
ホントすごいなぁ～憧れます。爪の垢を送ってください！
それでも、FancyZoom を諦めても画像拡大エフェクトしたい思いはどんどん拡大し、「違うスクリプトならうまくいくかも？」と淡い期待をそれに賭けることにしました。
FC2ブログでどんな Lightbox系スクリプトが人気かなぁ～とぐぐってみたら、派生の Lightbox 2 をみなさん使われていることがわかりました。
◯oyoyo Memo Blog より「2011/3/18/ にリリースされた Lightbox 2.05 を試用してみる 」
◯京都THUG LIFEより「高瀬川＋小雨＝Lightbox 2.05 京都・木屋町通 」
調べると Lightbox 2 は最近2.05にバージョンアップしてIE9対応になったそうです。こりゃ好都合ですね。
Lightbox 2.05の導入方法は下記リンクを見てその通りやればばっちりでした。
◯覚書 - My Knowledge Base - FC2ブログ版より 「FC2ブログで「Lightbox 2」を導入する方法」
導入方法をざっくり書くと以下の通りです。（詳細は上記リンクで見てね）
１）Lightbox v2.05.zipをダウンロードして解凍する。
２）解凍した中身から「lightbox.js」「lightbox.css」「image-1.jpg」「thumb-1.jpg」の4つ以外をFC2ブログにアップロードする。
３）アップロード後にアップロードされたURLを必ずメモする。
４）「lightbox.js」をテキストエディタで開き「closelabel.gif」「loading.gif」のURLをメモしたのに変更し上書き保存する。
５）「lightbox.css」をテキストエディタで開き「nextlabel.gif」「prevlabel.gif」のURLをメモしたのに変更し上書き保存する。
６）上書き保存した「lightbox.js」と「lightbox.css」を他のファイルを同様にアップロードする。
７）アップロード後にアップロードされたURLを必ずメモする。
これでアップロードは完了です。
次にお使いのFCブログのテンプレートの変更をします。
テンプレートの＜head＞ ～ ＜/head＞の間に以下の行を追加してテンプレートを更新して保存する。
もちろん「アップロード先」とあるところは書き換えてくださいね。
そしていつものようにブログを書いて写真を貼ったら
拡大したい画像のリンクタグに「rel="lightbox"」を追加すると準備万端となります。
テストしてみましょう。
前回の記事で紹介しました愛猫メロンのいたずらを写した４コマ写真です。
猫軍団の hosomichiさんが MacBook Pro 17インチ買ってすぐお披露目に来てくださった時のことです。
メロンはマジックトラックパッドに大変興味を持ちまして…こっそり…
なんかうまくいきましたね？ メロンはマジックトラックパッドをゲットする前に捕まりましたけど（笑）
現在私の環境では Lightbox v2.05は zenbackと干渉もなくうまく動いております。
めでたしめでたし。
RSSリーダーで読んでね
