1

Stack Overflow Flair を表示するための非常に基本的な Windows デスクトップ ガジェットを作成しようとしています。

HTML や Web 開発の経験はあまりありません。ここの指示に従おうとしましたが、ガジェットをインストールすると小さいです。

ここに画像の説明を入力

はい、あの小さな白い四角です。

背景画像を設定しようとしましたが、どちらも機能していないようです（実際には背景画像は必要ありません。機能させようとしていただけです）。HTML ソース ファイルをスタンドアロンで実行すると、ブラウザで正しく表示されます。

ここに画像の説明を入力

以下は、html ソース ファイル (名前は MySOFlair.html) のコードです。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>

  <body>
    <div id="gadgetContent">
      <a href="http://stackoverflow.com/users/2012446/chrisprosser">
        <img src="http://stackoverflow.com/users/flair/2012446.png" width="208" height="58" 
             alt="profile for ChrisProsser at Stack Overflow, Q&amp;A for professional and enthusiast programmers" 
             title="profile for ChrisProsser at Stack Overflow, Q&amp;A for professional and enthusiast programmers"/>
      </a>
    </div>
  </body>
</html>

マニフェスト ファイル (Gadget.xml) のコードは次のとおりです。

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
  <name>MySOFlair</name>
  <version>1.0.0.0</version>
  <author name="Chris Prosser" />
  <description>Mt Stack Overflow Flair Gadget</description>
  <!--<icons>
    <icon src="http://stackoverflow.com/users/flair/2012446.png" 
          width="208" 
          height="58" />
  </icons>-->
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="MySOFlair.html" />
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0" />
      <!--<defaultImage src="http://stackoverflow.com/users/flair/2012446.png" 
                    width="208" 
                    height="58"/>-->
    </host>
  </hosts>
</gadget>

ここの画像リンクのコメントを外してみましたが、何も変わりません。

サイズを正しく設定する方法についてのアイデアは大歓迎です。

4

1 に答える 1

2

これを修正する方法を見つけました。HTML ヘッダー セクションに挿入できるスタイル要素を見つけました。新しい HTML ファイルは次のとおりです。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body
    {
       margin:  0;
       width: 212;
       height: 62;
    }
    #gadgetContent
    {
       margin:  0px;
       width: 208px;
       height: 58px;
    }
    </style>
  </head>

  <body>
    <div id="gadgetContent">
      <a href="http://stackoverflow.com/users/2012446/chrisprosser">
        <img src="http://stackoverflow.com/users/flair/2012446.png" width="208" height="58" 
             alt="profile for ChrisProsser at Stack Overflow, Q&amp;A for professional and enthusiast programmers" 
             title="profile for ChrisProsser at Stack Overflow, Q&amp;A for professional and enthusiast programmers"/>
      </a>
    </div>
  </body>
</html>
于 2013-09-17T09:28:47.373 に答える