ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
jQuery  jCarousel  javascript  テンプレート  カスタマイズ  

jCarousel Lite をカスタマイズして記事毎に!

2010/05/19 (水)  カテゴリー: ブログカスタマイズ上級

勿体ないのと、説明が面倒なのとで 紹介を避けていましたが... jQueryライブラリ を利用した jCarousel Lite を FC2ブログで使う上でのちょっとしたヒントを載せておきます。

変数 を利用すれば、ブログ記事内 に利用することだってできるし、カスタマイズして見た目を整えて使えば、読み込み中 や スクリプトOFF の場合でも格好悪くなりません。


  • jQueryプログラミング入門
  • jQueryで作るAjaxアプリケーション
  • jQueryプラグインブック
  • jQuery+JavaScript実践リファレンス
  • jQuery UI+厳選プラグイン41実践サンプル集
  • これはあくまで 見本ネタ として作ったものなので... 1つも読んだことないです。 ごめんなさい。

私が利用しているものは jCarousel Lite Version 1.0.1 (Minified) です。 ダウンロードするものは 2KB の .jsファイル本体のみ で、CSSなどは含まれていません。 Installation のところにある設置方法 を参考に設定するだけで、取り敢えず使えるようになるのですが...

正しく設定しないと起こる不具合のサンプル、「失敗見本ページ」 を作ってみました。 ページ読み込み中の表示 もこのページのものとは異なります。

どうでしょうか?

  1. jQuery は ページの読み込み完了時に実行される ものなので、読み込み中の見栄えは html+CSS の設定次第になる。 読み込み中のことも考慮し、CSS を設定しておけば、あらかじめ表示範囲が定まり 違和感を少なくできます。
    ※javascript OFF の環境での表示も、基本的には CSS の設定次第になります。

  2. ブログ記事内 で使いたい場合には、カテゴリー別,タグ別,検索結果別...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. スクリプトの準備

  1. Googleのサーバーから直接読み込んで使用する場合、準備は不要です。 私が使っているのは バージョン1.2.3 です。 それ以上なら機能すると思います。
    [ 参照 : Google AJAX Libraries APIを利用しよう! | THE HAM MEDIA ]
  2. 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. スタイルシートの設定例

jCarousel Lite CSS設定

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 ]

キーワード検索 : jQuery  jCarousel  javascript  テンプレート  カスタマイズ  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-132.html

2010/05/19 ~ | Comment (4) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

4 Comment


こんばんは。

いつも参考にさせて頂いております。
今回、ご紹介のjCarousel Lite も早速、導入してみました。
有難う御座いました。

Hiro |  2010/05/22 (土) [ 編集 ] No.518


Hiroさん、こんばんは!

以前のぐるぐるの代わりですね! 記事がお役に立てて良かったです。
ちょっと生意気なことを書かせていただくと...
最初にアクセスした時の読み込み時間が少し長いかなと思ってしまいます。 2回目以降はそれ程でもないのですが... CSS10 JS47 で、もしかしたら 少しまとめられたり、そのページでは不要なものもあるのかなとも思うのですが、どうでしょうか?


 追記:すみません。。単に時間帯などの問題だったかもしれません。
 5/23 キャッシュをクリアして表示した際には 重く感じませんでした。


↓ は私の <head>部分です。
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-98.html
地味な 軽量化 には効果があると思うので、使えるものがあったら。。。

<script 1></script>
<!--titlelist_area--><script 2></script><!--/titlelist_area-->

<!--not_index_area--><!--not_titlelist_area--><!--not_edit_area-->
<script 3></script>
<script 4></script>
<script 5></script>
<!--search_area--><script 6A></script><!--/search_area-->
<!--tag_area--><script 6B></script><!--/tag_area-->
<!--date_area--><script 7></script><!--/date_area-->

<!--not_permanent_area-->
<script 8></script>
<!--not_date_area--><script 9></script><!--/not_date_area-->
<!--/not_permanent_area-->

<script 10></script>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_index_area-->

paruparu |  2010/05/23 (日) [ 編集 ] No.520


こんばんは。

ご指摘ありがとうございます。

読み込み時間について。
こちらの記事を参考にタグやカテゴリの一覧を別ページに表示する事で
以前よりかなり改善されました。以前はこの3倍はかかってましたから(汗)
それでも、他のブログに比し遅いのは否めませんが...
また、いろいろなプラグインやブログパーツを付け替えした所為で
cssにその残骸がかなりあると思います。

エリア変数を使った軽量化について。
この記事も拝見してるのですが、
表示速度の改善の為、「jQueryのプラグインなど複数のJSファイルを
一つのファイルにまとめて外部ファイル化し圧縮」しているので
あとから、切り分けるのが面倒で手付かずです。
正直なところ、これまで通りの動作が確保出来るか不安なのもありますが...

今後も、参考にさせて頂きますので宜しくお願い致します。

Hiro |  2010/05/23 (日) [ 編集 ] No.524


Hiroさんへ

コメントに追記したように、最初にアクセスしたのが確か23:30頃だったので
時間帯的にサーバーにアクセスしづらい状態だったのかもしれません。。。

不安にさせるようなことを書いてしまって申し訳ありませんでした。
Hiroさん のサイトには面白い機能が色々あるので参考にさせていただいています。 【 関連WebSearch 】 なども珍しいですよね。 

私も、やっぱりちょっと変わったことをしたい!という気持ちが強いので... 軽く・便利に・面白く... その辺りのバランスを取るのが難しかったりします。

paruparu |  2010/05/24 (月) [ 編集 ] No.526

コメントを投稿する 記事: jCarousel Lite をカスタマイズして記事毎に!


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback