<p class="thumb"><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2013/02/subtle-patterns.png" alt="subtle-patterns" width="510" height="242" class="none" /></p>
<p><a target="_blank" href="http://subtlepatterns.com/">Subtle Patterns</a>のようなフリーの背景パターン画像配布サイトで、サイトの背景画像を選ぶ際、やはりサイトでプレビューしながら選びたいものですよね。</p>
<p>今回はそんなシンプルな要望を叶えてくれるブックマークレットをご紹介。</p><!--more-->
<h3 class="header-label">背景パターン画像をサイト上でプレビューできるブックマークレット</h3>
<p>「<a target="_blank" href="http://bradjasper.com/subtle-patterns-bookmarklet/#.USy_qjCkuPv">SubtlePatterns Bookmarklet</a>」は、<strong>無料で配布されている背景パターン画像をサイトでプレビューしながら選ぶことができるブックマークレット。</strong></p>
<p>プレビューで部分的に背景パターンを変更することもできるので、イメージにあったパターン画像を選びやすくなっています。</p>

<h4 class="tips">背景パターン画像をサイト上でプレビュー</h4>
<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2013/02/subtle-patterns1.png" alt="subtle-patterns1" width="500" height="256" class="aligncenter size-full wp-image-25311" /><br />↑ブックマークレットを使うと、サイトの背景画像が切り替わります。</p>

<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2013/02/subtle-patterns2.png" alt="subtle-patterns2" width="500" height="213" class="aligncenter size-full wp-image-25310" /><br />↑背景画像パターンの変更は、画面左下に表示されるメニューから行います。</p>


<h4 class="tips">サイトの一部だけに背景画像を反映することも可能</h4>
<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2013/02/subtle-patterns3.png" alt="subtle-patterns3" width="500" height="238" class="aligncenter size-full wp-image-25309" /><br />↑セレクターツールを使って、指定した場所だけに背景画像を表示することもできます。</p>


<h4 class="tips">便利なショートカットキー付き</h4>
<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2013/02/subtle-patterns4.png" alt="subtle-patterns4" width="459" height="251" class="aligncenter size-full wp-image-25308" /><br />↑？（Shift + /）を押すとショートカットキー一覧が表示されます。上2つのショートカットキーが文字化けしていますが、それぞれ ← と → でパターンを変更できます。一部分だけ背景画像を変更するセレクターツールは「s」で起動します。</p>

<h4 class="tips">気に入ったパターン画像をダウンロード</h4>
<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2013/02/subtle-patterns5.png" alt="subtle-patterns5" width="500" height="173" class="aligncenter size-full wp-image-25305" /><br />↑気に入ったパターン画像が見つかったら、メニューのパターン画像名をクリックします。</p>

<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2013/02/subtle-patterns6.png" alt="subtle-patterns6" width="500" height="273" class="aligncenter size-full wp-image-25306" /><br />↑すると表示しているパターン画像のダウンロードページが開くので、ここで画像をダウンロードします。</p>


<p>興味がある方は<a target="_blank" href="http://bradjasper.com/subtle-patterns-bookmarklet/#.USy_qjCkuPv">SubtlePatterns Bookmarklet</a>のページで、以下の画像にあるボタンをブックマークに追加してご利用ください。<br /><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2013/02/subtle-patterns7.png" alt="subtle-patterns7" width="500" height="172" class="aligncenter size-full wp-image-25307" /></p>

<p>実際のサイトでプレビューしながらハイクオリティな背景パターン画像を選べて良いですね。</p>
