Webページの背景画像をどうしようか悩んでいる時に超役に立つブックマークレット「SubtlePatterns Bookmarklet」

nagasawa (2013年2月 6日 19:56)

Preview hundreds of great patterns from SubtlePatterns.com directly on your website

去年の9月ぐらいに以下の記事を書きました。

Webサイトの背景パターン画像を集めてダウンロードできるようにしてくれているのですが、どの背景画像もセンスのよいものばかりです。

このサイトのよいところは紹介している背景画像をクリックするとリアルタイムにその画像を背景画像として現在見ているページに適用してくれるところです。

背景画像パターンにマウスを持っていくと「PREVIEW」というボタンが表示されるので、それをクリックすると今見ているページの背景がその画像に切り替わりますのでその場で確認することができます。

だた、そうやって「いい感じなんじゃね？」と思ってダウンロードした背景画像をいざ自分のサイトに使ってみるとなんかちょっと違う感じがすることもあり、その度に画像をダウンロード、CSSで背景画像の修正、といった手間がかかりました。

そんな手間を一気に省いてくれるブックマークレットが「SubtlePatterns Bookmarklet」です。

以下のページに配置されている緑色の「SubtlePatterns Bookmarklet」というボタンをブラウザのブックマークバーに登録します。

で、背景画像をいろいろ試したいWebページを開きそこでこのブックマークレットを実行するとこんな感じの小さなウィンドウが画面内に表示されます。

SubtlePatterns%20Bookmarklet%20-%20Preview%20backgrounds%20on%20your%20website

矢印をクリックする度に背景画像を「Subtle Patterns」に取りに行き、リアルタイムにその背景画像に切り替えます（キーボードの矢印キーでもOKです）。

で、ぴったりくる背景画像が見つかったら矢印上に記載されている背景画像名（上記画像だったら「Pinstripe」）をクリックすると「Subtle Patterns」内のその背景画像ぺージが表示されるので、あとは画像をダウンロードして利用するだけです。

とにかく使い方が簡単なので、家の内装屋さんが部屋の壁紙をクライアントに選んでもらうような感じでWebページのクライアントさんにこのツールを使ってもらってページの背景画像を選んで貰う、なんて使い方もできるのではないかと思います。

オススメです！

[モ]Modern Syntax