WordPressのカスタムフィールドを使って画像を反映させる方法と、その画像にjQueryプラグインによるツールチップを実装する方法 - かちびと.net
題名長くて済みません。他のサイトで行ったカスタマイズを覚書します。WordPressのカスタムフィールドで画像をブログに反映させて、その画像にマウスオーバーすると元画像がツールチップとして実装されるようにする為のチュートリアル。プラグインは使わず、functions.phpで関数を追加します。 ちょっと分かり難いですけど、カスタムフィールドで画像を指定してブログに反映させてその画像をサムネイルで表示、マウスオーバーすると大元の大き目の画像がツールチップで実装されるようにする方法です。 面倒だからプラグインよこせ！という方はGet Custom Field Valuesをお試し頂いては如何でしょう。僕は触った事が無いのでなんとも言えませんが・・ 方法です。functions.php（テーマ関数ファイル）とjQueryを利用します。お使いのテーマで利用していない場合はWordPressのドキュ
jqueryでウェブサイトをリッチにするプラグインまとめ « vanillate
jqueryのプラグインのまとめです。jqueryはjavascriptベースのライブラリのようなもの。画像やメニューに動的な操作を与えたりすることが可能です。また、HTMLソースも複雑になりにくく、デザインをCSSで操作可能なものが多く、ウェブデザインをより魅力的にすることができます。 フェードしながらスライドするjQueryプラグイン デモ jQuery ListMenu Plugin デモ 大量のアイテムもすっきりとリストにできます。 Sliding login panel with jQuery デモ ログインフォームもおしゃれに。常に表示しておく必要はないですよね。アニメーション付きでぶらさがってくるこんなプラグインはいかがですか。 create a better jQuery stylesheet switcher デモ スタイルシートをjqueryで切り替えるプ
[JS]テキストリンクのカラーにフェード効果を与えるスクリプト -Fade colors
テキストリンクのカラーにフェード効果を与えるスクリプトをJanko At Warp Speedから紹介します。 Fade colors using jQuery demo フェード効果は不透明度でコントロールされており、リンクの数でフェードの段階が調整されています。 また、不透明度ではなくRGB値をコントロールする複雑なバージョンもあり、より微妙なカラーを使用することができます。 demo: RGB Fade colorsはjQueryのプラグインのため、実装にはjquery.jsが必要です。 このスクリプトはretweetradarで使用されている、人気が高いものほど強調され徐々にフェードさせたリンクコンテンツにインスパイアを受けて作成したものとのことです。
ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」:phpspot開発日誌
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫：Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例１ 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例２ ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例３ ブラウザ幅に合わせる、がオ
jQueryを使ってCSSを補強するテクニック15 – creamu
Web Developer Plusで、jQueryを使ってCSSを補強するテクニックが紹介されています。 ざっといくつかご紹介。 jQueryでカラムの高さを統一する equalHeights pluginを使って、一行でカラムの高さを同じにする 入力中のフォームをハイライトする highlighting the label along with the selected input fieldを使って、フォームのユーザビリティーを上げるテクニック 角丸 jQuery Curvy Cornersで角丸を実装する メニューの背景をアニメーションさせる メニューにマウスオーバーしたときに、一瞬でhover画像に切り替えるのではなく、ふわ〜っとアニメーションして切り替えるテクニック。例：Create an Attractive jQuery Menu with Fade In and Fade
大量のアイテムもスッキリとリスト形式のメニューにしてしまえる「jQuery ListMenu Plugin」:phpspot開発日誌
大量のアイテムもスッキリとリスト形式のメニューにしてしまえる「jQuery ListMenu Plugin」 2009年10月22日- jQuery listmenu plugin - javascript list navigation menu control 大量のアイテムもスッキリとリスト形式のメニューにしてしまえる「jQuery ListMenu Plugin」 次のように大量のアイテムがあったとしても・・・ ↓↓↓↓↓↓↓↓↓↓↓↓↓ jQuery ListMenu Plugin があれば次のように超スッキリさせることが出来ます。 使い方はいたって簡単で、次のようにコードを書けば最低限実装できます。 $('#demo1').listmenu(); $('#demo1').listmenu( { option } ); で各種カスタマイズも可能です。 日本のサイトとしては日本語が
Linuxに使われる日々 : jQueryを使うコツがよくわからん・・・ - livedoor Blog（ブログ）
Linuxに使われる日々 主にLinux関連の話題中心にお届けしております。 たまに、家族や友達のこと。パソコンのことなど趣味や日々の思い付きを書いてます。 < 生命保険xoopsをインストールしてみた > 2009年06月17日11:36 カテゴリ日記業務連絡（ただの覚書） jQueryを使うコツがよくわからん・・・ My Yahoo!に追加 最近業務でjQueryを使っているんだけど、いまいちjQueryの仕組みが理解できない。 ちなみにjQueryの仕様についてはこちらを参照。 んで、何が理解できないかというと、「$(xxx)」でオブジェクトを取ってきたときの動き。 ふつ〜にjavascriptでHTML中のオブジェクトを参照しようとすると「document.getElementById("hogehoge")」のようにするんだけど、jQueryだと「$(#hogehoge)」でオブ
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」:phpspot開発日誌
縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」 2009年10月21日- Long Dropdowns 縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」 ドロップダウンメニューは限られたスペース内に沢山のナビゲーションを埋め込めるということで便利なのですが、多くなって縦に長くなってしまうと、下のほうのアイテムがクリックしづらくなります。 これを使いやすくしたのが今回のサンプル。 マウスを下に移動すると、少しのマウス移動でメニュー自体が上にニュイーンと上がってきてくれます。 結果的にカーソル移動量が少なくなって使いやすくなります。 最初は驚くかもしれませんが、なれると便利ですし、一番したまでいってもループして戻ってくるという仕様なので、見逃した、という失敗も避けられます。 これは新しい上
[JS]一味違ったアニメーションで表示するドロップダウン型ナビゲーションのスクリプト -nmcDropDown
ナビゲーションにふんわりとしたアニメーションでドロップダウンのパネルを表示するスクリプトをNew Media Campaignsから紹介します。 nmcDropDown: A Drop-Down Menu Plugin for jQuery Example ドロップダウン型ナビゲーションは、リスト要素で実装されています。 スクリプトのオプションでは、トリガーをホバーやクリックにしたり、アニメーションのタイミングを変更することができます。 対応ブラウザは、IE6/7をはじめとする主要ブラウザとのことです。 nmcDropDownはjQueryのプラグインのため、実装にはjquery.jsが必要です。
jQueryを使ってLive Clipboardライクなコピー＆ペースト·Live Clipboard jQuery MOONGIFT
Live Clipboard jQueryはJavaScript製のオープンソース・ソフトウェア。Live ClipboardとはMicrosoftの発表した技術で、予めXMLを埋め込んでおくことでコピー操作をした時に表示されたそのものではなく、整形されたデータをコピーできるようにする技術だ（違っていたらご指摘いただきたい）。 検索結果をコピーすると表計算フォーマットに 発表されたのは2006年03月のことだが、その後実際に使われているというのは聞いたことがない。それをjQueryベースで実現したのがLive Clipboard jQueryだ。Live Clipboard jQueryはWebブラウザ上で表示されているデータではない、整形されたコンテンツをコピーできるようになっている。 サンプルアプリケーションでは画像検索結果を選択してコピーをすると、表計算用にフォーマットされたテキスト
サイトを魅力的にするjQuery10+ – creamu
cats who codeで、サイトを魅力的にするjQueryがいろいろ紹介されています。 いくつかご紹介。 Easy Display Switch with CSS and jQuery ボタンクリックでリスト表示とカラム表示を切り替えられる Turn any webform into a powerful wizard with jQuery 長くて退屈なフォームを、ウィザード形式でStep1〜3のように分けられる Beautiful tag clouds with jQuery and flir タグクラウドをかっこよく見せてくれる Twitter-like login panel using jQuery Twitterライクなログインパネル。↑のキャプチャはこちら Disappearing “Scroll to top” link with jQuery and CSS ページが
ユーザーエクスペリエンスを向上させるjQueryプラグイン7 – creamu
Shiny Blogで、ユーザーエクスペリエンスを向上させるjQueryプラグインが紹介されています。 いくつかご紹介しますね。 iconDock MacのDock風拡大エフェクト Simple Controls Gallery 自動でスライドするイメージギャラリー Flip! 画像をくるっと回転させるプラグイン Select-to-slider スライダーで日付を選択できるプラグイン Flip!とかスライダーでの日付選択が面白いですね。 その他のリストは以下からどうぞ。 7 jQuery Plugins to Really Enhance Users Experience Flashをいろいろと。楽しいですね。次はWPをやらないと。
jQueryを使って簡単実装！かなりカッコいいログインフォーム作成のチュートリアル:phpspot開発日誌
Making A Cool Login System With PHP, MySQL & jQuery ? Tutorialzine jQueryを使って簡単実装！かなりカッコいいログインフォーム作成のチュートリアル。 ページのヘッダーにあるログインボタンを押すと、ニュイーンとログインフォームが降りてくるというカッコいいログインフォームの実装演習になってます。 ログインボタンを押す ヘッダーからそのままログインフォームが降りてきてそこからログイン可能です。 ソースコードのダウンロードも可能です。 関連エントリ ログインフォームのデザイン集１００種 Twitter風のドロップダウンボックスなログインフォーム作成チュートリアル 超クールなログインフォームを作成するチュートリアル
jQueryのAjax機能を使った投票システムのサンプルプログラム:phpspot開発日誌
AJAX User Poll Using jQuery and PHP jQueryのAjax機能を使った投票システムのサンプルプログラムが公開されています データはＤＢに入れる仕様で、次のような投票が実装できるようです。 シンプルなデザインなのでサイトに違和感なく組み込めるかもしれません。 ソースコードの解説記事に加え、ソースコードのアーカイブが入手できます。 改造することも出来るので参考程度に覚えておいてもよいかもしれませんね。 関連エントリ Ajax+PHP+MySQLな投票ウィジェット reddit風のGoodかBadの投票機能実装サンプル jQueryとPHPでダイナミックな投票スクリプトを作成 結果グラフがアニメーション表示のAjax投票システム
各種Webサービスに対応した埋め込みを行う·jQuery Oembed MOONGIFT
jQuery OembedはJavaScript製のオープンソース・ソフトウェア。おそらくYoutubeからはじまったであろう、自分のサイトへのコンテンツ埋め込みの機能。今や写真やプレゼンテーション、動画など様々な外部コンテンツがサイトに埋め込めるようになった。しかしここで問題なのが埋め込むコンテンツの内容が分かりづらいことだ。 各種サービスの埋め込みHTMLを生成する 大抵Flashのタグで囲まれており一般的には難解だ。Embedなどと書かれているがよく分かりづらい。そこで使ってみたいのがjQuery Oembedだ。jQuery Oembedはリンクタグにclass="oembed"を指定すると実行されるjQueryプラグインだ。 例えばFlickrの写真のリンクをURLにしてoembedの指定をすると、写真がサイト内に表示されるようになる。イメージタグを書く必要はない。同様にvime
何時何分何秒の入力を便利にするjQueryプラグイン「jTimepicker」:phpspot開発日誌
jTimepicker - Yet another jQuery time picker plugin. 何時何分何秒の入力を便利にするjQueryプラグイン「jTimepicker」。 時計のアイコンを押すと次のような水平バーが現れてスライドさせることで、selectボックスの値が増加・減少するUIです。 標準のselect は縦方向に長くなりがちですが、このUIであれば横にスライドさせて比較的簡単に時間の入力が出来ますね。 必要なJavaScriptとCSSを読み込んだら、$('#timepicker').jtimepicker(); で初期化することが出来ます。 関連エントリ jQueryを使ったカレンダー型、日付入力補完ライブラリ 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン
jQBinder, ブラウザー側でのHTML templateを可能にするjQuery plug-in
一昨日はMVCの話で妙に盛り上がってしまったが、考えてみるとModel/View/Controller間の分離が不十分という話はサーバー側だけの話ではなく、クライアント側にも言える事。事実、私自身も div.innerHTML = "<span class='red'>" + message + "</span>"; みたいなHTMLが混ざったJavaScriptコードを書く事は良くある。特に、最近はJSONとして取得して来たデータセットをリストとして表示するケースが増えて来たが、そんな時に「サーバー側のようなHTMLテンプレートが使えたらいいな」と思う事は良くある。手っ取り早くとりあえず動くものを作るのにはHTML埋め込み型のJavaScriptで良いのかも知れないが、後々のメンテナンスを考えると少なくともModelとViewぐらいはキチンと切り話しておいた方が良い事は確か。 ということ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]CSSスプライトにアニメーション効果を加えるスクリプト -AutoSprites
フェードしながらスライドするjQueryプラグイン – creamu