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

このページの記事目次 (タグ: カスタマイズ の検索結果 10 件)

  ← 前のページ  

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? | ↑ ページ先頭へ ↑ |

Lightbox JS (あえて旧Ver.) をカスタマイズ

2009/03/20 (金)  カテゴリー: ブログ雑記・その他

拡大画像など 画像ファイルへのリンク を 同じウィンドウでポップアップ風に表示する方法。 先日、急に導入してみたくなり、色々と調べ 実際に試してみました。

この手の javascript は 数多く存在し、中でも一番多く使われていそうなものが Lightbox のようですが、一言で Lightbox と言っても 色々なバージョンや種類があり、どれを使おうか本当に悩んでしまいました。

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  カスタマイズ  画像  javascript  

スポンサーリンク

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

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

2009/03/20 ~ | Comment (8) tweet? | ↑ ページ先頭へ ↑ |
申し訳ありません。 お探しの記事は現在、この ユーザータグ (Keyword) を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。