WordPressのトップページを雑誌や新聞のような段組にする方法
WordPressのブログは一般的に記事タイトルと記事の概要が単純に縦に並ぶだけですが、jQuery Masonry という jQuery プラグインを使用すると、このブログのトップページのように雑誌や新聞のような段組で記事一覧を並べることができます。 jQuery Masonry は WordPress 用に作られたわけではありませんが、WordPress テーマに組み込んでトップページ等で使用することができます。 ただ、公式のドキュメント通りに JavaScript を書いただけでは WordPress テーマではうまく動かないので、やり方をここにまとめておきます。 ここでは、WordPress 3.3 のデフォルトテーマ「TwentyEleven」をベースに解説します。 準備 まず jQuery Masonry 公式サイト のページ中央にある「Download the script
jQueryでモーダルウィンドウを作成。 | Almondlab
（追記／2011.12.02）ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。 jQueryを使ってモーダルウィンドウを作成します。ウィンドウに表示するコンテンツはjQueryのAjaxで読み込むようにしています。 サンプルはこちら <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link
jQuery初心者向けの基礎をしっかり学べるサイト
【ｊQueryって何からjQueryの基本まで】... / 【jQueryの使い方から動作デモまで】jQue... / 【jQueryでのアニメーションからイージングま...他...全6件
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
JQUERYでDatepickerを使ってカレンダー入力補助
JQUERYでDatepickerで入力補助をするときの手順 今回は同一ページの複数のテキストフィールドにカレンダーを表示できるようにする http://jqueryui.com/themeroller/ の「Gallery」タブからカレンダーのデザインテンプレートを選ぶ。 「Roll Your Own」タブで細かいデザイン設定。 「download」ボタンを押してダウンロードする内容を選択。 今回は[Core]と[Datepicker]のみを選択。 現時点での最高バージョンの1.8.6を選択して「ダウンロード」ボタンを押してダウンロード。 最低限必要なファイルは ■JSファイル ・jquery-ui-1.8.6.custom¥js¥jquery-1.4.2.min.js ・jquery-ui-1.8.6.custom¥js¥jquery-ui-1.8.6.custom.min.js ・¥
jQuery datePicker をインライン + 複数選択で使う - yuumi3のお仕事日記
仕事で複数選択できるカレンダーが必要になり、jQuery プラグインの datePickerを使ってみましたが、バグなのか中々うまく行きませんでしたが何とか動くようになりました。 jQueryプラグインのカレンダー(date picker)は幾つかありますが、複数選択できそうなのは datePicker だけのようです(他にあるんかも？) ただし、datePickerをインラインで使うと、データ追加後の再表示でカレンダーのヘッダー部分が残るバグがありました。 これは、カレンダーのdivをempty()にする事で回避できましたが、未だにJavascriptには不慣れなのでだいぶ時間を使ってしまいました ^^); それ以外にも、選択した日付の取得で、たまに NaN が取得されるなどの問題もあります。なぜかなぁ・・・・ 出来たサンプルコード 選択した日付を cookieに保存するようになっていま
アルファシス – alphasis.info -
カテゴリー別アーカイブ JavaScript (2,265) リファレンス (1,050) Hello World (3) 基本構文 (8) 変数 (13) 定数 (2) データ型 (5) リテラル (13) 文字列リテラル (4) 配列リテラル (3) オブジェクトリテラル (3) 演算子 (52) 制御構造 (65) if (5) switch (4) while (6) do-while (6) for (10) for-in (8) for each-in (6) break (6) continue (5) debugger (1) function (1) return (1) var (1) with (1) try-catch-finally (3) throw (1) ユーザー定義関数 (21) ユーザー定義オブジェクト (10) 組み込み関数 (10) 組み込み定数 (
投稿に日付欄を追加してjQuery UIのDatepickerでカレンダーから入力する
「臨時休業のお知らせなどを投稿する時に、休業期間を指定すると営業日カレンダーに反映される」という案件の場合、WordPress では期間（日付）の管理にカスタムフィールドを使うことになるでしょう。でもこのカスタムフィールドは見栄えがアレだしクライアント様にお使いいただくには気が引ける。そんな時はオリジナルなメタボックスを追加すれば解決です。 そんなようなプラグインはいくつもありますが、この程度なら functions.php にちゃちゃっと書く方が自由で快適。ついでに日付なら「2010/01/28」なんて書式を気にせず簡単入力できるように jQuery UI の Datepicker を使いましょう。 さらに、投稿は「臨時休業のお知らせ」だけじゃないので、当該カテゴリ選択時のみメタボックスを表示するようにするとユーザビリティとしてはドヤ顔できるレベルかと思われます。 「営業日カレンダーに反
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」:phpspot開発日誌
リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」 2009年12月21日- リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」。 普通、JavaScript で動くWYSIWYGエディタというと、大きなツールバーがついていて、それ自体はカッコいいのですがページデザインにうまく馴染ませることが難しかったりします。 wkrte なら、エディタにカーソルがフォーカスしない状態だとツールバーを表示せず、普通のテキスト領域（textarea）のように表示させられます。 何もはいってない状態だと、一見普通のtextareaです 内容が入ってもツールバーがないので目立ちすぎず、いい感じです。 カーソルを合わせるとツールバーが表示。これはとてもスマートですね。 高機能なテキスト編集を実現しつつ、ペ
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
連載インデックス「CSSの書き方も分かるjQueryプラグイン実践活用法」 - ＠IT