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

このページの記事目次 (カテゴリー: ブログカスタマイズ上級 30 件)

  ← 前のページ  total 8 pages  次のページ →  

スポンサーサイト

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

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

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

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

rel="lightbox" を入れずに jQurey lightBox を

2010/07/12 (月)  カテゴリー: ブログカスタマイズ上級

以前の記事 jQuery lightBox グループ化を操る3つの方法 で紹介した方法。 jQuery版 の lightBox は rel="lightbox" を入れなくてもOK(不要) なんだと勘違いしていた私。

このサイトでは lightBox で開きたい画像リンクには rel="lightbox" を入れているので、問題なかったのですが、先日 ある方のサイトで rel="lightbox" を入れずに lightBox を適応させてみたところ、画像クリックで lightBox が機能したものの、範囲内の <a> 全てが反応してしまい、読み込み状態のままになり不具合があることが判りました。

主なスマートフォン,任天堂ゲーム機 及び 表示幅 800px以下 の環境では lightBox は機能しないようにしてあります。 画像をクリックすると単純に 別タブ(_blank)で大きい画像を開きます。

テンプレートの構造

既に画像リンク が沢山ある状態で、全てに rel="lightbox" を追加するのは大変な作業だと思いますので...かなり必死に探したところ jQuery lightBox での適応方法を紹介しているサイトをみつけましたので、紹介します。

キーワード検索 : jQuery  Lightbox  javascript  カスタマイズ  

スポンサーリンク

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

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

2010/07/12 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |

jQuery lightBox グループ化を操る3つの方法

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

私が Lightbox JS (旧バージョン) から jQuerylightBox に乗り換えたのは 半年前の 2010年1月 のこと。 Lightbox JS は ライブラリも不要で軽い, どこをクリックしても画像を閉じられる,カスタマイズしやすい などの理由で気に入っていたのですが、 1回目に スクリプトが機能していないケースが多い ことだけが気になっていました。

上手く機能しなくても 別窓で表示されるだけなので 大きな問題でも無いかもしれませんが、1回目 と 2回目の動作が異なるのは やはり少し戸惑うかな...と。 読み込み完了 と 正常起動のタイミング は Highslide JS が最も良く、 次いで jQuery lightBox や Prototype Lightbox 2 など、 Lightbox JS (旧バージョン) は少しイマイチな印象です。

jQuery lightBox plugin
図1
jquery.lightbox-0.5.min.js
図2
テンプレートの構造
図3


主なスマートフォン,任天堂ゲーム機 及び 表示幅 800px以下 の環境では lightBox は機能しないようにしてあります。 画像をクリックすると単純に 別タブ(_blank)で大きい画像を開きます。

※実際には、ここまで無駄に大きいサイズにしたり、前後の画像のサイズを変えていることは少ないですが、ここでは動作確認用として 敢えてバラバラのサイズにしてあります。

jQuery lightBox は動きも軽く、どこをクリックしても画像を閉じるようにできる(簡単なCSS調整でカスタマイズ可能)、自動グル―プ化 で 2枚目以降の画像の表示が速い ...ということで、jQuery lightBox に変更しました。

自動グループ化を上手くコントロール するための設置方法

jQuery lightBox の大きな特徴の1つに 自動グループ化 というものがあると思います。 そして...この便利な機能に 逆に戸惑うこともあるのではないでしょうか?

  1. 一番オーソドックスな設置方法 (私のサイトでの設置方法)
    私は、それ程多用していないので... CSSを調整して 1枚1枚 画像を開いてもらうような見た目 にしていますが、繋がりのない画像が 「次へ」「前へ」 で グループ化されている状態は あまり良くはないですよね。。。;
  2. 記事毎に グループ化させる設置方法推奨!
    FC2ブログなら、テンプレート自体に一工夫するだけで 記事毎に lightBox をグループ化させることができます。 他のスクリプトにも応用でき、記事の編集作業も要りませんので お奨めの方法です。 FC2ブログ以外でも工夫次第で設置できる場合もあると思います。
  3. rel="lightbox[グループ名]" の設定を有効にする方法
    Prototype Lightbox 2 にあったグループ化( rel="lightbox[任意のグループ名]" ) の設定を jQuery lightBox でも使えるようにするカスタマイズです。 1つの記事内でさらにグループを分けたい場合 や 2. の方法が使えない場合、Lightbox 2 をこれまで使用していていた場合 などにお奨めです。

ちなみに私は 全部試して結局 1. の方法を選んでいますが...後はお好みで!
3. のカスタマイズについては、[ prototype版LihgtboxからjQuery版Lightboxへの移行 | Beach Resort Photoclip ] に詳しく書かれていますのでそちらを参照してください。

キーワード検索 : jQuery  Lightbox  画像  javascript  カスタマイズ  

スポンサーリンク

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

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

2010/06/23 ~ | Comment (32) tweet? | ↑ ページ先頭へ ↑ |

現在地表示機能付き カテゴリーリスト の設置方法

2010/06/07 (月)  カテゴリー: ブログカスタマイズ上級

「私のカテゴリーリストはどのように...?」 と質問があったのでまとめてみました。
下図 右側 が 私のカテゴリーリストです。 地味ではありますが、

  • 普段は折りたたみ式, カテゴリー別ページでは 展開状態 
  • カテゴリー別ページ では 現在地 を目立つように表示 
    [ カテゴリーリストに 「現在地表示機能」 を ] ← これの発展形
  • スクリプトOFF でも 問題なし (展開状態で表示) 
  • 任意のカテゴリーを非表示 に (無駄のない 変数ベース) 

と、色々小細工しています。 一般的には カテゴリーは目立つように 表示するのが良いと思いますが、私のテンプレートでは 上のナビゲーション部分にも入っているので... このぐらいで丁度良いかな と思っています。

現在地表示機能付き 親子カテゴリーリスト

キーワード検索 : カテゴリー  現在地表示  変数  非表示カテゴリー  折りたたみ  

スポンサーリンク

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

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

2010/06/07 ~ | Comment (5) tweet? | ↑ ページ先頭へ ↑ |

携帯テンプレートに「記事のURLをメールする」を

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

携帯用の公式テンプレートにある 「友達に教える」 という機能。 リンクをクリックすると メールが起動し、ブログのトップページURL がメール送信可能な状態になるもの。

これ、個別記事のページ(固定リンク) にも使えたら便利になるのではないかなと思い、記事下に その機能をつけてみました。 [ 実際のページ ]

キーワード検索 : FC2ブログ  携帯用  テンプレート  変数  

スポンサーリンク

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

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

2010/05/21 ~ | Comment (4) tweet? | ↑ ページ先頭へ ↑ |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。