最近の記事

スポンサーサイト

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

Lightbox→Slimbox変更(画像ギャラリー対応)&設置方法

Lightboxを最新版にしたら動作がおかしくなった事などあって、Lightbox互換のSlimboxに変更しました。FC2ブログへの設置方法を、備忘録的にメモ。

Lightboxを一応解説すると、「サムネイルをクリック→同じウィンドウで拡大画像を表示する」という、あれです。下の画像をクリックしてみてください。
3年前の待機モードの長門有希 メガネかけてない長門有希
画像のグループ化や、拡大画像の下に解説を入れたりも出来るので、「イラスト系サイトでギャラリーみたいなのを作る」といった時に結構便利かと。→Lightbox2公式サイト


Lightboxがうまく動かない

古いバージョンから最新版(v2.04)にしてみたら、いろいろおかしくなってしまった。

一部画像でLightboxが全く動作しない
これは自分のミス。
Lightboxを有効にする場合、 <a rel="lightbox" href="拡大画像のURL"><img src="サムネイル画像のURL" /></a>という風に書かなきゃいけないけど、一部画像で「rel="Lightbox"」という風に、Lを大文字にしてた。
古いバージョンは大文字と小文字を区別しなかったけど、v2.04は区別するようになってたので、大文字で始めていたものが動かなくなってた。

IE7とIE8でKB927917エラーが出る
特にIE7は重症で、ページが表示されない。
927917エラーはLightboxに限らず発生しうるエラーで、JavaScriptを書く場所・内容・他のJavaScriptとの干渉などが原因です。
いろいろ回避策はあるけど、Lightbox2自体の更新がなかば止まっているようだし、Slimboxに乗り換える事に。


Slimbox(jQuery版)

2007年頃はLightbox互換スクリプトがたくさん作られてたけど、流行も一段落ついて、更新されなくなったものが多いです。
今回選んだのは、SlimboxのjQuery版。以前はmootools版だけだったけど、久しぶりに見に行ったらjQuery版が出てた。
  • Lightboxとほぼ完全に互換性があり、同じ書式で動く
  • ファイル数が少ないし、ファイルサイズも小さめ
  • FC2ブログで使う場合、ファイル編集がslimbox2.cssだけで済む(Lightboxはlightbox.jsとlightbox.cssを編集する必要がある)
  • jQueryが使える
  • 地道に更新が続いてる


FC2ブログに設置

Slimbox2公式サイトから最新版(2009/05/22時点で2.02)をダウンロードし、展開。

アップロード+slimbox2.css編集
  1. jsフォルダ内のslimbox2.jsをアップロード
  2. cssフォルダ内にある画像(closelabel.gif、loading.gif、nextlabel.gif、prevlabel.gif)をアップロード
  3. cssフォルダ内のslimbox2.cssを開き、画像パスをアップロードした画像のURLになるよう、書き換え
  4. slimbox2.cssをアップロード
slimbox2.cssの編集箇所は、loading.gif、prevlabel.gif、nextlabel.gif、closelabel.gifを指定している部分。 background: #fff url(http://blog-imgs-xx.fc2.com/e/x/a/example/loading.gif) no-repeat center;
background: transparent url(http://blog-imgs-xx.fc2.com/e/x/a/example/prevlabel.gif) no-repeat 0 15%;
background: transparent url(http://blog-imgs-xx.fc2.com/e/x/a/example/nextlabel.gif) no-repeat 100% 15%;
background: transparent url(http://blog-imgs-xx.fc2.com/e/x/a/example/closelabel.gif) no-repeat center;


FC2ブログテンプレートの書き換え
jQueryは、Google AJAX Libraries APIを利用。
jQuery公式サイトからファイルを手に入れてアップロードしてもいいけど、Google AJAX APIを使う方が簡単です。
で、テンプレートの<head></head>内に、以下みたいな感じで書く。
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
<script type="text/javascript" src="http://blog-imgs-xx.fc2.com/e/x/a/example/slimbox2.js"></script>
<link rel="stylesheet" href="http://blog-imgs-xx.fc2.com/e/x/a/example/slimbox2.css" type="text/css" media="screen" />
slimbox2.jsとslimbox2.cssのパス(緑色の部分)は、アップロードしたURLに書き換えてください。


使い方

基本書式
拡大画像へのリンク(aタグ)に、『rel="lightbox"』と書く。
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> 拡大画像の下に画像のタイトルをつけたい場合は、『title="タイトル名"』を書く。

グループ化
aタグで呼び出す画像をグループ化する事で、簡単な画像ギャラリーを作れます。
グループ化したい画像へのリンクに、『rel="lightbox-グループ名"』または『rel="lightbox[グループ名]"』と書く。
<a href="images/image-1.jpg" rel="lightbox-cats">image #1</a>
<a href="images/image-2.jpg" rel="lightbox-cats">image #2</a>
<a href="images/image-3.jpg" rel="lightbox-cats">image #3</a>

グループはいくつでも作れます。ただし、1つの画像を複数のグループに入れる事は出来ません。

『lightbox[グループ名]』はXHTMLでは不適切なので、公式サイトでは『lightbox-グループ名』を推奨してます。
本家Lightboxとの互換性にあまりこだわらないなら、『lightbox-グループ名』の方でよいかと。

スポンサーサイト
TAG :
JavaScript
Web制作
Lightbox
Slimbox
jQuery

Google Chromeダウンロード開始

1つのブログで扱うテーマはなるべく少ない方がいろいろといいので、ここはアニメや漫画で自分が興味ひかれたものについて書くブログになっていったんだけど、今回はネット全般で重要(かもしれない)なので簡単に。

» Continue Reading

TAG :
Firefox

Firefox3.0を試してみた

Firefox3.0が公開されましたね。
自分的には、2に比べてブックマークあたりが結構いい感じに。細かい部分もいろいろ手が入ってますね。

日本からは現在34万ダウンロードほどあるようです(Download Day)。

自分の場合、Firefoxをちょっと使ってみる→IEをタブブラウザ化するよりも使いやすい気がする→面白そうなアドオンがたくさんあるので少しずつ入れてみる→いつの間にかIEはあまり使わなくなり、普段使ってるのはほぼFirefoxに…という流れでした。

ただ、自分がよく使ってるアドオンの一部がまだ対応してないんですよね。3に全面的に乗り換えるのは、もう少しだけ後になりそう。
(追記:自分がよく使ってるアドオンで、3.0未対応&代替アドオンもなさそうなのがBookmark Duplicate Detectorぐらいになったので、6/23に移行しました)

自分が使っていて、Firefox3.0に対応しているっぽいアドオン

  • Abduction!……今見ているページをそのまま画像化
  • Greasemonkey……いろいろと便利
  • Popup ALT Attribute……画像のalt属性を見れる
  • Sage……フィードリーダー。ブログなど、RSSを出してるサイトの更新がわかる
  • Session Manager……タブの状態を保存して、次にFirefoxを起動した時に復元出来る
  • Update Scanner……登録したページが更新されたら知らせてくれる


未対応。または、よくわからないアドオン

(08/6/23追記:アドオンの更新確認では未対応と出ても、実際は3.0に対応しているアドオンは多数あるようです)
  • Bookmark Duplicate Detector……重複ブックマークをチェック
  • ColorZilla……今見ているページで使われている色がわかる。色の作成も出来る→対応
  • Enhanced History Manager……高機能な履歴→Firefox3はこれとほぼ同じぐらいまで履歴機能が強化
  • Web Developer……今見ているページの構造を調べたり、CSSやHTMLを一時的に修正したり出来る→対応
TAG :
firefox

WordPress2.5リリース

WordPress2.5が出ましたね。公式サイトもデザイン一新。

WordPress

Dashboard、Plugin、Settings(旧Options)、Usersは少し隅っこに。Write、Manage、Design(旧Presantation)、Commentsというよく使いそうなものが残されてます。Designは人によるだろうけど。Links(旧Blogroll)はTagと一緒にManageへ。
タグ機能、ファイル関連の機能、プラグインのアップデートが強化。

個人的にちょっと気になってたカテゴリスラッグは、やっぱり重複不可のまま。数字が付加されたり上位カテゴリスラッグを参照したりします。もう、今後は「1つのサイトに同じカテゴリスラッグは存在出来ない」という前提で考えた方が気楽ですね、多分。
TAG :
CMS
WordPress

RSSリーダーやUpdate Scannerを使っていて、問題だなと思った事

RSSリーダーや「Sage」「Update Scanner」といったFirefoxのアドオンを使ってます。更新されたブログやサイトが簡単にわかるので、すごく便利。

でも、前から気になってたけど、こういうソフトやアドオンは、動くたびに相手サイトをチェックしにいってるんですよね。そうしないと更新を判断出来ないから当然だけど。
自動で動かしつつ時おり手動で動かすので、条件次第では自分がばくぜんと思ってたよりずっとハイペース(1時間おきぐらい)でアクセスしてる形になっているっぽい。
これは…あんまりよくないような気がする。でも便利だし…どうしたもんだろう。
FC2だと訪問先の訪問者リストに影響が出てそうなので、とりあえず「ログイン状態を維持」はやめる事に。

FC2ブログもいろいろ障害が起こってるらしい

テンプレートの画像がようやく表示されるようになったと思ったら、今度は昨日から訪問者リストが全部消えてます。2ページ目~10ページ目へのリンクは残ってるけど、何も表示されない。
訪問者履歴は、手作業で削除していくと2ページ目以降のリンク自体が消えるので、履歴データ自体は残ってるけど何か問題が起こってるんでしょう。

で、フォーラムを見てみたら、少なくともblog100全体で消えてるっぽいです。別サーバではページが全部消えるようなのも起こってるようで。そういや、アップロード画像のURLが書き換わっててしかもアップロード時期によってばらばらの画像サーバになってたんだけど、それについては今のところ解消されてます。
無料レンタルでいろんな機能を使ってるわけだしあれこれ言うのもなんだけど、このまま訪問者履歴が消えたままになるのはちょっと残念。

スパム対策強化したらしい&FC2のテンプレートがおかしい

スパムコメント対策が強化されてた

機能追加及び一部表記変更のお知らせ
最近、FC2ブログが妙にコメントスパムが増えたんだけど、ようやく?CAPTCHA機能がつきました。あの、見づらい画像を入力するあれ。どんだけ効果があるかはわからないんで、とりあえず入れてみます。

テンプレがおかしい

気づいたら、FC2共有テンプレート(do_wing)の画像が全然表示されてない状態に。テンプレートの元画像がある87番サーバが不調っぽい。
しばらくすれば直るだろうけど、旧管理画面→新管理画面移行の時に画像置き場のURLが変わったから…様子見。

Movable TypeやDrupalやWordPress

  • MT4.1で追加テンプレートタグがたくさん……便利になったけど、今までのもあわせるとすごく多い。どうしたものかなあ。
  • Drupalのモジュール……6.0が出てから1週間ほど経ったけど、6.0対応のモジュールが意外?にまだ少なめ。
  • WordPress……2.4を飛ばして2.3x→2.5になるけど、個人的に微妙に気になってたカテゴリスラッグの重複の解決は、2.4→2.5→2.6へ繰り延べ。あんまりこだわりどころじゃないのかな?
BD/DVD/CD
リンク(公式サイトとか)
カテゴリ
ブログ内検索
最近のコメント
プロフィール

Author:せれすと
アニメ:涼宮ハルヒの憂鬱、ガールズ&パンツァー


トラックバックやリンクは、自由に張ってください。

<推奨ブラウザ>
◎Opera/Firefox系 ○Chrome系/Safari △IE
主に使っているのは、OperaとFirefoxです。

ブロとも申請フォーム

この人とブロともになる

RSSフィード
タグリスト

アニメ マクロスF 涼宮ハルヒの憂鬱 いとうのいぢ ななついろ★ドロップス コードギアス 宙のまにまに らき☆すた OP 視聴予定 ゲーム オリコン とある科学の超電磁砲 けいおん!! ED PS2 WORKING!! 挿入歌 ソ・ラ・ノ・ヲ・ト AngelBeats! 漫画 坂本真綾 ながされて藍蘭島 乃木坂春香の秘密 はなまる幼稚園 コミック ブログ投票 瀬戸の花嫁 とある魔術の禁書目録 アニメ作風考察 アニメ誌 化物語 true_tears ARIA ハヤテのごとく! CMS NewType サントラ ゆるゆり 涼宮ハルヒの戸惑 動画 WordPress バスカッシュ! スクールデイズ 灼眼のシャナ 黒執事 DVD マクロス けいおん! 魔法少女まどか☆マギカ 涼宮ハルヒちゃんの憂鬱 とある魔術の禁書目録II キミキス 狼と香辛料 ガンダム00 インフィニット・ストラトス 俺の妹がこんなに可愛いわけがない 侵略!?イカ娘 侵略!イカ娘 ベン・トー 相関図 ロザリオとバンパイア エヴァンゲリオン この青空に約束を たまゆら 宇宙をかける少女 かんなぎ BD ブログ フィギュア 神曲奏界ポリフォニカ シゴフミ ストライクウィッチーズ 逆境無頼カイジ コミックス 鉄腕バーディー もってけ!セーラーふく セキレイ MODx 黒神 さよなら絶望先生 Firefox ユニゾンシフト PSP WORKING´!! Little_Lovers_2nd YouTube みつどもえ sola ポリフォニカ クレイモア Drupal ヱヴァンゲリヲン ライトノベル 京アニ ゼロの使い魔 侵略!イカ娘 DS ベルセルク もってけ!セーラーふく スケッチブック ロロナのアトリエ カイジ 長門有希 CD 君が主で執事が俺で しゅごキャラ! ねんどろいど 破天荒遊戯 電撃文庫 涼宮ハルヒ ニュース 声優 坂井泉水 バイク 撲殺天使ドクロちゃん ユーチューブ どきどき魔女神判 歌詞 字幕.in 字幕 地球へ 絶対可憐チルドレン 小岩井フローラ ご愁傷さま二ノ宮くん ef プリズム・アーク レンタルマギカ ブルードロップ バンブーブレード 京都アニメーション スカイガールズ 色彩 こどものじかん ドラゴノーツ RD潜脳調査室 水樹奈々 生徒会の一存  聖地 Google日本語入力 Newtype バカとテストと召喚獣 ゴンゾ 科学 Lightbox Web制作 JavaScript Slimbox jQuery 青い花 ヒャッコ 聖地巡礼 オオカミさんと七人の仲間たち フラクタル お兄ちゃんのことなんかぜんぜん好きじゃないんだから 夢喰いメリー 日記 ロウきゅーぶ! 神様ドォルズ 森田さんは無口 ヨスガノソラ ミルキィホームズ アマガミSS 祝福のカンパネラ 学園黙示録 あそびにいくヨ! 神のみぞ知るセカイ 生徒会役員共 けいおん Opera PV PC Movable_Type 僕は友達が少ない カドゥン firefox ロボテック H2O FC2ブログ ゴルゴ13 windows_xp ブログ検索 ダ・カーポII 灼眼のシャナII DokuWiki CLANNAD ヴィンランド・サガ 薬師寺涼子 まりあ†ほりっく ホワイトアルバム アルバム 明日のよいち! アニソン RIDEBACK ラノベ 同人誌 鉄のラインバレル アニメディア スレイヤーズ アニメージュ イラスト とらドラ! ジブリ インターネット 

BD/DVD
Twitter
今やっていること
メールフォーム

名前:
メール:
件名:
本文:

2007-04-11頃から
月別アーカイブ
このページのトップへ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。