Twitter関連のモノでやろうやろうと思いつつ放置していたアイコンの設置を行いました。新たに加えたアイコンとしては上記画像にあるブログヘッダ部分への「Follow me ！」なモノと、表示中のエントリURLをTwitterに投稿する際のモノ。

エントリURLをTwitterに投稿する為のアイコンはエントリ下部に上記画像のような感じにて。コレらのアイコンはTwitterを利用しているカタにしか意味ないかもですが、見た通り可愛らしいアイコンがあったので、コレがあるだけでも雰囲気変わって良いかな、っと(^^;

エントリURLをTwitterへつぶやくタメのリンク設置方法

表示中なエントリのURLをTwitterへつぶやくタメのリンクを作る際に設定するURL（リンク先）ですが、

っと言った感じなので、「ホニャララ」の部分に表示中のエントリURLを入れてやれば良い訳であります。

ワードプレスでのリンク設定

ワードプレスで表示中のエントリURLをTwitterでつぶやくタメのリンクの設定方法は、

<a href="http://twitter.com/home?status=<?php the_permalink() ?>">
<img src="画像のurl" width="画像横サイズ" height="画像縦サイズ" alt="お好みのテキストを記入" title="お好みのテキストを記入" /></a>

っと言った感じになります。尚、画像をテーマのディレクトリに入れておき、画像URLの部分を
src=”＜?php bloginfo(’stylesheet_directory’); ?＞/（画像用ディレクトリ）/画像ファイル名”
としてやるとテーマ変更の際に便利かもしれません（↑の<>は全角になってますが、本来は半角）。

FC2ブログでのリンク設定

FC2ブログで同様のリンクを設置する場合は、下記のような感じで記入すればOKです。

<a href="http://twitter.com/home?status=<%topentry_link ?>">
<img src="画像のurl" width="画像横サイズ" height="画像縦サイズ" alt="お好みのテキストを記入" title="お好みのテキストを記入" /></a>

MT（ムーバブルタイプ）の場合

MTの場合は・・・、そう言えば以前にRanさんがやっておられましたので下記リンク先をご覧下さいませ。っと言うか、コチラのエントリをみてコレ真似しんといかん！ っと思ったのでありました(^^;

・Twitter へのエントリーURLコピーボタンを設置 『超おむすび』
関連エントリ:

• とある素敵な機械の動画
• TwitterのY2K風な問題「Twitpocalypse」
• wp-kougabuでフォト アーカイブのページを作成
• RE-11にまつわるアレコレ
• 新しい・・・【リンク更新】
• コメント時の動作一部変更【ポリシー更新】・メールフォーム一部変更
• 送信ボタンを求めてTwitkitを試す
• NONBYさん動画、近々新作を公開［追記］
• 全タイトルを一気に見る【ページ追加】
• 緑茶フレーバー入りな『コカ・コーラ プラス カテキン』飲んでみた
• リンクを辿る楽しみ
• 3度目の正直：Twitter Gadget for Gmailに辿り着く

IE（インターネットエクスプローラー）以外のブラウザをご利用のカタは気付かれたかと思いますが、少し以前にRoute315なファビコン（ブックマークとかアドレスバーのトコロに表示される小さな画像）を設定してみました。

今回ファビコンを設定したのは特に理由などなく、たまたまファビコンジェネレーターなサイトに辿り着いて、ポチポチと遊んでいたら何となくソレっぽいモノが出来たので、なら折角なので使おうかと、そんなトコロで御座います。

IEでファビコンが表示されない

そんな訳で上記サイトにて作ったファビコンをアップロードし、普段使用しているファイアーフォックスにてブックマーク及びアドレスバーに表示されて喜んだまでは良いのですが、IEで確認したら表示されておらず・・・・・orz

またお前か、IEぃぃぃ！
何時も通り、自分の無知はベットの下辺りに隠しつつ・・・

そんなコンナで調べてみたら、IEの場合はファビコンをサーバーのルートディレクトリ（階層の最上層となるディレクトリ）に置かなければ表示されない、なんてコトを書いてあるのを見かけ、FC2ブログの場合はご存知の通り、後からアップロードする様々なファイルはページ本体とは別のイメージサーバーにアップロードされるので、っと言ったコトやら、設置しようと思った理由自体大したモノではなかったので、まぁいいかと暫く放置しておりました。

IEでファアビコンを表示させるにはWindows icon形式にしなければならない

が、「IEの場合はファビコンをサーバーのルートディレクトリ（階層の最上層となるディレクトリ）に置かなければ表示されない」っと言うの、実は誤りだったみたいで、ファビコンのファイル形式が「Windows icon形式」になっていなかったのがIEで表示されない原因だったようです。そんな訳でコチラのページを参考に、@icon変換と言うソフトを使って単なるicoからWindows icon形式のファイルに変換して再度アップロードしたトコロ、エントリ冒頭に挙げた画像の通り、IEのブックマーク部分、アドレスバー部分共にファビコンが表示されるようになりました。
※IEなカタで表示されてないよ、っと言う場合は、更新して頂くか、それでもダメなら「Ctrl＋F5キー」にて完全更新をお試し下さいませ。

ファビコンは元々IE独自の機能

トコロで先ほど自分の無知さを棚に上げつつIEクンを罵倒してしまった訳ですが、ことファビコンに関して言えば、コレは元々IEのブックマーク（お気に入り）機能のタメにマイクロソフトが独自に実装した機能だそうで、そのため上記のようなコトになっているようです。またIEがなんでファビコンのような機能を備えたかと言う点についても参考までに書いておくと、ブックマークに登録してソコにファビコンが表示される＝ファビコンへアクセスする訳ですから、ソレによってブックマークに登録されている数を知るコトが出来たのですね（ただし、今はIEもアクセスしただけでファビコンを読み込むようになっているので、ブックマーク数を把握出来ると言う当初の目的は失われています。IE以外のブラウザ使ってる人も増えてきてますし）。

関連ぽいエントリ

・Windows XPがexFAT対応 【SDXCカードも利用可能】
・YoutubeのHD動画をブログ等に貼り付けるタメのブックマークレット
・「押下」って何よ？
・IE6にだけ別のCSSを読ませる方法
・FC2ブログにちょっとカッコいいフォトギャラリーを作ってみる【Galleria・Lightbox】

関連エントリ:

• ブックマークの登録数
• Windows XPがexFAT対応 【SDXCカードも利用可能】
• 送信ボタンを求めてTwitkitを試す
• Twitter Weekly Updates for 2010-10-30
• FirefoxのSQLite データベースをVacuum・Reindexして最適化してみた
• YoutubeのHD動画をブログ等に貼り付けるタメのブックマークレット
• Chrome君で一部文字化けの巻
• tweetreeはReplyのツリー表示以外に、リンク先を表示するのが便利
• IE6にだけ別のCSSを読ませる方法
• Webサイトの横幅とディスプレイ
• ワードプレス2.8.3日本語版にアップグレード
• ワードプレス2.8.4にアップグレード【セキュリティリリース】

FC2ブログのファイルアップロード時にサムネイル作成して貼り付ければフォトギャラリーは作れるけど

FC2ブログに写真や画像データをアップロードする際、同時にサムネイルを作成し、ソレをエントリ内に並べれて貼り付ければ手軽にフォトギャラリーとして成り立ちはしますが、それだと写真が大量にある場合、

　サムネイルクリック→
　→拡大した写真表示（同ウィンドウorウィンドウポップアップ）→
　→別の写真を見る為に：ブラウザの戻るボタンクリックor新たに開いたウィンドウを閉じる→
　→別の写真のサムネイルをクリック→繰り返し・・・

っと言ったように全ての写真を見るのがチョット面倒くさいように感じます。

サムネイルによるフォトギャラリーの例

サムネイルによるフォトギャラリーの具体的な例は下記のようなモノです。

　・通常のサムネイルによるフォトギャラリーのデモ

大きな写真をそのまま並べたフォトギャラリーの例

逆にサムネイル（小さな画像）は使わずに大きな画像をそのままエントリ内（等）に表示させるフォトギャラリーであれば見る側はページをスクロールするだけで済みますが、そのページのデザインとかレイアウトによって表示できる画像の最大サイズが決まってしまうし、付随して画像だけ新規ページor新規ウィンドウで表示させるのに比べ表示可能なサイズに対する制約も伴うように感じます。具体的な例としては下記のようなモノです。

　・通常の画像を並べただけのフォトギャラリーのデモ

スクリプトとCSSでちょっとカッコよくしたフォトギャラリーの例

そんな訳でと言うか、上記の問題を（ちょっと）クリアしつつ、尚且つちょっとカッコよくしたフォトギャラリーの例を挙げてみますと下記のようなモノです。

　・Galleriaによるフォトギャラリーのデモ
　・Lightboxによるフォトギャラリーのデモ

上記2つはドチラもスクリプトとCSS（っとhtml）の組み合わせによって出来ているので、CGIによるフォトギャラリーなどとは違いFC2ブログでも使えるのが嬉しいトコロで御座います。

Galleriaは大きな写真をブログエントリにそのまま貼り付けた場合と比べ、写真の大きさが変わらないように思われるかもしれませんが、今回作ったデモページのレイアウトをブログエントリと同じにしてしまっているためであって（なのでブログエントリ投稿によって作られるページではありません。URL参照）、フォトギャラリー専用のレイアウトにすればもっと大きな写真を表示させるコトが可能です。ブログエントリ内でも利用可能ですが、その場合、大きさの面でメリットはありませんが、大きい写真をそのまま並べて貼り付けただけのエントリよりもスッキリして見栄えが良くなるのがメリットだと思います。

対してLightboxは実際にデモページをご覧になり、サムネイルをクリックして大きな写真を表示させて頂ければわかりますが、基本的にページレイアウトの影響を受けないトコロや、大きな写真が表示される際の動作のカッコよさがポイント高いのではないでしょうか？　またLightboxは複数の画像が無い場合、例えばブログエントリ内に表示させている写真のサムネイルを拡大表示させる際にも使うコトが出来ます。

そんな訳で、ココからはGalleriaとLightboxをFC2ブログに設置する方法を紹介していきます。
　・GalleriaをFC2ブログに設置する方法
　・LightboxをFC2ブログに設置する方法

GalleriaをFC2ブログに設置する方法

FC2ブログへGalleriaを設置する方法の大まかな流れを書くと、

　・Galleriaの設置に必要なファイルのダウンロード
　・Galleriaスクリプトファイルのアップロード
　・CSSファイルのアップロード（もしくはテンプレート編集でのCSS編集）　
　・テンプレートのhtml編集（エントリ内で使う場合）
　・htmlファイルの作成（エントリとは別途フォトギャラリーページを作りたい場合のみ）

っと言った感じで、スクリプト等をダウンロードしてきて、ソレをFC2ブログのファイルアップロード機能でアップロードすると共に、テンプレートのhtmlやCSSの編集を行います。

jQuery（ジェイ・クエリー）のダウンロード

Galleriaを使うにはjQuery（ジェイ・クエリー）と言うJavaScriptライブラリが必要となりますので、まず最新のjQueryをダウンロードします。

　・jQueryのダウンロードページ

上記リンクからjQueryのダウンロードページにアクセスし、「Current Release」と言う欄までスクロールします。Current Releaseが最新版ですから、そこにあるMinified（圧縮版：jquery-1.X.X.min.js）をダウンロードします。他にPacked（圧縮版：jquery-1.X.X.pack.js）と、Uncompressed（圧縮無し版：jquery-1.X.X.js）がありますが、動作速度やファイルサイズ等の面からMinifiedが良いようです。
※08年12月23日現在、jquery-1.2.6が最新

Galleriaのダウンロード

続いてjQueryのプラグインであるGalleriaをダウンロードします。

　・Galleriaのダウンロードページ

上記リンクからGalleriaのダウンロードページにアクセスし、ページ中央カラムの「Download」からGalleria 1.0（jquery.galleria.js）をダウンロードします。（今回は圧縮していないモノを使っていますが、jQuery同様圧縮してあるMinified版が良いかもしれません）。

jQueryとGalleriaのアップロード

jQueryとGalleriaをダウンロード出来たらFC2ブログへアップロードするためにファイル名をリネームします。ダウンロードしたファイルはそれぞれ、

　・jquery-1.X.X.min.js
　・jquery.galleria.js

っとなっていると思いますが、FC2ブログはファイル名の拡張子（ココではjs）直前以外のトコロに「.（ピリオド）」が含まれているとアップロードできませんから、

　・jquery-1XX_min.js
　・jquery_galleria.js

等のように、ピリオドの無いファイル名にリネームしてからアップロードします。

CSSファイルの準備

Galleriaのデザイン等はCSSによって行われていますから、CSSの用意を行います。CSSについてはFC2ブログの「テンプレートの設定」画面にてGalleria用の記述をCSSに加える方法と、別途CSSファイルを用意してアップロードする方法がありますが、今回は別ファイルでの方法を採りました。

Galleria用のCSSは「jquery_galleria.js」のダウンロードページにも用意されていますが、そのままではあまり使えませんので、今回はGalleriaのデモページを参考にした下記のようなCSSを使用しています。

　・Route315-GalleriaデモページのCSS
　 （今回のCSSファイル名はgalleria2.css）

Galleriaのデモページから若干変更したのが画像表示位置に関する部分で、例えば写真のサイズが横1000×縦600っと言うような横長サイズだけ、もしくは反対に縦長サイズだけ表示させている分には問題無いのですが、両方が含まれる場合、それぞれの画像表示位置が上揃えになってしまいます。大きな画像の表示領域は縦サイズを縦長写真に合わせなければなりませんが、そうすると横長写真を表示した際、写真とサムネイルの間に無駄なスペースが空いてしまいますので、コレを何とか中央揃え的な表示に出来ないかと思いコチラを参考に少し修正しました。

具体的に表示されたモノを挙げると下記のような感じになります。

GalleriaデモページをFierfox3.0.5で表示

上記画像のように、画像上下方向の中心位置が揃っている、コンナ状態が意図したトコロです。

が、ファイアーフォックスとかグーグルChromeとか、その他幾つかのブラウザでは上記の通りになりましたが、

GalleriaデモページをIE6で表示

IE6で表示させるとご覧の通り・・・もぉ激しくorz
と言うか、またIE（インターネットエクスプローラー）さんですか。そうですか、そうですか・・・って感じで御座います。因みにIEは5.5も6も7も8も上記のような感じでありまして、ついうっかりアンインストールしたい衝動に駆られます（笑）

中央揃えの参考にしたページにはIEに対応する方法も書いてありますが、スクリプトが表示させる画像には巧いコト行かないようでして・・・。何か良い方法をご存知の方は教えて下さいまし（＾ ＾；　　そんな訳もありまして、Galleriaに関しては画像の縦サイズを揃えた方が見栄えがよいかもしれません。

画像へのエフェクトを追加

Galleriaデモページのようにするには、画像が入れ替わる際のフェードイン・アウト、大きな写真が表示されているサムネイルをハイライトするエフェクトや、ブラウザの戻る・進むボタンが有効となるように履歴が残るように出来るスクリプトを追加する必要があります。今回使ったスクリプトはCSSと同じくGalleriaデモページのモノとほとんど同じ内容です。Galleriaデモページではhtmlファイルに直接スクリプトを書き込んでいますが、外部ファイルにしてアップしておけばブログなどでは便利かと思います。

　・Route315-Galleriaデモページのエフェクト
　 （今回使用したエフェクトのファイル名はgalleria_kouka.js）

他のスクリプトやCSSファイル同様、このエフェクトもアップロードします。

テンプレートhtmlの編集

Galleriaを使うのに必要なファイルをアップロードしたら、テンプレートのhtmlを編集します。その前に、コレまでに用意したモノを確認しておくと、

　・jquery-1XX_min.js
　・jquery_galleria.js
　・galleria2.css
　・galleria_kouka.js

以上の4つになります。
これらのスクリプトやCSSファイルにアクセスするよう、テンプレートhtml部分の

<head>～</head>

の中（</head>の上辺り）に下記のように記述します。

<head>
　・
　・
（略）
　・
　・
<link href="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/galleria2.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/jquery-1XX_min.js"></script>
<script type="text/javascript" src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/jquery_galleria.js"></script>
<script type="text/javascript" src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/galleria_kouka.js"></script>
　・
　・
（略）
　・
　・
</head>

FC2ブログにファイルをアップロードした際、今現在（08年12月23日）では、

http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/ファイル名

となりますので、各々アップロードしたファイルのURLを記述します。「blog-imgs-◆◆」の部分は数字が入りますがアップロードするタイミング等で入る数字が変わってくるかと思いますので、アップロード後に確認して下さい。「fc2.com/」以降の「★/●/▲/★●▲■■/」の部分は「★●▲■■」がブログIDで、その手前の「★/●/▲/」はブログIDの先頭3文字になっています。

ブログIDはURLにも含まれており、オイラが使っているFC2ブログの場合はURLが、

http://r315.blog26.fc2.com

なので、アップロードしたファイルは下記のようになります。

http://blog-imgs-◆◆.fc2.com/r/3/1/r315/ファイル名

Galleriaを使う際の画像タグ記述方法

Galleriaを使う際の画像タグ記述方法は下記の通りで、リストタグを用いる他、title属性の内容が大きな画像の下に表示されるキャプションとなります。上記CSSに合わせた場合の画像タグ等の記述は下記のようになります。2番目の画像に対するリストタグのクラスが「active」となっていますが、コレによって画像表示領域（大きな画像）に初めに表示する写真を指定出来ます。

<div class="demo">
<div id="main_image"> </div>
<ul class="gallery_demo">
<li><img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○.jpg" title="ホゲホゲな写真" alt="Image01"></li>
<li class="active"><img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○.jpg" title="ホゲホゲのクルマ" alt="Image02"></li>
　・
　・
　・
<li><img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○.jpg" title="クルマのエンジン" alt="Image06"></li>
<li><img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○.jpg" title="ホゲホゲなクルマのオーナー" alt="Image07"></li>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
&lt/div>

LightboxをFC2ブログに設置する方法

続きましてLightboxです。FC2ブログへ設置する方法の大まかな流れは下記のようになります。

　・Lightboxの設置に必要なファイルのダウンロード
　・ダウンロードしたファイルをFC2ブログの環境に合わせるタメの修正
　・Lightboxの設置に必要なファイルのアップロード
　・テンプレートのhtml編集（エントリ内で使う場合）
　・htmlファイルの作成（エントリとは別途フォトギャラリーページを作りたい場合のみ）

LightboxをFC2ブログに設置する方法についてはコチラのブログを参考にさせて頂きましたが、LightboxのバージョンアップやらFC2ブログのイメージサーバーの変更などが重なり、若干内容に違いがあるようです。

Lightboxのダウンロード

LightboxはスクリプトやCSS、使用するアイコン等の画像が全てセットになったZIPファイルをダウンロードするだけなので、必要なモノの入手作業は非常に楽です（＾ ＾）

　・Lightboxのダウンロードページ

上記リンクからLightboxのダウンロードページにアクセスし、「Download」と言う文字の下にあるリンクをクリックして最新のLightbox（lightbox2.XX.zip）をダウンロードします。
※08年12月23日現在、Lightbox2.04が最新

ダウンロードしたzipファイルを解凍すると、

　　■lightbox2.04（フォルダ）
　　　　　|
　　　　　L＿・index.html（使用しない）
　　　　　|
　　　　　L＿ ・css（フォルダ）
　　　　　|　　　　|
　　　　　|　　　　L＿lightbox.css
　　　　　|
　　　　　|
　　　　　L＿ ・images（フォルダ）
　　　　　|　　　　|
　　　　　|　　　　L＿画像複数
　　　　　|
　　　　　L＿ ・js（フォルダ）
　　　　　　　　　|
　　　　　　　　　L＿builder.js
　　　　　　　　　|
　　　　　　　　　L＿effects.js
　　　　　　　　　|
　　　　　　　　　L＿lightbox.js
　　　　　　　　　|
　　　　　　　　　L＿prototype.js
　　　　　　　　　|
　　　　　　　　　L＿scriptaculous.js

「lightbox2.04」フォルダ以下、上記のようになっています。その中で修正が必要なファイルは赤字で示した「lightbox.css」と「lightbox.js」になります。

lightbox.cssの修正

lightbox.cssを開き、下記の2ヶ所をFC2ブログのファイルアップロード後のURLに合うように修正します。

変更前
#prevLink:hover, #prevLink:visited:hover { background: url(../images/nextlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

赤字の部分を下記のように変更します。

変更後
#prevLink:hover, #prevLink:visited:hover { background: url(http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/nextlabel.gif) right 15% no-repeat; }

lightbox.js

続いて「lightbox.js」の修正を行います。

変更前
//
//  Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage:        'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

赤字部分を下記のように変更します（コレは参考にさせて頂いたページと同じです）

変更後
//
//  Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage:        'http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/loading.gif',
fileBottomNavCloseImage: 'http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/closelabel.gif',
overlayOpacity: 0.8,   // controls transparency of shadow overlay

Lightboxに使用するファイルのアップロード

上記のように「lightbox.css」と「lightbox.js」を修正したら、「lightbox2.04」フォルダの中にある全てのファイル（index.html以外）をFC2ブログにアップロードします（画像は全て使わなかもですが）。

テンプレートhtmlの編集

アップロードしたスクリプトやCSSにアクセスできるように、テンプレートのhtmlを編集し、

<head>～</head>

の中（</head>の上辺り）に下記のように記述します。

<head>
　・
　・
（略）
　・
　・
<link rel="stylesheet" href="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/lightbox.css" type="text/css" media="screen">
<script type="text/javascript" src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/prototype.js"></script>
<script type="text/javascript" src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/lightbox.js"></script>
　・
　・
（略）
　・
　・
</head>

Lightboxを使う際の画像タグ記述方法

Lightboxを使う際の画像タグ記述方法は下記の通りで、URLの部分以外は先に挙げた「参考にしたページ」に記載されている通りの内容です。

<a href="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-1.jpg" rel="lightbox[○○]" title="DELL Inspiron530-青く輝く電源スイッチ">
<img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-1s.jpg" width="75" height="56" alt="ホゲホゲの写真1"></a>
<a href="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-2.jpg" rel="lightbox[○○]" title="DELL Inspiron530-光学ドライブスペース">
<img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-2s.jpg" width="75" height="56" alt="ホゲホゲの写真2"></a>
<a href="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-3.jpg" rel="lightbox[○○]" title="DELL Inspiron530-ロゴ">
<img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-3s.jpg" width="75" height="56" alt="ホゲホゲの写真3"></a>
　・
　・
　・
<a href="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-9.jpg" rel="lightbox[○○]" title="DELL Inspiron530-青く光る吸気ダクト内部2">
<img src="http://blog-imgs-◆◆.fc2.com/★/●/▲/★●▲■■/○○-9s.jpg" width="75" height="56" alt="ホゲホゲの写真9"></a>

ポイントとして複数の画像を使用して連続して表示させる場合は、

　・画像ファイルは半角英数字とする
　・ファイル名の最後に連番を振る
　・rel=”lightbox[○○]の○○は画像ファイル名（連番は無し）を記入

っと言った辺りになる他、title属性の部分に記入した内容が写真拡大時に表示されます。またLightboxは、ブログエントリ等で画像を使う場合など、ファイル名に連番を振らないで利用すればページが変わることなくサムネイル画像を拡大表示させると言った使い方も可能です。

FC2ブログで新規にページを作成してフォトギャラリーを作る

今回、Galleriaによるフォトギャラリーのデモ、Lightboxによるフォトギャラリーのデモともに、htmlファイルを作成してフォトギャラリーページを作ってあります。GalleriaもLightboxもブログエントリ内での使用が可能な事はこれまでの説明の通り可能であり、特にLightboxについては通常のブログエントリの写真表示に有用となりますが、そのような利用方法の場合、多少の問題があります。

他のスクリプトとの干渉に注意

特にブログエントリで利用する場合、FC2ブログのテンプレート編集機能にて設置する方法を採ると、記述内容が全エントリに反映されます。それだけでは大きな問題にはなりませんが、JavaScriptを利用しているブログバーツやウィジェットやガジェット等、またはFC2ブログのプラグインを多く設置しているブログの場合、それらが上記手順で設置したスクリプトと干渉してしまうコトがあります（問題無いコトも多いですが）。この干渉問題はワタシ自身確認しており、それは同じ条件でもブラウザによって異なる結果が出るという内容でしたから、テンプレート内に設置される場合は複数のブラウザで確認する事をお勧め致します。

ブログエントリとフォトギャラリーを切り離す

上記の干渉問題以外の点で、テンプレートに設置していまうとヘッダの記述内容がゴチャゴチャしてしまうのもチョット気に入らなかったりしますから、通常のブログエントリでは旧来の写真表示を用いつつ、写真を大量に貼り付けたい場合は別途フォトギャラリーページを製作すれば、スクリプトの干渉やヘッダ記述内容の問題は避けられます。また完全なフォトギャラリーとして使用する場合、写真だけの表示になってしまいますから、フォトギャラリーページをブログエントリと切り離してしまうコトで、（観覧者が）ブログエントリを前後にページ移動した際にも違和感が少ないのではないかと思いますし、ブログエントリに関連した内容のフォトギャラリーであれば、ページを分ける事でエントリ本文の読み込み速度の面でも良いのではないでしょうか。

フォトギャラリーページのhtmlファイル

htmlファイルによってブログエントリとは別にフォトギャラリーページを製作する場合、最も簡単な方法はブログのパーマネントページ（http://■■■.blog▲▲.fc2.com/blog-entry-XXX.html）をブラウザで表示させ、その状態のページソースをコピーしてメモ帳などに貼り付け、不要部分を削ると共に、上記内容を加え、必要に応じてCSS等に追記すれば手軽に作る事が出来ます。その場合、レイアウトがブログのテンプレートと同じになってしまいますが、フォトギャラリーは専用のレイアウトにしたいのであれば、一からページを構成するコトでソレも可能です。

FC2ブログ関連

IE6にだけ別のCSSを読ませる方法
IE（インターネットエクスプローラー）にだけ別のCSSファイルを読み込ませる方法と、ソレをFC2ブログでやる時の方法など。

FC2ブログ、ログイン出来なくね？【追記：復旧】
FC2ブログにログイン出来なかった時のエントリ。

FC2ブログのコメント認証キーワードが悩ましい件
FC2ブログのコメント認証キーワードがちょっとアレだった時のエントリ（笑）

FC2ブログな人は特にご注意を！（非FC2な人も）
FC2ブログを使ってウィルスをばら撒いてるブログに関するコトなど。

関連エントリ:

• ロドスタと空の写真
• Windows XP SP3インストール後にWindows Updateや自動更新が失敗する時の対処方法
• フォトギャラリーはページ機能とLightboxなどを利用
• お知らせ・その他【一部廃止及び変更】
• PHPのマニュアルをダウンロードしてみた
• Windows XPがexFAT対応 【SDXCカードも利用可能】
• トヨタのWebサイトで旧モデルのカタログが見れる
• 全タイトルを一気に見る【ページ追加】
• IEにもファビコンを表示させる
• FC2ブログ、ログイン出来なくね？【追記：復旧】
• コメント時の動作一部変更【ポリシー更新】・メールフォーム一部変更
• QRコード

そんな訳で、FC2ブログにログイン出来ないって方、結構いるのかなと・・・。
なんとなくだけど、最近不具合っぽいコト多くてチト不安なり。

や～、それにしても携帯からならログイン出来たので、携帯使って更新してるけど、文字打つの面倒臭いし、表示は遅いしで、やっぱ馴染めないでございます、携帯は。

追記：ユーザーフォーラムにも報告上がってました。

■ログイン出来ずにfc2ブログ公式サイトに飛ばされます。

頑張って携帯打ち打ち更新した直後辺りに直ってたっぽい・・・orz

関連エントリ:

• Twitter daily Updates for 2009-06-20
• 携帯電話からの投稿テスト
• Ketai Entryからの投稿出来ない問題、Head Cleanerの設定変更で解決
• 迷惑メール対策の設定で受信拒否しましょう【ドコモ】
• サイト更新とかパーマンのコピーロボットが欲しい件
• Twitterログのブログ投稿スケジュール変更
• QRコード
• ブログスタートの日
• やめるコトにします
• ブログ開店祝い？
• ブログの過去ログをみて振り返る
• NB-Lip Project

この画面では記入したコメント内容の確認の他、投稿用の認証キーワードを入力しなければならない。そんな訳で表示されている認証キーワードを入力・・・・・・。入力・・・・・・。

見難いので拡大。しかし拡大しても最後の文字が何なのかわからないよ～、FC2さん（笑）

って訳で、最後の文字がカタカナの「ニ」か「キ」のドチラなのかと考える。右側に若干何かが見えている気もするので、コレ「キュウ」なのかと思いつつ、でもソレは引っかけようとしているのだろう、その手に乗るかバカヤロウ、コレ「ニ」だ「ニ」、絶対間違い無い！　っと思いつつ「9992」と入れたらダメでした。。。

その後は認証キーワードが入れ替わってしまうので、結局何だったのかはわからないままですが、やっぱ素直に「9」だったのかなと。あぁ、深読みする大人ってキライ。コンナ自分が嫌（笑）

ソンナ訳で、コメント頂く際にわかりにくい認証キーワードが出てくる事があるかもしれませんので、事前にゴメンなさいと言うお話でした。

関連エントリ:

• コメント承認機能、一時解除のお知らせ
• コメント欄変更【プレビュー機能追加】
• ワードプレスでのコメント＆TBスパム対策
• コメント時の動作一部変更【ポリシー更新】・メールフォーム一部変更
• ワードプレス2.8アップグレード後のトラブルシューティング法
• ブログ開店祝い？
• グーグル、脅威の次世代イメージ検索
• ワードプレス2.8でGears有効時のFirefoxクラッシュ問題解決
• Twitter daily Updates for 2009-06-13
• ワードプレス2.8.4にアップグレード【セキュリティリリース】
• KINESISのエルゴノミックキーボード
• 新型ロドスタ、TV-CF

ブラウザによるCSS解釈の違い

FC2ブログをご利用のカタならご存知のように、FC2ブログはテンプレートのHTMLおよびCSS（スタイルシート）の弄れる範囲が広く（っと言うかほとんど自由）、それゆえブログのレイアウトやデザインにおいて色々なカスタマイズが出来るのが魅力の一つなのですが、注意しなければならないのがブラウザによるCSSの解釈の違い。

レイアウトは崩れていませんか？

CSSでレイアウトをしていると、同じCSSでも、あるブラウザではキチンと表示されているのに、別のブラウザだとグチャグチャにレイアウトが崩れてしまってまともに見れないと言うのはありがちなハナシ。特にIE6（インターネットエクスプローラー6）のバグによるCSSの解釈の違いは有名らしく、IE6でのみしかご自分のサイトの表示をみたコトのないカタは要注意。

IE6のバグと、その回避方法については下記を参考に。
■CSSレイアウトの定石　WinIE6バグ回避法

各種ブラウザでの表示確認には下記が便利。
■Test your web design in different browsers
※確認したいブラウザにチェックを入れ、URLを記入してボタンをクリックし、その後表示されるページをひとまずブックマークに保存。数時間後にブックマークしたページにアクセスすると各種ブラウザでのスクリーンキャプチャが表示されます（かなり時間がかかるので、1日後とかにアクセスするのが吉）。
※尚、外国のアレですのでブラウザによっては日本語に対応しておらず文字化けしているコトがありますが、レイアウトの部分などは見れるので問題にならないかと。

崩れてました

オイラは普段IEではなくてファイアーフォックスと言うブラウザを使っているのですが、今回一通りの作業を終えてIE6で確認したら一部の表示がおかしいなコトに（泣）。こう言ったCSSの解釈の違いを回避する手段もあるようなので、幾つか試してみるも直らず（号泣）。

シェアがデカイIE6が曲者

他のブラウザでは大体同じような表示なのにIE6とそれ以下のバージョンがいかんともしがたい。今現在、恐らくIE6なカタが一番多いので、IE6での表示をまともにしておいて修正作業をするのも手ですが、それ以外のブラウザではNGってコトに。多数あるブラウザの1つでしかないIE6であり、また他と違うので無視したいトコロだけど、使っているカタが多いだけに厄介だ・・・

とりあえずの対策としてIE6は特別扱い

スマートな解決法ではないけど、確かブラウザによって違うCSSを読み込ませるコトが出来たハズなので、今回はIE6にだけ別のCSSを読み込ませようという方向でひとまず対策。

以前に見たのはJavaScriptなんかを使っていたように思ったけども、調べてみたらHTMLへの簡単な記述のみでブラウザへ読み込ませるCSSの指定が可能である模様。試してみたトコロFC2ブログでも問題無く使えるので忘れぬようにメモなエントリ。（って訳でココからが本題。前置きなげぇ～）

IEに専用CSSを読み込ませる方法

そんな訳でIE用にCSSを用意してソレを読み込ませるための記述が以下。

IE用CSSの指定方法：Stylesheet Stylebookより

すべてのIEに対して（IE5, IE5.5, IE6）

<!--[if IE]>

  <link rel="stylesheet" type="text/css" href="ie-all.css" />

<![endif]-->

IE5.0に対して

<!--[if IE 5.0]>

  <link rel="stylesheet" type="text/css" href="ie-50.css" />

<![endif]-->

IE5.5に対して

<!--[if IE 5.5]>

  <link rel="stylesheet" type="text/css" href="ie-55.css" />

<![endif]-->

IE6.0に対して

<!--[if IE 6]>

  <link rel="stylesheet" type="text/css" href="ie.6.css" />

<![endif]-->

たったコレだけの記述でOK。別途、読み込ませるCSSを用意してソレを指定するだけ（赤字部にて）。

FC2ブログでコレやる方法

FC2ブログでコレをやるにはメモ帳とかで専用のCSSを作ってアップし、ソレを指定しても良いけど、その他にテンプレートの管理（管理画面にログイン→テンプレートの設定）をするトコロで、テンプレートを2つ用意すればOK（HTML部分は同じで、CSSの部分を変えておく）。

で、記述するのはHTML部分の上の方で、具体的には

<head>～</head>

の間に記述されている部分。

<head>

<link href="<%css_link>" type="text/css" rel="stylesheet" />

</head>

上記部分の下に、IEに別のCSSを読ませる記述をする。

<link href="<%css_link>" type="text/css" rel="stylesheet" />

で、テンプレートの編集画面では上記のようになってる訳だけども、赤文字のトコロはFC2ブログの独自な記述なので、実際にブラウザが読み込む時には下記のように、

<link href="http://○○○.blogXXX.fc2.com/ template/■■■/style.css" type="text/css" rel="stylesheet" />

っとなっていて、赤文字が読み込ませているCSSのURLとなる（○○○とXXXの部分はご自分のブログURLを見て下さい。■■■の部分はテンプレート管理画面の「テンプレート名/プレビュー」欄に羅列されているテンプレート名が入る）。

そんな訳で、上記URLのように用意した別のテンプレートを指定してやって、IE6に別のテンプレを読ませるならば下記のようにすればOK。

<head>

<link href="<%css_link>" type="text/css" rel="stylesheet" />

<!--[if IE 6]>

<link href="http://○○○.blogXXX.fc2.com/template/■■■/style.css" type="text/css" rel="stylesheet" />

<![endif]-->

</head>

関連エントリ:

• IE6さん、さようなら【IE6 no more ってみる】
• webサイト制作関連の本を購入
• 1万拍手突破【ありがとうございます】
• Firefox 3.5.3 リリース
• ブックマークの登録数
• YoutubeがIE6サポートをまもなく終了
• リニューアル
• SOUNDO STATION
• 文字化け混入でワードプレスのRSSフィードが出力エラーに
• 更新通知メルマガ開始！
• シフトパターンプレートを貼り付け
• レカロの555なシート