勿体ないのと、説明が面倒なのとで 紹介を避けていましたが... jQueryライブラリ を利用した jCarousel Lite を FC2ブログで使う上でのちょっとしたヒントを載せておきます。
変数 を利用すれば、ブログ記事内 に利用することだってできるし、カスタマイズして見た目を整えて使えば、読み込み中 や スクリプトOFF の場合でも格好悪くなりません。
私が利用しているものは jCarousel Lite Version 1.0.1 (Minified) です。 ダウンロードするものは 2KB の .jsファイル本体のみ で、CSSなどは含まれていません。 Installation のところにある設置方法 を参考に設定するだけで、取り敢えず使えるようになるのですが．．．
正しく設定しないと起こる不具合のサンプル、「失敗見本ページ」 を作ってみました。 ページ読み込み中の表示 もこのページのものとは異なります。
どうでしょうか？
- jQuery は ページの読み込み完了時に実行される ものなので、読み込み中の見栄えは html＋CSS の設定次第になる。 読み込み中のことも考慮し、CSS を設定しておけば、あらかじめ表示範囲が定まり 違和感を少なくできます。
※javascript OFF の環境での表示も、基本的には CSS の設定次第になります。
- ブログ記事内 で使いたい場合には、カテゴリー別，タグ別，検索結果別...etc どのような組み合わせで記事が表示されても正しく機能するように id名 (もしくは class名 でも可） に <%topentry_no> を利用します。
※テンプレートに 直接いくつか設置 するようなケースでは、この設定は不要です。
このスクリプト自体は、すごくシンプルでカスタマイズ性が高いものだと思います。
- 表示リスト数の設定が簡単！ visible:3 （デフォルト3）
- 縦方向のスクロールもOK！ vertical:true （デフォルトfalse 横）
- オートスクロールもOK！ auto:800 （デフォルトnull）, speed:1000
例えば、上のような設定は .jsファイル の該当箇所の値 を書き換えるだけでOKです。 それ以外の設定に関しては jCarouselLite の設定方法 - FHWブログ | ホームページ制作会社FHW に詳しく書かれていますので参考にしてみてください。
jCarousel Lite をFC2ブログ記事内で使うための設置方法
jCarousel Lite Installation のところにある設置方法をベースに 設定例 を載せておきます。 方法はいくつかあると思いますが、他のスクリプト （例えば jQuery版 lightBox など） にも応用できる方法を紹介します。 私が実際に使っている 設定方法，id，class名 とは異なりますので 混在させないように ご注意ください。
難易度は 中～高?? CSS を自力で設定できるくらいのレベルは必要かと思います。
1. スクリプトの準備
- Googleのサーバーから直接読み込んで使用する場合、準備は不要です。 私が使っているのは バージョン1.2.3 です。 それ以上なら機能すると思います。
[ 参照 ： Google AJAX Libraries APIを利用しよう！ | THE HAM MEDIA ]
- jcarousellite_1.0.1.min.js (2 KB)
jCarousel Lite Download からDLした .jsファイル を ファイルサーバーにアップロードします。※FC2ブログでは ファイル名に .(ドット) が含まれているとアップできないので... 予め、ファイル名を jcarousellite.js などのように変更しておいてください。
2. <%topentry_body> 部分を id で囲っておく。
重複はNGですので、接頭語＋記事番号 となるような 重複しない id を設定します。
私のテンプレートでは ↓下の部分 になりますが、基本的にはどのテンプレートも同じなので <%topentry_body> （記事本文が入る変数） を探してそれを囲っている <div> などに id="entry_no<%topentry_no>" を追加します。
<!-- ▼記事部分▼ -->
<!--topentry-->
<!-- *=*=*=*=*=*=*=*=*=* -->
<div class="entry_m" id="entry_no<%topentry_no>">
<%topentry_body>
</div><!--/class=entry_m-->
<!-- *=*=*=*=*=*=*=*=*=* -->
<!--/topentry-->
<!-- ▲記事部分▲ -->
もしくは、この 変数 を使った設定は使わず、記事内 で直接設定してもOKです。 その場合は 記事番号を入れて <div id="entry_no132"> ～ </div> のように設定します。 ちなみに、私はこの 「記事内での設定」 を使っていますが、紹介したソースのように 「テンプレートでの 変数 を使った設定」 にしておいた方が、変更が簡単で 他のものにも色々使い回しが利くと思うので。。。
3. <head> ～ </head> 部分に以下を記入
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://blog-imgs-00.fc2.com/a/b/c/ ～ /jcarousellite.js"></script>
<script type="text/javascript">
$(function(){
<!--topentry-->
$("#entry_no<%topentry_no> .anyClass").jCarouselLite({ btnNext:"#entry_no<%topentry_no> .next", btnPrev:"#entry_no<%topentry_no> .prev" });
<!--/topentry-->
});
</script>
<!--topentry--> ～ <!--/topentry--> 部分が 記事数分 繰り返されます。
jQuery の設定方法は一例です。 これ以外の方法もありますので、詳しいことはお調べください。 順番は重要です。 また 私の場合、実際にはこれに エリア変数 を加えています。
[ 関連記事 ： エリア変数を加えて FC2ブログを軽くする！ ]
4. 記事への適応方法 （通常は CSS設定後）
<div
class="prev"></div><div
class="next"></div>
<div class="anyClass">
<ul>
<li><img src="http://blog-imgs-00.fc2.com/a/b/c/ ～ /～.jpg" alt="" width="120" height="120" /></li>
<li><img src="http://blog-imgs-00.fc2.com/a/b/c/ ～ /～.gif" alt="" width="120" height="120" /></li>
<li><img src="http://blog-imgs-00.fc2.com/a/b/c/ ～ /～.png" alt="" width="155" height="140" /></li>
<li><img src="～" alt="" width="60" height="80" /><span class="t_memo">要は単なる リスト なのでテキストなどを追加してもOK！</span></li>
<li><span class="t_memo">テキストだけでも勿論OK！</span></li>
</ul>
</div><!--/anyClass--><br style="clear:both" />
※アフィリエイトのバナーなどは発行されるタグをそのまま貼りつければOKです！ CSS で個々のサイズを設定しておけば、width="" や height="" を入れられなくても問題なく表示できます。
但し、「追記の折りたたみ」スクリプト を使っている場合は 「追記」部分では 基本形（width="" や height="" が入っている状態）でないとダメという例外もあります。 説明すると長～くなるので省略しますが、記事内で使う場合には 必ず全てのエリアでテストしてから導入してください。
5. スタイルシートの設定例
CSS の設定は あくまでも一例です。 全体のサイズ と 個々のリストの設定 を入れておきます。
.prev と .next 部分は 背景画像を使った場合の設定例です。 方法は 色々あると思いますが．．． 私の場合は 横30px，縦78px の画像 を位置だけずらして使っています。
例えば、矢印画像など 色違いの画像を上下に並べて 「1つの画像に合成したもの」 を利用すればOKです！
※IE6以下では :hover 部分の設定は 無効になります。
/* jCarousel Lite
------------------------------------- */
/* 全体のサイズ設定 */
.anyClass {
width:505px;
height:180px !important;
overflow:hidden;
}
/* 余白のリセット */
.anyClass ul,
.anyClass li {
margin:0;
padding:0;
}
/* 個々のリストの設定 */
.anyClass li {
list-style:none;
float:left;
width:165px;
height:150px;
text-align:center;
font-size:11px;
}
.anyClass li img {
vertical-align:bottom;
}
.anyClass li a img {
border:none;
text-decoration:none;
background:#fff;
}
/* 前へ（PREV）の設定 */
.prev {
float:left;
margin:41px 5px 0 0;
width:30px;
height:39px;
background:url(http://・・・/前へ用画像.png) no-repeat;
cursor:pointer;
}
.prev:hover {
background:url(http://・・・/前へ用画像.png) no-repeat 0 -39px;
}
/* 次へ（NEXT）の設定 */
.next {
float:right;
margin:41px 0 0 5px;
width:30px;
height:39px;
background:url(http://・・・/次へ用画像.png) no-repeat;
cursor:pointer;
}
.next:hover {
background:url(http://・・・/次へ用画像.png) no-repeat 0 -39px;
}
/* テキストを追加する場合用 */
.t_memo {
padding:5px 10px;
display:block;
text-align:left;
}
敢えて難易度の高い 「ブログ記事内」 で使う方法を紹介しましたが、「テンプレートに直接入れて」 使う方法 はもう少し簡単です。 何かに使えることがあれば。。。
[ 関連記事 ：
自分のつぶやきをオートスクロールで表示 （jCarousel Lite を活用） ]
[ 関連記事 ：
複製テンプレートでトップページ以外を確認 ]
[ 関連記事 ：
jQuery lightBox グループ化を操る3つの方法 ]
[ 参考 ：
カスタマイズ性に優れた jQueryカルーセルプラグイン -稀によくあるブログ ]
[ 参考 ：
jCarousel Lite jsを使ってみました。 | immature design ]
拡大画像など 画像ファイルへのリンク を 同じウィンドウでポップアップ風に表示する方法。 先日、急に導入してみたくなり、色々と調べ 実際に試してみました。
この手の javascript は 数多く存在し、中でも一番多く使われていそうなものが Lightbox のようですが、一言で Lightbox と言っても 色々なバージョンや種類があり、どれを使おうか本当に悩んでしまいました。
クリックで画像を拡大します
クリックで画像を拡大します
↑ a:hover を使って
で、Slimbox， Lightbox JS （旧バージョン，1.0），Lightbox Plus を実際に試して、最終的に Lightbox JS （旧バージョン） を選びました。
追記 （2010/01/09） ：
jQuery版 lightBox に変更しました。
jQuery版 では、主なスマートフォン，任天堂ゲーム機 及び 表示幅 800px以下 の環境では lightBox は機能しないようにしてあります。 画像をクリックすると単純に 別タブで大きい画像を開きます。
現在は JQuery版 を適応していますので、旧バージョンの動作確認は
Lighbox JS のサンプルテンプレート からどうぞ。
※ページの読み込みが完全に終わっていないうちに 画像へのリンク をクリックすると、Lightbox は作動せず、通常の表示となります。 これは javascript （onload） の仕様で、この Lightbox に限ったものではないようです。
これに決めた理由は ↓
- どれよりも一番軽い ! （約17KB）
- どこをクリックしても画像を閉じられる
- カスタマイズしやすい ...etc
私の場合、画像のグループ化 （スライドショーのような機能） は必要ないと思ったので、とにかく 「軽さ」 と 「扱いやすさ」 を重視しました。
※rel="lightbox" の自動付与 （rel="lightbox" を書かなくてOKというもの） は、多くのタイプで 実装可能 かと思います。 [ 関連：rel="lightbox" を入れずに jQurey lightBox を ]
Lightbox系のスクリプト 比較一覧
海外のサイトですが、ここからサンプルを見て回っても面白いと思います。 「Lightbox v2.0」 の軽量版クローン 「Litebox」， HTMLや動画も表示できる 「Floatbox （Lightbox系）」， 様々な表示タイプから選べる 「Highslide JS （Lightbox とは異なるタイプ，やや設置難？）」 など本当に数多く存在するんですね！
Lightbox JS の設置方法
追記 ： 2009/07/12 FC2ブログユーザーの方へ
適用中のテンプレートではなくても トップページ以外を簡単に確認するための方法 （便利なプレビュー用リンク） を紹介しています。 是非、使ってみてください。
[ 関連記事 ： 複製テンプレートでトップページ以外を確認 ]
1. 配布サイト から必要ファイルをダウンロード
ファイルは lightbox.js （12KB） , lightbox.css （1KB） , overlay.png （1KB） , loading.gif （2KB） , close.gif （1KB） の5つです。
2. 画像ファイルをサーバーにアップロード
配布サイトから入手した overlay.png, loading.gif, close.gif をサーバーにアップロードしておきます。 （FC2ブログの場合には、ここで 画像ファイルの保存場所 を確認しておきます。 不具合などで、画像サーバーが移動しているケースもまれにあるので・・・）
FC2ブログの場合、lightbox.js , lightbox.css 中にある 画像 （overlay.png , loading.gif , close.gif） の相対指定を 絶対指定 に変更しないと 何故か認識しませんでした。 通常は 相対指定のままでOK だと思いますが、認識しない場合 （FC2ブログを含む） には 該当箇所を 絶対指定 に変更します。
※絶対指定 とは http://blog-imgs-18.fc2.com/a/r/i/
arinogotokuatumarite/overlay.png のような指定です。
3. lightbox.js , lightbox.css をサーバーにアップロード
カスタマイズは後からでも出来るので．．． とりあえずアップ。
4. HTML の <head> ～ </head> に以下を追加
<link rel="stylesheet" type="text/css" href="http://blog-imgs-18.fc2.com/a/r/i/ ・・・ /lightbox.css" />
<script type="text/javascript" src="http://blog-imgs-18.fc2.com/a/r/i/ ・・・ /lightbox.js"></script>
通常は相対指定でOKですが、FC2ブログの場合などでは上のような 絶対指定 で記入 （赤文字部分 を変更） します。
（ 5. 必要に応じ 以下の項目を追加 ） ← !!
※<body> に 別のonloadイベント が設定されている場合、これだけでは作動しないので、body onload 部分に initLightbox(); を追加してください。
<body onload="～; initLightbox();">
また、他のスクリプトの onclick 実行後、Lightbox が作動しないという現象にもこれが有効のようで、このブログの タグ検索結果ページ と 検索結果ページ では onclick="～; initLightbox();" となっている箇所があります。 「何故動かないんだろう？」 という現象が起こったら一度お試しください。
6. 画像ファイルへのリンクに rel="lightbox" を追加
画像ファイル （.gif .png .jpg ） へのリンク <ａ> に rel="lightbox" を追加 すればOK。 例えば ↓ のような感じで使います。 ■色文字部分 が含まれていれば基本的に大丈夫ですが、 <a> に title="" を入れておくと、それが Lightbox でも表示されるようになります。 必要に応じて入れられるので便利です！
<a href="～.gif" rel="lightbox" title="オランウータン (41KB)" target="_blank"
><img src="～.gif" alt="Lightbox サンプル画像" width="140" height="135" /><br />クリックで画像を拡大します
</a>
<a href="～.png" rel="lightbox" title="エディタは K2Editor を使っています" target="_blank">lightbox.js カスタマイズの注意点</a>
これで完成！ あとは必要に応じてカスタマイズすればOKです。
lightbox.js カスタマイズの注意点 （← Lightbox ）
Lightbox JS の表示位置などを カスタマイズ
Lightbox を設置して最初に困ったのが、ブラウザの縦幅 より 大きいサイズの画像を表示した際 「表示した画像の中心がブラウザの中央に合わせて表示されてしまう」 というものです。 単純に写真などであればこれでOKだと思いますが、私の場合、スクリーンショットなど 説明用として 横幅，縦幅の大きい画像 を使うことが多いので、これだと逆に面倒になる可能性もありました。
で、ちょっとだけカスタマイズしてみました。 変更箇所は Lightbox の表示位置をページ上部にしたところ と 一部メッセージ （lightbox.js）， 閉じる用画像 に合わせた余白やサイズ部分 （lightbox.css） です。
【 プレビュー （HTML版） ： lightbox.js , lightbox.css 】
これで 縦幅の大きい画像でも 上から下にスクロールさせれば全体を確認できるようになりました。 （Sleipnir2， IE8， IE7， IE6， Firefox3， Opera9， Google Chrome2 などで動作確認済。） それに 旧バージョンは どこをクリックしても画像が閉じられる というものなので、私のような使い道の方には便利かも。
後は、おまけです。
右のサンプルのように a:hover 効果を追加したい場合には・・・
クリックで画像を拡大します
a img.filter{
filter:Alpha(Opacity=70);
-moz-opacity:0.70;
opacity:0.70;}
a:hover img.filter{
filter:Alpha(Opacity=100);
-moz-opacity:1.0;
opacity:1.0;}
を スタイルシート に加え、<img> に class="filter" を追加すれば Lightbox に限らず 画像リンク に使えます。 （IE，Firefox，Opera，Google Chrome，Netscape，Safari などに対応 ※但し CSS Validator （W3C CSS 検証サービス） ではエラーと指摘されます。 値やクラス名は適当に変更してください。
<a href="～.gif" rel="lightbox" title="シロクマ (38KB)" target="_blank"
><img src="～.gif"
class="filter" alt="Lightbox サンプル画像" width="140" height="135" /><br />クリックで画像を拡大します
</a>
[ 関連記事 ：
jQuery lightBox グループ化を操る3つの方法 ]
[ 関連記事 ：
フリーソフト集 3) グラフィック 編 ]
[ 関連記事 ：
減色ツールの使い分け 画像をさらに軽量化！ ]
[ 参考 ：
Lightbox JS v2.0 導入しつつ改造 - LogJET ]
[ イラスト ：
イラストレーターわたなべふみの「子供と動物のイラスト屋さん」 ]
申し訳ありません。 お探しの記事は現在、この ユーザータグ （Keyword） を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。
jQueryプログラミング入門
jQueryで作るAjaxアプリケーション 
jQueryプラグインブック 
jQuery＋JavaScript実践リファレンス
jQuery UI＋厳選プラグイン41実践サンプル集
