jQueryのプラグインをひたすら 紹介するWebサイト、jquer.in をご紹介致します。紹介されて いるプラグインは割と最新の ものが多いようです。 ひたすらjQueryプラグインを紹介するWebサイト。割と最近作られたプラグインばかり紹介してるみたいです。

マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので

マウスオーバーするとフェードインアウトエフェクトでURLに切り替わります。IE6、7では動かないみたいです。 オプションもあるみたい。 ↓　URLの最後の部分をハイライト $("h3 a").hoverAttribute({ removeProtocol: true, removeWWW: true, highlightURLPart: "lastURIPart" });↓　文字数を指定してハイライト $("h3 a").hoverAttribute({ wrapLength: 65, wrapLink: "before", highlightURLPart: "query", });↓　title=””内のテキストに切り替える $("h3 a").hoverAttribute({ attribute: "title" });ほんとIEさえなければ色々出来ますね。デモとダウンロードは以下よ

画像内の任意の箇所に自由にホバーで テキストを表示するツールチップを 配置出来るjQueryプラグイン・iPicture のご紹介。この手のライブラリは、 実務でかなり有効的に使えますので 覚えて置いて損は無いのでは。 画像上にツールチップを配置出来るライブラリです。ECサイトや不動産、ホテル、アミューズメント施設などなど用途は沢山ありそうです。 こういうやつ。画像の上にオブジェクトを配置してマウスホバーで情報が見られる。 ECサイトなんかでは、こうやって生活してる写真にしてあげることでユーザーはプロダクトを使用してるイメージをしやすくなりますので、訴求力アップに貢献できます。 コード<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></s

画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 LightboxLightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。グル

商用可の素材もある、写真やイラスト、 BGMや効果音などを共有できる国内の 素材サイト、ニコニ･コモンズのご紹介 です。利用規約がちょっと独特なので 一つの選択肢として。素材自体が凄く 豊富です。 ニコニコ動画の作成の為の素材共有サイトみたいですね。昨日始めて知りました。 参照：ニコ動の「ニコニ・コモンズ」とは何か？ 一応外部サイトでも商用で利用できる素材もあるみたいです。ありがたや。 キャプチャは写真素材ですが、他にも音源やイラストなどもあります。ライセンスは独自ライセンスをサイトで採用しており、アップロードするユーザーはそのライセンスの範囲内で共有しあう、という感じ。名前はこんなですけど特にクリコモとかでは無いみたいです。 その中で、外部サイトでも商用で利用できるのは「インターネット全体 + 営利利用可」という組み合わせ。または「別途許可が必要」という項目もあります。 ライセンスでフィ

カテゴリがしっかり分けられていて 凄く見やすかったのでご紹介。iPhone やAndroid向けのUIパターンギャラリー です。アプリデベロッパーさんや アプリデザイナー、モバイル向けの デザインの参考にいかがでしょう。 パターンギャラリーはもうすでにいくつもありますけど、ここは特にちゃんと分けてくれているので見やすい印象でした。 左サイドに大まかなカテゴリーがあります。それぞれには更に細かいパターンに分けられています。たとえば、ナビゲーションならリストタイプ、メガメニュー、カルーセル真紀など。 こちらは検索のカテゴリ。検索ボックスや、オートコンプリート、ソート機能付きなどなど。 インビテーション・・・サイトツアーみたいなやつです。こういうのあんまり紹介されてませんよね。 パターンはその場でLightbox風に表示するのでページ推移も必要ありません。 みたいな感じのパターンギャラリーです。

個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき

クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。 なかなか使いやすそうなので備忘録。派手なスライダーが結構多い印象ですが、結局普通のものが一番使いやすいですよね。派手なのもインパクトあって好きですけどｗ 今日のプラグインもクロスブラウザ対応でベーシックな、汎用性のあるスライダーです。コーポレートサイトと相性いいかもですね。 サムネイルがナビゲーションとして付きます。画像のスライドと共にサムネイルもアニメーションスライドします。デモサイトでは1つしかありませんけど、実装出来る形は6種類から選択できます。IE6でもIE7でも問題なく動作しました。※IE6の透過処理は別途必要です。 デザインは6種 例として2つキャプチャ撮り

iPhoneや、BlackBerryなどでのWebサイトの表示をPCで確認出来るシミュレーターです。Air製で無料で使えます。まだ使い始めたばかりなんですが起動も軽く、ユーザーエージェントもそのデバイスごとに設定してくれてるみたいです。 シミュレーター（エミュレーター？よくわからｎ）はいくつかありますが、選択肢の一つとして。WinでもMacでもOKです。完璧ではないですけど、今までで一番良かった気がしました。もともと優れたシミュレーターはまだ無い気がしますしね・・・あるのかな？ｗ 動画あったので貼っておきました。iPhone4は勿論、Plam PreやBlackBerry、HTCなど4種のデバイスを同時に確認出来ます。ローカル上のHTMLも動作確認出来ますよ。Airアプリなので動作にはAdobeAirが必要です。 4つ同時に起動可能 日本なら、基本的にiPhoneとAndroidだけあれば

昨日TwitterでもPostしたんですけどやっぱり たまに使いそうなのでメモ。数値を設定する だけで簡単にシンプルなグリッドを重ねる事 が出来るWeb屋さん向けのjQueryプラグイン・ Simple Gridです。いちいち拡張やブックマー クレット使うのも面倒ですしね。 制作中のサイトにこのプラグインを入れるだけでグリッドを表示できるので場合によっては手間が省けるかもしれません。オンオフも簡単に切り替えられるのもメリットです。 こうしてグリッドを重ねられます。微調整で結構時間取られるので楽っちゃ楽かも。 グリッドの調整は簡単で、jQueryとプラグインを読み込んで下記のように設定するだけです。 <script type="text/javascript"> $.simpleGrid({ rowHeight: 20, columnWidth: 30, gridWidth: 960 });

題名がやや謎ですが・・・ブログの過去 記事を、新聞のテレビ番組表のような レイアウトで表示するWPプラグインです。 アーカイブをじっくり探せるように、見や すいレイアウトにするのはコンテンツに よっては大きなユーザビリティとなりそう です。 結構使われているのかもしれませんけど、僕は最近まで知らなかったので一応ご紹介。覚えておいて損は無さそうです。もちろん、IE6や7でも動きます。 アーカイブをこんな感じで表示してくれます。テレビ欄っぽい。画像は投稿の最初の画像を自動で取得してくれるみたいです。 このようにクリックで開閉するタイプも選べます。こちらもスマートでいいかもしれませんね。 テスト環境に入れた際のキャプチャです。見出しになっている月をクリックすると全部開きます。 管理画面です。画像も用意してくれていますし、そう困る部分は無いかなと思います。 使い方デモがありますので導入前に見てみて

個人的に気に入ってよく使っている、又は いつか役に立ちそう、いずれ使いたい的な Lightbox風に拡大実装出来るjQueryプラグ インのまとめです。使うときにいちいち引っ 張り出しているのが面倒なのでまとめにして ついでにシェアしようと思って記事にします。 オーソドックスなものから、やや特徴的なもの、Twitterで「こんなのない？」って聞かれて探したものなど10個厳選です。特徴も一緒にメモしておきます。 なお、画像を使うjQueryプラグインにご興味が有るようでしたら、以前書いた画像を使ったいろいろなjQueryプラグイン224個まとめも参考にして頂けるかと思います。 colorbox 一番よく使っているかもしれません。MITライセンスで、グループ化⇒スライドも可能。また、iPhone、iPadでも動いて表示も崩れません。エフェクトも変更可能で、YoutubeやIframe、Flas

ポートフォリオやギャラリーに良さそう なWordPressテーマ・Dioneのご紹介。 いくつも存在しますが、いくつ覚えて おいても損は無いですよね。こちらは 動画と画像をLightbox風にポップアップ させる事が出来ます。広告の管理も しやすいようになっています。 ギャラリー系テーマは沢山ありますが、こちらは縦長の画像に適しています。 シンプルデザインはギャラリーテーマで定番ですね。管理もしやすいように出来ています。 IETesterでのIE6です。フッターが崩れるのと、ヘッダが通常はfixされているのが効かないだけで表示は概ねOKです。フッタはcssを調整して直してください。 Dioneの使い方 Dioneはカスタムポストタイプでの投稿がメインとなります。テーマを有効化すると上記のように専用の投稿項目が出ます。 動画を表示させたい場合はTrailer video項目にURLを入れてく

なるほどと思ってエントリ。マウスオーバー でツールチップを表示させるjQueryプラグ インは沢山ありますが、表示時のデザイン を変えるには、多少なりにライブラリの知識 を必要とする場合も多々あります。これを 非プログラマでも変更しやすくした、というもの。 Webデザイナーさん向けのjQueryプラグインのようです。Tooltipsyには以下のように書いてありました。 Tooltip plugins make it too difficult to control the CSS. So I created tooltipsy to simply provide extremely efficient tooltip functionality. Tooltipsy gives you complete control over the CSS, animation, and positi

Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。jQuery

人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本

いよいよ2011年がスタートしました。 今年も去年同様、勉強することが 沢山あります。まだモチベーションが そこそこあるうちに勉強になりそうな 国内の記事をリンク集にしました。 迷ったときに見てみようかなと思い ます。 より最適な方法というのはあると思いますが、まずは扉を叩かない事には何が悪いかも分かりません。ということで、内容に拘らず、否の意見をスルーしてここに色々まとめさせて頂きました。 勉強したい気持ちはあるけど出来ない理由は「何を始めればいいのか分からない」という方も、何が出来るのか、どういった勉強法で出来るようになるかが分かればやる気が起きるかも知れません。 5分で分るシリーズ以前も流行ったんですね。Web関連以外も含めてここにまとめられています。 5分で分かる PHP を知らない人が PHP の便利さを学べる記事を書いたよ5分でわかる Ruby を知らない人が Ruby の便利

Webデザインのギャラリーは沢山 ありますが、結局感性の近い国産 のギャラリーが一番参考になるの でまとめました。探してみると結構 いろいろあるんですね。助かります。 やはりギャラリーは国産がいいですね。沢山あるので、ある程度厳選しています。 io3000 最近知りました。すごくいいですね、ここ。見やすいし、使いやすいです。おすすめ。 io3000 straightline bookmark とにかくクールでクオリティの高いサイトをブックマークしているギャラリー。 straightline bookmark Web Design Clip こちらも個人的にオススメのギャラリーサイトです。目的のデザインも直ぐに見つかりますよ。 Web Design Clip Good Design Web こちらは他ではあまり見かけない良デザインのサイトを紹介してる貴重なギャラリーです。 Good Desi

探すの面倒なのでまとめてある 記事をまとめます。タイプ別とか 色々な形式でまとめてくれている のは個人的にありがたい。一応 無料で手に入るテーマに絞って います。 探すの面倒なのでまとめてある 記事をまとめます。タイプ別とか 色々な形式でまとめてくれている のは個人的にありがたい。一応 無料で手に入るテーマに絞って います。 というわけでまとめのまとめです。当然重複しているテーマもあるのでご了承下さい。量が多いので重いです。 総合的な感じのまとめ記事クオリティが高いテーマのまとめとか、とにかく集めた！みたいな感じのまとめ記事いろいろ。 40 Free High-Quality WordPress Themes クオリティの高いフリーのテーマ40個 Link:40 Free High-Quality WordPress Themes 40 FREE PREMIUM-QUALITY WORDP