今日紹介する［Adaptive Backgrounds］は、画像のドミナントカラーを抽出して、親要素のボックスの背景色として再設定できるjQueryプラグインです。

言葉の説明だけでは難しいので、まずはサンプルをご覧ください。

［Adaptive Backgrounds］：実装サンプル

背景色が画像の色に近いものになっていることを確認できたと思います。
このようにプラグイン［Adaptive Backgrounds］は自動的に画像の色を判断して、適切な色を背景色として抽出してくれます。

ちなみに「ドミナントカラー」とは「主調色」または「支配色」とも呼ばれ、画像の配色の中でより際立って全体的に使われている色を指します。
「ドミナント」を直訳すると「支配的な」「優勢な」という意味になりますね。

正確には、全体の支配色を「色相」で捉える「ドミナント・カラー」と、「トーン」で捉える「ドミナント・トーン」の2種類に分けるの一般的です。

［Adaptive Backgrounds］のダウンロード

プラグインのダウンロードは以下、公式サイトからどうぞ。

［Adaptive Backgrounds］：公式配布サイト

［Adaptive Backgrounds］の使い方

［Adaptive Backgrounds］を有効化する際は、imgタグにカスタムデータ属性の data-adaptive-background='1' を追加します。
ちなみに値の「1」は固定なので他の数値では不可。
親要素のボックスも含めると以下のようなコードになります。

<div class="sample">
<img src="images/sample.jpg" data-adaptive-background="1">
</div>

親要素に背景色が適応されるので、スタイルシート側で「.sample」にある程度の「padding」を指定しておくと良いでしょう。

.sample {padding:20px;}
.sample img {width:80%; height:auto;}

さらに、HTMLの任意の箇所で「jquery本体」と「jquery.adaptive-backgrounds.js」を読み込みます。
またこのとき、jQueryメソッドの adaptiveBackground.run(); も同時に記述しておきます。

<script src="../inc/jquery.js"></script>
<script src="jquery.adaptive-backgrounds.js"></script>
<script>
$(function(){
$.adaptiveBackground.run();
});
</script>

基本の設定は異常。
これだけで［Adaptive Backgrounds］が実行されます。

注意事項

［Adaptive Backgrounds］はHTML5のCanvas要素を使います。
そのため「Google Chrome」「Safari」「Firefox」など、最新のモダンブラウザが対象のため、古いブラウザでは思い通りに描画されないので注意が必要です。

比較的簡単に導入できますので初心者の方にもお勧めできます。
写真やイラストを多く扱うギャラリーサイトでの利用に向いているのではないでしょうか。

なお、ご利用にあたってライセンスは各自でご確認ください。

［Adaptive Backgrounds］：公式配布サイト