上下にスクロールでコンテンツが開閉するjQueryプラグイン「Slinky.js」 – bl6.jp
なかなか面白かったのでご紹介します。上下にスクロールするとコンテンツが開閉していくjQueryプラグイン「Slinky.js」です。コンテンツが閉じている状態では、下の方に各項目の見出しだけが表示されており、下にスクロールしていくと徐々にコンテンツが開いていきます。逆に上にスクロールすると再度閉じた状態に戻るという仕組みです。 [ads_center] Slinky.jsの特徴 このように、閉じている時は下の方に固定された見出しだけが見えている状態になっています。 下へスクロールしていくと、見やすい位置に来た項目のコンテンツが開いていきます。逆に上まで来た見出しはそこで固定されていくので、上にどんな内容のものがあったのかをすぐに確認することもできます。 縦長のページで、下の方にどんな項目があるのか知らせたい時なんかに役立ちそうですね。 Slinky.js
背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」 – bl6.jp
WallpaperというjQueryプラグインを使えば背景画像のレイアウトをブラウザ幅に合わせることができます。ブラウザ幅を縮小したり拡大することによって、そのサイズに最適化された配置に調整されるのでいろんなデバイスで見ることができますね。とても便利なので覚えておきたいプラグインです。 [ads_center] Wallpaperの使い方 このようにブラウザ幅のサイズによって背景画像のレイアウトが調整されます。 以下は縮小時。 使い方もシンプルですね。 $("#element").wallpaper({ source: "path/to/image.jpg" }); Wallpaper
アイコンをクリックすると周りにメニューが表示されるjQueryプラグイン「FerroMenu」 – bl6.jp
FerroMenuというjQueryプラグインを使えばアイコンをクリックすることで周りにメニューを表示させることができます。アイコンはドラッグして移動させることもできるのでとても便利です。スペースの有効活用にもなるし見た目もシンプルでよさそうですね。以下は使い方です。 [ads_center] FerroMenuの使い方 左側中央にあるアイコンをクリックするとメニューが表示されます。 こんな感じでアイコンの周りにメニューが出てきます。 使い方は、まずhead内にjQueryとプラグインを読み込みます。 <link rel="stylesheet" href="jquery.ferro.ferroMenu.css" type="text/css"> <script src="jquery-1.9.1.min.js" type="text/javascript"></script> <scri
レスポンシブなテキストを実装できるjQueryプラグイン「Responsive Text」 – bl6.jp
Responsive TextというjQueryプラグインを使えば、とても簡単に指定したテキストをレスポンシブにすることができます。試しに使ってみたところ各テキストごとにフォントサイズの最大値や最小値などを指定することができるので便利でした。以下は使い方です。 [ads_center] Responsive Textの使い方 Responsive Text jQueryとプラグインファイルを読み込んだら以下のようにResponsive Textをセットします。 <script type="text/javascript"> $(document).ready(function() { $('.responsive').responsiveText(); }); </script> 適用したいテキストはこんな感じで記述。フォントのサイズはdata-minに最小値、data-maxに最大値を設
スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadShrinker」 – bl6.jp
スクロールするとナビゲーションが上部に固定配置されるjQueryプラグイン「HeadShrinker」を使ってみました。レスポンシブにも対応しており、ブラウザの横幅を小さくするとメニューアイコンに切り替わる仕組みになっています。使い方もシンプルなので、あっという間に今風のナビゲーションを実装することができます。以下は使い方です。 [ads_center] 使い方 このようにスクロールすることでナビゲーションが上部に固定されます。 ブラウザ幅を縮小していくと、こんな感じでナビゲーションメニューがアイコンに切り替わります。レスポンシブのサイトでよく見かけますよね。 使い方はとても簡単です。jQuery本体とダウンロードしたプラグインファイルをhead内に読み込みます。 <link rel="stylesheet" href="headshrinker.css" media="all" /> <
Google+やPicasaから写真を埋め込みスライドショーを作れるプラグイン「jQuery googleslides」 – bl6.jp
jQuery googleslidesはGoogle+やPicasaからの写真を埋め込んでスライドショーを作ることができるjQueryプラグインです。写真を指定するにはユーザーIDとアルバムIDをオプションに設定する必要があります。Googleサービスで写真を管理している人は簡単に自分のスライドショーが作れるので便利ですね。 [ads_center] 使い方 このように写真を埋め込んでスライドショーを作成できます。 使い方は、まずはjQueryを読み込んでいる状態で、ダウンロードしたプラグインファイルを読み込みます。 <link href="src/jquery.googleslides.css" rel="stylesheet" type="text/css" /> <script src="src/jquery.googleslides.js" type="text/javascrip
ネオンサインのようなエフェクトを実装できるjQueryプラグイン「No Vacancy」 – bl6.jp
テキストにネオンサインのようなエフェクトを実装することができるjQueryプラグイン「No Vacancy」が面白かったので備忘録。No Vacancyとは日本語に訳すと「満室」という意味みたいです。夜のネオンのような雰囲気を演出したい時に役立つプラグインですね。 [ads_center] 使い方 使い方は至ってシンプルです。 $('#no').novacancy(); オプションでcolorやglowといったものも設定することができます。 $('#no').novacancy({ 'reblinkProbability': 0.1, 'blinkMin': 0.2, 'blinkMax': 0.6, 'loopMin': 8, 'loopMax': 10, 'color': '#ffffff', 'glow': ['0 0 80px #ffffff', '0 0 30px #008000
レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」 – bl6.jp
レスポンシブに対応している軽量のjQueryスライダー「Juicy Slider」をご紹介します。エフェクトがとっても優雅な感じで素敵ですね。min版が約2KBとかなり軽量なところも嬉しいです。あと、JavaScriptを使用して画像とviewportに対応するアスペクト比を計算して画像サイズが調整されるので、古いブラウザでもより一貫した互換性になっています。 [ads_center] 使い方 このように見た目がとてもシンプルなのでいい感じですね。マウスオーバーすると画像切り替えの矢印アイコンが表示されます。 使い方も特に難しい設定はありません。head内にjQuery、jQuery UI、プラグインファイルを読み込みます。 <link rel="stylesheet" href="css/juicyslider.css" type="
カラーコードからRGBコードに変換（その逆も）してくれる「RGB変換」 – bl6.jp
カラーコードからRGBコードに変換してくれるサービスを探していたら理想的なものが見つかったのでメモがてらご紹介。RGB変換というサイトなんですが、カラーコードからRGBコード、またはRGBコードからカラーコードに変換してくれます。 [ads_center] 使い方 余計な機能が一切なくてとてもシンプルで使いやすいですね。RBGやカラーコードを入力して「変換」ボタンをクリックするだけです。 試しに、カラーコードを入力してRGBに変換してみると。 このようにRGBコードになって返ってきます。便利ですね。 カラーコードやRGBをよく使う人は覚えておくと作業が捗りそうです。 RGB変換
画像を綺麗に整列させるjQueryプラグイン「CollagePlus」 – bl6.jp
画像を綺麗に整列させる便利なjQueryプラグイン「CollagePlus」がよかったのでメモがてらご紹介します。イメージギャラリーとかに使ってみたいですね。実際のデモはレスポンシブにもなっていてブラウザ幅に合わせて可変していきます。オプションで自分の好きなエフェクトも選べるのもいいですね。 [ads_center] 使い方 こんな感じで綺麗に整列させることができます。マウスオーバーするとキャプションも表示されます。 使い方もとてもシンプルですね。 // マークアップ <div class="Collage"> <img src="example1.jpg" /> <img src="example2.jpg" /> <img src="example3.jpg" /> </div> // プラグインをセット $('.Collage').collagePlus(); 最初に表示される時のエ
レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsive Tabs to Accordion」 – bl6.jp
ホーム JavaScript レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsive Tabs to Accordion」 今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポンシブ対応のタブパネルを実装できる「Easy Responsive Tabs to Accordion」です。シンプル&軽量で素晴らしいですね。ブラウザ幅を縮小していくとタブパネルからアコーディオンに切り替わるのが特徴です。タブは水平・垂直も可能です。 [ads_center] 使い方 このようなタブパネルからブラウザを縮小していくと。 こんな感じでアコーディオンに切り替わります。ブレイクポイントは768pxになっています。以下はHTMLです。 <div id="demoTab"> <ul class="resp-tabs-list"> <li>..
2013年上半期に紹介したjQueryプラグイン50選まとめ – bl6.jp
気づいたらあっという間に2013年上半期が終わってしまいましたね。ということで、この間に紹介したjQueryプラグインをまとめてみました。全部でちょうど50個あります。スライダー、ギャラリー、テキスト、ナビゲーションなどいろんなジャンルのプラグインがあるので今後のサイト制作に活かしていきたいですね。レスポンシブ対応のプラグインも増えてきたのも嬉しいですね。 [ads_center] スライダー、カルーセル系 raccordion レスポンシブにも対応しているjQueryプラグインのアコーディオンのイメージスライダー。 raccordion Liquid Slider タブパネルにもなっているレスポンシブなjQueryスライダー。 Liquid Slider jQuery Waterwheel Carousel 水平方向や垂直方向に配置できる水車のようなカルーセル。 jQuery Water
スマホやタブレットでのスワイプに対応したモバイルにも最適なjQueryスライダー「Swiper」 – bl6.jp
とてもよさそうだったのでメモしときます。スワイプで切り替えることができるjQueryスライダー「Swiper」です。スライダーはオプションで水平モード、垂直モードを指定することもできます。スワイプに対応しているのでスマホやタブレットでユーザーが使いやすいUIが実装できます。 [ads_center] 実際のデモでは色んな種類のスライダーを確認することができます。 カルーセルのタイプも。 タブパネルも良いですね。使いどころがたくさんありそうです。 オプションも数多くあるので、自分好みのスライダーにカスタマイズしていくことができます。 スマホやタブレットのスワイプに対応させたスライダーを実装したい時に覚えておきたいプラグインですね。 Swiper
Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「photowall」 – bl6.jp
Google画像検索のようなアニメーションを実装することができるjQueryプラグイン「photowall」がよかったのでご紹介します。サムネイル画像をクリックすると、その画像詳細がスライドダウンして表示されます。画像を扱うWebサービスなんかと相性がとてもよさそうですね。 [ads_center] 使い方 このようにGoogleで画像検索している時のようなアニメーションを実装することができます。これは便利ですね。 jQuery本体とダウンロードしたプラグインをhead内に読み込みます。 <link rel="stylesheet" href="photowall/jquery.photoWall.css"> <script src="photowall/jquery-1.9.1.min.js"></
レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」 – bl6.jp
レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」がとてもよかったのでご紹介します。指定した要素をクリックするとオリジナルの画像がポップアップして表示されます。一枚ずつ画像を見せることもできるし、画像グループを作ってギャラリーっぽくすることもできます。あと軽量なのも嬉しいですね。画像以外にもテキストやフォームといった色んなものをポップアップすることができます。以下、使い方です。 [ads_center] 使い方 jQueryとダウンロードしたプラグインを読み込みます。 <link rel="stylesheet" href="magnific-popup/magnific-popup.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></
複数カラムをレスポンシブに対応させるjQueryプラグイン「jquery.columns」 – bl6.jp
複数あるカラムをレスポンシブに対応させるためのjQueryプラグイン「jquery.columns」がよさそうだったのでメモがてらご紹介します。迅速にレスポンシブWebデザインにしたい時にはとても役立ちそうです。MITライセンスで、サポートブラウザは、IE8、IE9・10、Webkit、Firefox、Operaとなっています。ちなみにIE8に対応させたい場合にはHTML5とCSS3 Media Queriesに対応させるためのhtml5shivとRespond.jsが必要になるみたいです。 [ads_center] 使い方 jQueryとダウンロードしたプラグインファイルを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jque
WordPressで記事タイトルの文字数制限をするやり方 – bl6.jp
WordPressで記事タイトルの文字数制限をするやり方をメモしときます。例えば、記事の下に関連する記事リストを表示する時やサイドバーに最近の投稿リストを表示させる時なんかに役立ちそうです。レイアウト的にバラバラな記事タイトルの文字数を統一したい時って結構ありそうなので。 [ads_center] 以下のユーザー定義関数をfunctions.phpなどに記述します。 function trim_str_by_chars( $str, $len, $echo = true, $suffix = '...', $encoding = 'UTF-8' ) { if ( ! function_exists( 'mb_substr' ) || ! function_exists( 'mb_strlen' ) ) { return $str; } $len = (int)$len; if ( mb_s
CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方 – bl6.jp
CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に配置させたい時があるかと思います。先日このように配置させなきゃいけない状況になったのでその時のやり方をメモがてらエントリーします。ちなみに今回は二つの要素の幅と高さが決まっている場合と、二つ目の要素の幅と高さだけが決まっていて一つ目は決まっていない場合の2パターンのやり方です。 [ads_center] 二つの要素の幅と高さが決まっている場合 二つ上下に並んでいる要素が共に幅と高さが決まっている場合のやり方です。この場合はpositionだけを使えばいいのでとても簡単です。 HTML <div class="wrap"> <div class="box1">box1</div> <div class="box2">box2</div> </div> .wrap { position: relative; height:
Webサイトの配色を決めてくれる他にもその配色を使ったデモサイトも確認できるジェネレーター「Color Scheme Designer 3」 – bl6.jp
ホーム Web Service Webサイトの配色を決めてくれる他にもその配色を使ったデモサイトも確認できるジェネレーター「Color Scheme Designer 3」 とても便利なジェネレーターを見つけたのでご紹介します。Color Scheme Designer 3というWebサイトの配色を決めてくれるジェネレーターなんですが、ただ配色を決めてくれるだけではなくて、その配色を使った実際のデモサイトも確認することができます。その配色を使うとどういう風になるのか具体的にイメージしやすいのでかなり助かりますね。 [ads_center] 使い方 左側にある色相環からベースとなる好きな色を選択すると、右側にその色をベースにした配色が表示されます。 各色にマウスのカーソルを乗せるとその色の値が表示されます。これだけでも普通に便利ですね。で、個人的に気に入ったのが右下にある「Light pag
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方 – bl6.jp
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方です。レスポンシブWebデザインにも活用できるので覚えておくと役立つかと思います。例えば、画面幅が500px以下の場合にだけ適用したいといったことがjQueryを使えばとても簡単にできるので便利ですね。 width()を使う ウィンドウサイズを取得するにはwidth()を活用していきます。以下は500px以下の場合、文字が赤に変わる例です。 <script> $(function() { var w = $(window).width(); var x = 500; if (w <= x) { $('#sample').css({ color: 'red' }); } }); </script> HTML <p id="sample">サンプル</p> ただし、これだと画面を読み込んだ時点でのサイズで判定されるので、読
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
