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

このページの記事目次 (タグ: jCarousel の検索結果 1 件)

  

スポンサーサイト

--/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーリンク

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

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

--/--/-- ~ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

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名 とは異なりますので 混在させないように ご注意ください。

スポンサーサイト

キーワード検索 : 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? | ↑ ページ先頭へ ↑ |
申し訳ありません。 お探しの記事は現在、この ユーザータグ (Keyword) を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。

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