知ってた？ AndroidのDaydreamモード、ウィジェットを追加するとかなり便利！

Android：Android4.2から追加された「Daydream」モードは、数ある機能の中でも活用頻度はあまり高くないかもしれません。『Dashclock』はDaydreamモードを便利に生まれ... 続きを読む

参照元記事：ライフハッカー［日本版］ http://www.lifehacker.jp/

AndroidからiPhoneに変えて真っ先に入れた44のアプリ

元々iPodだけは買い続けていたのですが、不思議な事にMacBookAirを買ってからというもの、チャットワークさんのキャンペーンでiPad mini が当たったり、ついにはdocomoからiPhoneが発売されるなど、....MORE

AndroidからiPhoneに変えて真っ先に入れた44のアプリ is a post from: Maka-veli.com

参照元記事：Maka-Veli .com http://maka-veli.com

フリップエフェクト付きのローディングインジケーターを実装するスクリプト・Flipload.js

フリップ（引っくり返す）エフェクト付きのローンディングインジケーターを実装する、というライブラリのご紹介です。目立つのでロード中というのをしっかり明示できそうです。 フリップさせる要素もいろいろと対応してるみたいです。非 [...]

• Post by かちびと.net


• PR:WPデザインギャラリー


• 一輪バイク・・・


• 2010年・今年ブックマークした様々な動画・17本まとめ


• 自動でサイズを伸縮できる食卓用の丸テーブル「Capstan Table」結構かっこいい

参照元記事：かちびと.net http://kachibito.net

最近気になったソーシャルアイコンセット #3

ここ最近で気になったソーシャルアイコンセットのまとめです。



参照元記事：NxWorld http://www.nxworld.net

フォトショップをもっとよく知ろう！カウントツール編

フォトショップのカウントツールの使い方について紹介します。



参照元記事：Web Design Library http://www.webdesignlibrary.jp/

レスポンシブWebデザイン対応のグリッドレイアウト向けコンタクトフォームを構築する為のCSSフレームワーク・Grid Forms

RWD対応のグリッドレイアト向けフォームを作る為のCSSフレームワークのご紹介です。表題のとおり用途はある程度限定されますが、覚えておいて損は無さそうです。 フレームワークと言っていいかどうか分かりませんが本サイトにそう [...]

• Post by かちびと.net


• PR:WPデザインギャラリー


• 複数並べられたコンテンツをまとめてスライドさせるjQueryプラグイン・Grid Slide Plugin


• 美しいフォームデザインを実装する事が可能なjQueryプラグイン・Ideal Forms


• 制作中のWebサイトにシンプルなグリッドを表示させる制作補助系jQueryプラグイン・Simple Grid

参照元記事：かちびと.net http://kachibito.net

jQuery：スクロールで表示されるページトップの実装方法

数多くのサイトで実装されているのを見かける、ページを一定量スクロールすると出現する「このページの先頭へ」のようなページトップを実装する方法を紹介します。このブログでも実装しているのですが、同じような動きを実装したいというお問い合わせをいただいたのでその方への回答も兼ねて、動きが被っている感じですが全7タイプの実装方法を紹介します。



参照元記事：NxWorld http://www.nxworld.net

Deal of the Week: Flaterrifics: Flat Minimalist Illustrations and Icons – only $8!

Visuals can make all the difference on a website. And unlike glossy, bevelled and embossed images of recent years, the latest trend is all about being flat. Bright but muted colors. A simple minimalistic approach....

Deal of the Week: Flaterrifics: Flat Minimalist Illustrations and Icons – only $8!

No related posts.

参照元記事：Speckyboy Design Magazine http://speckyboy.com

10 Free UI Kits

It has been almost a year since we last talked about free UI kits. The wait is finally over, because today we have put together ten of the latest and greatest CSS UI kits. Hope...

10 Free UI Kits

Related posts:

1. The Blueprint Framework – Tutorials, How-to Guides and Tools


2. 25 Tutorials and Resources for Learning jQuery UI


3. 10 jQuery Plugins for Google Maps

参照元記事：Speckyboy Design Magazine http://speckyboy.com

【最新版】Google Analyticsチートシート完全マニュアル（日本語解説付）

星の数ほどあるGoogleアナリティクスのカスタム設定。「いつかやってみよう！」と思いながら忘れてはいませんか？ 今回はそんな方のために、今すぐ使えるGoogle Analyticsカスタム設定のチートシートをご紹介。困った時にもサッと使えるよう印刷して持って [...]



参照元記事：Find Job ! Startup http://www.find-job.net/startup

Photoshop内から膨大な数のアイコンを検索できる『BlendMe.in』

CS6&CC限定なのであれですが、Photoshop内からアイコンを検索できるプラグインがあるようですね。便利そう。 ↑ アイコン、よく使いますからねぇ・・・（使うときにはライセンスに注意しましょう）。 ↑ ちなみにサイト上でデモを試すこともできます。 Photoshop、CS3ぐらいを1万円ぐらいで売らないかなぁ・・・。デザイナー以外でSubscriptionはちょっとつらい・・・。 » BlendMe.in Photoshop Extension – Browse thousands of Icons, Vectors and other assets directly from Photoshop



参照元記事：IDEA*IDEA http://www.ideaxidea.com

完璧に分かる！「google アナリティクス」の得する設定と使い方まとめ３１

毎月、ECサイトや情報サイトなどアクセス解析保守を9社ほど作らないといけません。ここらでおさらいを兼ねて、Googleアナリティクスを扱ううえで必要なことを整理しようと思います。今回は成果を上げるうえで「知らないと損する… read more →



参照元記事：コムテブログ http://commte.net/blog

Googleプラスの投稿をサイトに埋め込んでみた

先日、Googleプラスのプロフィールとページの Google+ バッジ（フォローボタン）が新しくなったのですが、今度はTwitterのように、Googleプラスの投稿を記事に埋め込めるようになっていました。 操作も簡単で、投稿を引用するのにも便利そうなので、早速試してみました。 Google Plusの投稿を記事に埋め込む 「Google+ Embedded Posts」は、Googleプラスに投稿された内容を、ブログやサイトに埋め込むことができる機能。 投稿を引用したいときなどに手軽な操作で記事内に埋め込みできるのが特徴です。 投稿の埋め込みサンプル たとえば、このような興味深い投稿を、記事に埋め込んで表示させることができます。 投稿にコメントが付いている場合、その情報も表示されますし、ここから直接投稿に対するコメントや「＋１」をすることもできます。 埋め込みの手順 埋め込みの手順は非常にシンプルです。 ↑まず気になるGoogleプラスの投稿の右上にある矢印をクリックしてメニューを開き、「投稿を埋め込む」をクリックします。 ↑すると埋め込み用のタグが表示されるので、これをコピーして、表示させたい場所に貼り付けます。 すでにサイトにGoogleプラスのバッジや+1ボタンを表示させている場合、 <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> の部分は不要になります。 興味がある方はGoogle+から試してみてください。

おすすめの関連記事

1. めっちゃ綺麗な無料デスクトップ壁紙をゲットできるスライドショー


2. Googleブック検索のプレビューデータをブログへ貼れるようになった


3. Googleのかんたんグラフ作成API「Google Charts」を試す

参照元記事：WEBマーケティング ブログ http://web-marketing.zako.org

デザインに立体表現を取り入れるときのセオリー×6

iOS7の登場で、フラットデザインへの関心はますます高まっていることでしょう。 ここではそんなトレンドは一切無視して、UIデザインにおける立体表現を行う上で、おさえておくべき大切なポイントをま...さらに見る



参照元記事：sogitani.baigie.blog http://sogitani.baigie.me

文章内の任意のテキストのみ、内容をアニメーション付きでローテーションさせるスクリプト・Simple Text Rotator

文章内のテキストをアニメーションエフェクト付きで別テキストに変更、ローテーションで回せるというスクリプト。利用シーンはある程度限られますが、訴求力の向上に役立ってくれるかもしれません。 文章内の任意のテキストをローテーシ [...]

• Post by かちびと.net


• PR:WPデザインギャラリー


• 制作中のWebサイトにシンプルなグリッドを表示させる制作補助系jQueryプラグイン・Simple Grid


• グリッドレイアウト向けのシンプルで軽量なレシポンシブWebデザイン用CSSフレームワーク・Simple Grid


• ショートコードで文中に脚注を加えるWordPressプラグイン・Simple Footnotes

参照元記事：かちびと.net http://kachibito.net

苦手を克服！効果的なフォームが簡単に作れてしまうツールやテンプレートまとめ

こんにちは。デザイナーのハルエです。 最近涼しくなってきましたね。私は自分があまり風邪をひかないせいか、「健康 [...]

The post 苦手を克服！効果的なフォームが簡単に作れてしまうツールやテンプレートまとめ appeared first on 株式会社LIG.

参照元記事：株式会社LIG http://liginc.co.jp

[WordPress] Popular Postsをテンプレートタグを使って実装する

簡単で高機能！デザイナー必見の汎用性が高いjQueryプラグイン7選

こんにちは。デザイナーのせいとです。 最近、いろんな先輩方から「お前服だっせえな」と言わるので、ファッションの [...]

The post 簡単で高機能！デザイナー必見の汎用性が高いjQueryプラグイン7選 appeared first on 株式会社LIG.

参照元記事：株式会社LIG http://liginc.co.jp

配色決めに！ 調和のとれたカラーパレットを作成してくれる「Paletta」

「Paletta」は色を1つ指定すると、調和のとれた色を集めてカラーパレットを作成してくれるサイトです。ウェブサイト制作の際などに役立ちそう。 以下に使ってみた様子を載せておきます。... 続きを読む

参照元記事：ライフハッカー［日本版］ http://www.lifehacker.jp/

[書評]「本格ビジネスサイトを作りながら学ぶ WordPressの教科書2 スマートフォン対応サイト編」

本格ビジネスサイトを作りながら学ぶ WordPress の教科書2 [スマートフォン対応サイト編]に寄稿させていただきました。 1.本書に関して 2.本の構成 3.WordPressについて思うこと 4.WordPres […]



参照元記事：YATのBLOG » YATのBLOG http://wp.yat-net.com

プログラムができない僕でもWebサービスが作れる！WordPressプラグイン30選

プログラマじゃなくても簡単にWebサービスが作れる時代です。今回は手軽にWebサービスを作るためのWordPressプラグインをご紹介します。WordPress熟練者の方向けのワザありプラグインもエントリの後半で取り上げます。 ノンプログラマにこそ読んでほしい [...]



参照元記事：Find Job ! Startup http://www.find-job.net/startup

シンプルで使いやすいレスポンシブWebデザインの確認ツール・Dimensions

シンプルで使いやすいRWDの表示確認ツール・Dimensionsのご紹介です。Chromeエクステンションもあるみたいですね。ドラッグで動かせるのは楽で良いです。 よくある確認ツールです。手軽で自分好みだったのでメモがて [...]

• Post by かちびと.net


• PR:WPデザインギャラリー


• Webサイトのツアーをハイライトを使って実装するシンプルなスクリプト・tour.js


• HTML5の動画上に字幕や、デザイン変更可能なツールチップをキャプションっぽく埋め込めるライブラリ・BubblesJS


• クリックで複数のモックアップ間を行き来できるようにして、フィードバックを募る事が出来るWebサービス・ClickDummy

参照元記事：かちびと.net http://kachibito.net

私がよく使っているWebサイト作成に役立つブックマークレット

個人的にお世話になっているウェブサイト作成に役立つブックマークレットを8つ紹介します。1つでも新しい発見があればと思います。



参照元記事：Webpark http://weboook.blog22.fc2.com/

CSSだけで作るamazon風な縦型メガメニュー

先日、「CSSだけで作る動きのあるドロップダウンメニュー」という記事のコメント内で、amazonのようなメガメニューをCSSだけで作れないのかというコメントいただきましたので作ってみました。



参照元記事：Webpark http://weboook.blog22.fc2.com/

フラットなデザインの配色に悩んだときに使えるツールや参考になるサイト

フラットデザインは配色が重要といわれています。カラフルなものやレトロなものなどありますが、どれも独特の色使いです。



参照元記事：Webpark http://weboook.blog22.fc2.com/

ついつい押したくなる、CSS3を使ったラジオボタンのデザイン

フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。



参照元記事：Webpark http://weboook.blog22.fc2.com/

カスタマイズ性の高いカレンダー機能が実装出来るjQueryプラグイン『CLNDR.js』

「サイトにカレンダー機能付けて！」って時って、意外と悩みませんか？Wordpress何かで作る時はプラグインで対応しますが、CMS無しで、ランディングページ的なの作って的な案件の時は、まーなんだかんだよく迷う。Googl […]



参照元記事：バンクーバーのうぇぶ屋 http://webya.opdsgn.com

私がよく使っているWebサイト作成に役立つブックマークレット

個人的にお世話になっているウェブサイト作成に役立つブックマークレットを8つ紹介します。1つでも新しい発見があればと思います。



参照元記事：Webpark http://weboook.blog22.fc2.com/

Weekly Design News (N.201)

This is our weekly design news column where we share our favorite design related articles, resources and cool freebies from the past week. Enjoy :) Conditioner.js Conditioner.js is Javascript library for loading and unloading behavior...

Weekly Design News (N.201)

No related posts.

参照元記事：Speckyboy Design Magazine http://speckyboy.com

みんなが知らないGoogle Analyticsの裏技！いつもの画面でSEO順位を表示させる方法

毎日気になる検索順位データ、Google Analyticsを使えば簡単に分かってしまいます。高価なツールを使わなくてもいいんです！ 今回の記事では、その設定術を公開します。日々の解析に使ってみてください！ 既にある！なのに使えない検索クエリレポート 旧アナリ [...]



参照元記事：Find Job ! Startup http://www.find-job.net/startup

Blogger ブログに従来のコメント欄と Google+ のコメント欄の両方を表示する方法

参照元記事：クリボウの Blogger Tips http://www.kuribo.info/

Weekly Bookmarks #37

2013年9月9日～9月15日までで、個人的に覚えておきたいエントリーやTwitterなどを通してシェアしたエントリーのまとめです。



参照元記事：NxWorld http://www.nxworld.net

SEOに関するくだらない質問にはもう飽き飽きだ。なぜなら…… 【海外＆国内SEO情報ウォッチ】

「海外&国内SEO情報ウォッチ」を更新。今週は、『SEOに関するくだらない質問にはもう飽き飽きだ。なぜなら……』、『トップページへのパンくずリストのリンクにキーワードを入れるべきか』、『えっ！ DMOZからのリンクもNGなんですか！？』など10記事+4記事。

- SEOに関するくだらない質問にはもう飽き飽きだ。なぜなら…… 【海外＆国内SEO情報ウォッチ】 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM

参照元記事：海外SEO情報ブログ - 海外のSEO対策で極めるアクセスアップ術 http://www.suzukikenichi.com/blog

もうCSS設計で悩まない！「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選

構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディング ガイドライン」策定のための参考記事を紹介します。チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。



参照元記事：SQUEEZE » Blog http://squeeze.jp

hr要素のデザインサンプル 12

hr要素は罫線を表示させるもので、話題を変える時の目印となる区切り線などとして用いられます。どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。



参照元記事：NxWorld http://www.nxworld.net

デザインの参考になるサイトを見た時に、スキルアップのために注目しているところ色々。

先月ギャラリーサイトのまとめ記事を書きましたが、最近ほんとに増えましたよね。人が作ったサイトを見るのは楽しくて、ついつい毎日新しいものを探しています。人が作った素晴らしいサイトを見ては、自分との差を感じてしまいがちですが […]



参照元記事：Handy Web Design http://handywebdesign.net

デザインが死ぬほどはかどるIllustratorショートカットキー15個

IllustratorにはPhotoshopには無い、便利なショートカットがたくさんあります。 今回は、デザインをするのに知らないと絶対損するIllustratorショートカットキーをまとめます。 文字入力に関するショートカット Opt＋←　文字間隔を詰める（ [...]



参照元記事：Find Job ! Startup http://www.find-job.net/startup

Google+の一般公開投稿をブログなどへ埋め込むコードが公式で発行できるようになった

参照元記事：見て歩く者 by 鷹野凌 http://www.wildhawkfield.com/

Google+がブログなどに埋め込み可能に。WordPress/Typepadとの連携も

Twitter や Facebook ではすでにできていたように、Google+ も投稿されたポストをブログなどに埋め込み可能になりました。 Facebookが知り合いとのつながりを重視するのに対して、Google+は写真や動画といったコンテンツのシェアを通してつながりが生まれるのを重視している傾向がありますので、この機能はコンテンツをさらに流通させるうえでも必須でした。 少しだけ面倒な埋め込み方法 投稿を埋め込むには、Google+ の投稿の上部にあるドロップダウンメニューを利用して、そこから「投稿を埋め込む」を選択します。 どうも、あらかじめ head か body 付近に Javascript のライブラリ呼び出しを埋め込まないといけないということのようです。これは少し面倒ですね。 実際に埋め込んだ様子がこちらになります。ちょっと手元の環境で見ることができないのですが、いかがでしょうか？ その昔、Google Wave が約束していた機能のなかに、Wave の投稿、そしてコメントがブログの上にも反映されるというものがありました。これはその機能の再来といってもよさそうです。 また、Google+のプロフィールをコンテンツと結びつける Authorship の機能が WordPress / Typepad と連携するという発表もありました。 Facebook が利用者を囲い込むのに対して、こちらはコンテンツを作る人に寄り添う形でのゆるやかな囲い込み。ブログを書く人としては、まずは設定しておいて損はないでしょう。

この記事に関連した記事:

1. WordPress 用に Evernote サイトメモリーボタンを作成するプラグインが


2. Google Wave コンプリートガイドの翻訳を始めました


3. Google Reader に「フォロー」と「お気に入り」と「人名検索」が追加。その意味は？

参照元記事：Lifehacking.jp http://lifehacking.jp

Link Board：レスポンシブのテストサイトや管理画面テンプレート紹介、iOSでも簡単軽快3D表現を実装するネタ等 – 2013年8月

やべー、8月過ぎちゃったけど、まぁいっか。今月もやってきましたリンクボード紹介のお時間で〜す！ 今月もやたらとFacebookにガンガン投稿しまくって、僕自身が『おぉ！これはブクマだ！』って思えた物の中でテンション高かっ […]



参照元記事：バンクーバーのうぇぶ屋 http://webya.opdsgn.com

tableの列ごとに任意のキーワードでフィルタリングできる軽量jQueryプラグイン・Multifilter

tableから複数キーワードでフィルタリングできるjQueryのプラグイン・Multifilterのご紹介です。非圧縮でも2KB以下と、とても軽量です。大量な情報を含むtableにあると便利そうですね。 tableコンテ [...]

• Post by かちびと.net


• PR:WPデザインギャラリー


• table要素内をキーワードでフィルタリングする軽量なjQueryプラグイン・jquery.table_filter.js


• フォームのlabel要素のテキストをjQueryでプレースホルダーにする


• 少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする

参照元記事：かちびと.net http://kachibito.net

Weekly Bookmarks #36

2013年9月2日～9月8日までで、個人的に覚えておきたいエントリーやTwitterなどを通してシェアしたエントリーのまとめです。



参照元記事：NxWorld http://www.nxworld.net

CSS3を手軽に試せるジェネレーター・「CREATE CSS3」

CREATE CSS3 CREATE CSS3は手軽にCSS3を試せるツールです。数値を入力すると、要素に反映され、コードも表示してくれます。シンプルなのでちょっと試したい、という時は便利かもしれません。 CREATE [...]

• Post by かちびと.net


• PR:WPデザインギャラリー


• CSS3 関連情報・総まとめ


• 手軽にデザインを変更できるCSS3ボタンを作る為のフレームワーク・CSS3 Buttonize Framework


• JavaScript無しで作るレスポンシブなコンテンツスライダー・CSS3 Responsive Slider

参照元記事：かちびと.net http://kachibito.net

140種類に対応！ あらゆる形式のファイルを変換できるウェブアプリ「CloudConvert」

ファイルフォーマットの変換は、控えめに考えても決して楽しい作業ではありません。異なるシステムで作業を行っていると面倒くさいだけでなく、数多くのソフトウェアが必要になる場合も多々あります。そんな時にオ... 続きを読む



参照元記事：ライフハッカー［日本版］ http://www.lifehacker.jp/

ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.js

ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.jsのご紹介です。メールやソーシャルサイトなどで最近よく見かける、ファビコン通知バッジを実装します。 メールを受信したり、投稿が [...]

• Post by かちびと.net


• PR:WPデザインギャラリー


• 導入も手軽でiPhoneなどにも自動でレイアウトを最適化するシンプルなイメージスライダーを実装出来るjQueryプラグイン・Slides


• スクロールに応じてパララックス効果を表現できるスクリプト・jarallax


• jQueryでリンク先のファビコンをリンク脇にアイコンとして表示する方法

参照元記事：かちびと.net http://kachibito.net

フォトショップをもっとよく知ろう！イメージプロセッサ編

フォトショップでイメージプロセッサを使う方法について紹介します。



参照元記事：フォトショップをもっとよく知ろう！イメージプロセッサ編 http://www.webdesignlibrary.jp/2013/09/image-processor.php

Web制作時にあると少し便利なWebツールを公開している・QuirkTools

Web制作時にあるとちょっと便利なツールをセットで公開しているQuirkToolsのご紹介です。今の所は4つほどですが、今後増えると嬉しいですね。 現在はワイヤーフレームツール、サイトマップの作成ツール、レスポンシブWe [...]

• Post by かちびと.net


• PR:WPデザインギャラリー


• URL指定可能なレスポンシブWebデザイン対応確認ツール・responsive.isと似たようなやつ何個か


• クリックで複数のモックアップ間を行き来できるようにして、フィードバックを募る事が出来るWebサービス・ClickDummy


• 色を指定すると、トーン表や同系色など、その色に関連した情報を抽出してくれるカラー提案サービス・colllor

参照元記事：Web制作時にあると少し便利なWebツールを公開している・QuirkTools http://kachibito.net/web-service/quirktools.html

新しい設定画面とアクセス権限の追加について

参照元記事：新しい設定画面とアクセス権限の追加について http://analytics-ja.blogspot.com/2013/09/blog-post.html

ニュース・マガジン風レイアウトのWordPressテーマ「Magazine」

私の参加しているWordPressテーマ制作チーム、Themifyで、新しいテーマ「Magazine」がリリースされました！私はデザインと、コーディングの一部を任せて頂きました。様々なレイアウトに対応しており、BBCのよ [...]



参照元記事：ニュース・マガジン風レイアウトのWordPressテーマ「Magazine」 http://www.webcreatorbox.com/webinfo/themify-magazine/

table周りで便利なスニペットやプラグイン

忘れてしまった時や使おうと思うときにすぐ見れるよう、table周りで使えるちょっとしたスニペットやプラグインの備忘録です。幾つかまとめていますが、こっちの方法のが良いとかもっと良いプラグインとか、そもそもこれダメだよとかあれば是非教えていただけると嬉しいです。



参照元記事：table周りで便利なスニペットやプラグイン http://www.nxworld.net/tips/table-snippets-plugins.html

紙が燃えたように見えるエフェクト

フォトショップで紙が燃えたように見せる方法について紹介します。



参照元記事： Web Design Library http://www.webdesignlibrary.jp/

領収書を簡単に作成、PDFでダウンロードできる「領収書.net」

「領収書.net」は領収書が簡単に作成できてPDFでダウンロード可能なサービスです。領収書のテンプレートが用意されており、詳細を入力するだけで領収書のPDFが完成します。急な領収書の用意にどうぞ。 ... 続きを読む



via ライフハッカー［日本版］ http://www.lifehacker.jp/2013/09/130902receipt_pdf.html

CSSだけで作るamazon風な縦型メガメニュー

先日、「CSSだけで作る動きのあるドロップダウンメニュー」という記事のコメント内で、amazonのようなメガメニューをCSSだけで作れないのかというコメントいただきましたので作ってみました。



via Webpark http://weboook.blog22.fc2.com/blog-entry-380.html