はてなブックマークでタイトルを一覧表示するブックマークレットを作りました。 １．作った理由 2013年1月8日、はてなブックマークのデザインがリニューアルされました。 リニューアル前 リニューアル後 個人的に、はてなブックマークを読むときは、「人気エントリー一覧」のページをスクロールしながらタイトルだけをざっと見て、読みたいと思ったものを別タブで開いていき、あとでそれらをゆっくり読む、というスタイルをとっています。 リニューアル後は、ページに表示されるタイトルの数が減ってしまっていて、スクロール量が増えました。 また、順序なしリストをinline-blockで横並びになり、タイトルだけの表示もできないようなので、タイトルを追うための視線の移動が以前より大きくなりました。 ２．ブックマークレット ということで、タイトルを一覧表示するためのブックマークレットを作ってみました。 一覧表示 上のリ

jQueryでセレクトボックス（プルダウンメニュー）のテキストを取得する方法を紹介します。 １．問題点 次のようなセレクトボックス（プルダウンメニュー）を用意します。 HTML <select id="foo" name="foo"> <option value="aaa">xxx</option> <option value="bbb">yyy</option> <option value="ccc">zzz</option> </select> jQueryを使ってセレクトボックスを変更したときに値「aaa」「bbb」「ccc」を取得するには、次のように記述します。 jQuery(function() { jQuery('#foo').change(function(){ var data = jQuery(this).val(); alert('セレクトボックスの値は「' + dat

WordPressで前後記事の一覧を出力する「wp_previous_next_post_linksプラグイン」を公開します。 １．機能 現在の記事の直前または直後の記事情報を出力するには、previous_post_link()タグまたはnext_post_link()タグを使えばいいのですが、たとえば「現在の記事の前後5件ずつの記事を表示」といった場合、このテンプレートタグでは実現できません。 本プラグインを利用すれば、スクリーンショットのような現在の記事の前後記事のリストを出力することができます。 記事「test6」の前後記事を最大5件表示（test1が最も古い記事、test11が最新記事） 記事「test5」に移動した前後記事一覧の表示 記事「test7」に移動した前後記事一覧の表示 プラグインの動作はWordPress3.5で確認しています。古いバージョンでは正常に動作しない可能

レスポンシブWebデザイン対応のWordPressテーマの配布を開始します。 １．レスポンシブWebデザイン対応 今回配布するテーマでは、レスポンシブWebデザイン対応として次の6つのレイアウトを提供します。カッコ内の英文字はカラムレイアウトを切り替える文字列になります。カラムレイアウトの変更方法については６項で解説します。 3カラム固定レイアウト（layout-three-column） 3カラム固定レイアウト・右サイドバー（layout-three-column-right） 2カラム固定レイアウト・左サイドバー（layout-two-column-left） 2カラム固定レイアウト・右サイドバー（layout-two-column-right） 3カラムリキッドレイアウト（layout-three-column-liquid） 3カラムリキッドレイアウト・右サイドバー（layout-

jQueryを使って、既存サイトの画像を遅延ロードっぽく見せる方法、いわゆる「なんちゃって遅延ロード」について紹介します。 昨日エントリーした「画像を遅延ロードする定番jQueryプラグイン「Lazy Load」」ですが、投稿済み記事の画像に対して設定をひとつひとつ変更するのは現実的に厳しいと思われます。 とはいっても、他のサイトでページをスクロールすると画像がふわっと浮かび上がるアクションには憧れます。 ということで、既存サイトの画像を遅延ロードっぽく表示させる方法を考えてみました。 １．「なんちゃって遅延ロード」と称する理由 「なんちゃって遅延ロード」と称する理由は、ページをスクロールしたときの表示は遅延ロードされたようにみえますが、最初から遅延ロードの設定をしていないimg要素はページロード時に画像が先に読み込まれてしまうためです。 下のスクリーンショットは、遅延ロードの設定有無によ

画像を遅延ロードする定番jQueryプラグイン「Lazy Load」を紹介します。 １．概要 jQueryプラグイン「Lazy Load」を使って画像を遅延ロードさせることで、ページロード時のHTTPリクエストを減らすことができます。 以前、「Lazy Load」を使っても新しいブラウザではHTTPリクエスト回数が減らない問題があったようですが、2012年11月現在は改善されています。 参考：HTML5時代のjquery.lazyloadは画像のdata-original属性を使う 改善後の仕組みは、img要素のsrc属性にダミーの画像ファイルを指定しておき、ページロード後にスクロールによってimg要素が表示領域に入った段階でdata-original属性に指定した画像を読み込みます。 <img src="grey.gif" data-original="foo.jpg" width="6

CSSでoption要素を非表示にするときの不具合について紹介します。 タイトルでは「不具合」としていますがブラウザの仕様かもしれません。認識誤りでしたらどこかでつぶやいてください。 １．option要素を非表示にするケース フォームの動作によっては、option要素の一部を非表示にしたい場合があると思います。 たとえばフォームに2つのselect要素があり、1つめのselect要素を選択した結果によって2つめのselect要素のoptionの表示を変更したいときなどです。 このエントリーでは事象の紹介だけにとどめ、解決方法は別エントリーしたいと思います。 ２．サンプル 事象を発生させるサンプルを作りました。 サンプル サンプルでは次のHTMLマークアップを用いています。 <select name="foo"> <option value="" selected="selected">-選

ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記：イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記：イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 １．使い方 本エン

PayPalアカウントを利用されている方には、2012年の4月頃からPayPalからメールで本人確認の通知が順次届いていると思います。 本人確認が必要な理由は、PayPalが新たに「資金移動業者」として事業を展開していくにあたって「犯罪による収益の移転防止に関する法律」に基づき、本人確認を行うことが義務付けられているためです。 ということで、私にもPayPalから本人確認の連絡がきました。意外に面倒だったので、このエントリーで実際に行った作業をまとめておきます（2012年11月時点でまだ完了していませんが）。 なお、PayPalを支払いだけに利用している方は不要のようで、支払いを受け取る人だけが本人確認が必要なようです。 １．本人確認手順 本人確認を行う手順は以下の2つのみです。 ステップ1：本人確認書類をPayPalに提出（アップロード）する ステップ2：本人確認書類確認後、PayPal

画像の一部をズームアップできるjQueryプラグイン「jqZoom」を紹介します。 jqZoom １．概要 Amazonをはじめとする、オンラインショッピングサイトですっかり定着した機能として、画像のズームアップがあります。商品の質感やディテールなど、念入りに確認したいときに大変重宝します。 本エントリーで紹介するプラグインを利用すれば簡単に設置することができます。 画像ズームアップのプラグインはいくつか出回っているようですが、元画像を単に拡大するものが多く、商品の質感やディテールを見せるものとしては実用的ではありません。 その中でjqZoomプラグインは、元画像と別にズームアップ用の大きな画像を用意できるので使い勝手がいいと思います。また豊富なオプションも用意されています。 ２．サンプル サンプルを作りました。 もっともシンプルなサンプル サムネイルで切り替えられるサンプル ということで

ご存知の方も多いと思いますが、jQueryでセレクタを複数指定する方法を紹介します。 １．セレクタを複数指定する jQueryでセレクタを複数指定するには、セレクタを次のようにカンマで区切ります。 HTML <h1>foo</h1> <h2>bar</h2> <h3>hoge</h3> jQuery $('h1, h2, h3').css('font-size','20px'); 適用前 適用後 セレクタには、要素セレクタ・IDセレクタ・classセレクタなど、異なる種類のものを設定することももちろんできます。 HTML <div id="foo"> <p>aaa</p> </div> <div> <p class="hoge">bbb</p> </div> <div id="bar"> <p>aaa<span>bbb</span>ccc</p> </div> jQuery $('#foo