Vistaサイドバーガジェット自作工房 - 無料で作るオリジナルガジェット

このままでは見た目がさびしすぎるので、ちょっと手を加えましょう。まずは図17のような背景画像を用意します。基本的にはどんな画像でもいいのですが、影を加えて立体感を出すとチョットだけカッコよくなります。

【図17】ガジェットの背景用に、PNG形式のファイルを用意します

つぎに、スタイルシートを使ってhtmlを修正します。body部分にbackgroundで背景画像を指定し、見出し(h4)やリスト(ul)、リスト項目(li)の見た目を整えます。ここでは、paddingで文字の表示位置を変えたり、colorで文字の色を変更、borderで破線を描画したりしています。各項目の詳細は、スタイルシートのリファレンス等を参照してください。スタイルシートが正しく設定されているかは、ブラウザーで確認しましょう。このとき、かならずIEで確認してください。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body{
width:130px;
height:130px;
background: url(mylink_back.png);<!--背景画像を指定-->
margin:0;
padding:0;
}
h4{
color:#6E6E6E;<!--見出しの文字の色を指定-->
margin:0;
padding:12px 12px;
}
ul{
width:100px;<!--段落の幅を指定-->
margin:0;
padding:0px 12px;
list-style-type: none;<!--リストの黒丸を削除-->
font-size:80%;
}
li{
width:100px;
margin:0;
padding:0;
border-top:#AAAAAA 1px dotted;<!--破線を描画-->
}
li a{
height:15px; <!--リスト項目の高さを指定-->
display:block;<!--リスト項目をブロック要素に指定-->
text-decoration:none;<!--リンクの下線を削除-->
color:#6E6E6E;
}
li a:hover{
color:#FFFFFF;
background-color:#FF9900;<!--カーソルを合わせたとき、背景色を変更-->
}
</style>
</head><body>
<h4>マイリンク</h4>
<ul>
<li><a href="http://journal.mycom.co.jp/">マイコミジャーナル</a></li>
<li><a href="http://www.google.co.jp/">Google</a></li>
<li><a href="http://jp.youtube.com/">YouTube</a></li>
<li><a href="http://www.nicovideo.jp/">ニコニコ動画</a></li>
<li><a href="http://www.amazon.co.jp/">Amazon.co.jp</a></li>
<li></li>
</ul>
</body>
</html>

【図18】IEでhtmlの表示を確認。ほかのブラウザーでは、ガジェットでの見た目が異なる場合があります

つぎに、ガジェットマニフェストファイルを作成します。下記のリストを参照してください。これまで作ってきたマニフェストと、いくつか異なる点がありますね。これまではいくつかの項目を省略してきましたが、これが通常のガジェットマニフェストです。厳密なルールに即しているわけではありませんが、とりあえずはこれで正常に動作します。リストをコピーして必要な部分を変更するといいでしょう。これらの項目を追加すると、図19のように詳細情報が表示されます。

<?xml version="1.0" encoding="utf-8"?>
<gadget>
  <name>マイリンク</name>
  <namespace>mylink_ver2.gadget</namespace>
  <version>1.0.0.0</version>
  <author name="dcp">
    <info url="http://www.dcp-corp.net/" />
        <logo src="dcp_logo.png"/>
  </author>
  <copyright>dcp</copyright>
  <description>お気に入りをまとめたガジェットです。</description>
  <icons>
      <icon src="mylink_icon.png" />
  </icons>  
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="index.html" />
      <permissions>full</permissions>
      <platform minPlatformVersion="1.0" />
    </host>
  </hosts>
</gadget>

各項目の内容

namespace	ガジェットの名前空間
author	作者情報。「name」に作者名を、「info url」に開発元のURL、「logo src」に開発元のロゴを指定する
copyright	ガジェットの著作権表記
description	ガジェットの説明文
icons	ガジェットウインドーに表示するアイコン画像の情報。「icon src」に画像ファイルを指定する