複雑な形のガジェットを作ろう

ビスタ標準添付のCPUメーターや時計は、矩形以外の複雑な形をしています。また、ガジェットによっては、背景が半透明になっていることもあります。ここでは、ちょっと複雑な形状のガジェットの作り方を説明しましょう。

【図11】角が丸い矩形や円型など、ガジェットはさまざまな形をしています

まずは、ガジェット用の背景画像を用意します。ここで必要なのは、アルファチャンネル付きPNGが作成可能なグラフィックツールです。フォトショップなどの市販ツールや、InkscapeやGIMP2などの無料ソフトを使うといいでしょう。

【図12】ここでは、無料のドローツール「Inkscape」で、アルファチャンネル付きPNGファイルを作成します

あとは用意した画像をHTMLに表示させるだけなのですが、表示方法の設定に注意が必要です。先ほどと同様にimgタグのsrcプロパティで画像ファイルを指定すると、余白部分が白く表示されてしまいます。

【図13】imgタグのsrcプロパティに画像ファイルを指定すると、矩形で表示されてしまいます

うまく表示させるには、スタイルシートを使ってPNGファイルを背景に指定する必要があります。さきほどのhtmlファイルからstyleタグのbodyに「background: url(画像ファイル名);」を追加し(ここでは「img02.png」という画像ファイルを使っています)、さらに、imgタグによる画像表示部分を削除してください。修正が終わったらガジェットファイルを作成し、インストールしてみましょう。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body{
    width:130px;height:98px;
    margin:0;padding:0;
    background: url(img02.png);
}
</style>
</head>
<body>
</body>
</html>

【図14】余白部分が透明になり、複雑な形のガジェットができました