「setting.xml」の編集履歴（バックアップ）一覧はこちら
setting.xml - (2010/12/20 (月) 11:06:12) の最新版との変更点
追加された行は緑色になります。
削除された行は赤色になります。
>テーマの情報を記述したXMLファイルです。
>テーマの名称や概要、アプリケーションの外観、メニューアイコンやタイムラインの最小幅など、タイムライン内部以外のすべての設定の記述はここで行います。
以下の情報は、独自研究に基づくものです。
----
#contents()
*テーマ情報
#highlight(xml){{
<Infomation>
<ThemeName>Silver</ThemeName>
<Description>メタリック</Description>
<SampleImage>sample.jpg</SampleImage>
<Author>Jane, Inc.</Author>
<URL>http://janetter.net</URL>
<TwitterID>Janetter_jp</TwitterID>
</Infomation>
}}
公開するときに、適宜書き換えて下さい。
*タイムライン・プロフィール・右クリックメニュー
#highlight(xml){{
<HtmlFile>index.htm</HtmlFile>
<ProfileHtml>..\Common\prof\profile.html</ProfileHtml>
<ContextMenu>..\Common\ContextMenu.xml</ContextMenu>
}}
プロフィール画面を書き換えたい時に「ProfileHtml」は変更しますが、それ以外はあまり使いません。
*背景
#highlight(xml){{
<Background>
<Image>metal.jpg</Image>
<Style>Tile</Style>
<Color>C0C0C0</Color>
</Background>
}}
アプリケーションの背景を指定します。
「Image」に何も指定しない場合は、「Color」で指定した色で塗りつぶされます。
**Style要素
|<Style></Style>|画像を繰り返しなしで表示します。 |
|<Style>Stretch</Style>|画像を&bold(){画面解像度幅}に引き伸ばして表示します。|
|<Style>Tile</Style>|画像を敷き詰めて表示します。|
#image(back_img.jpg)
左：指定無し 中：Stretch 右：Tile
*タイムラインの最小幅
#highlight(xml){{
<TimeLineDeck>
<TimeLineWidth>318</TimeLineWidth>
<OutLineWidth>2</OutLineWidth>
</TimeLineDeck>
}}
TimeLineWidthでタイムラインの横幅の最小値を指定します。値を小さくすることで、同時に表示できるTL数を稼ぐことが出来ます。
*タイムラインの透過
#highlight(xml){{
<TimeLineBackground>
<Transmission>True</Transmission>
<Color>FFFFFF</Color>
<Alpha>60</Alpha>
</TimeLineBackground>
}}
|要素|値 | 説明|
| Transmission | True / False | 透過させるか |
| Color | HEX COLOR | 色 |
| Alpha | 0(?)～255 | 透過率 値が小さいほど透過します |
透過させる場合、ある程度のマシンパワーが要求されますので注意して下さい。
Transmission を False にした場合は、スタイルシートで指定した背景色になります。
Transmission を True にした場合は、<body>に対して行った背景色や背景画像の指定は解除されます。
#image(trans.jpg)
左：Alpha 0 中：Alpha 180 右：Alpha 255
※<Background>に青色(0000FF)、<Color>に黒色(000000)
*閉じる・最大化・最小化・表示モード切替
#highlight(xml){{
<SystemMenu>
<IconInfo>
<Path>..\Common\sysytemicon\close.png</Path>
<ActivePath>..\Common\sysytemicon\close_on.png</ActivePath>
<Left>-47</Left>
<Top>1</Top>
<Width>41</Width>
<Height>19</Height>
<Action>WindowClose</Action>
<Name>Normal</Name>
</IconInfo>
<!-- 以下省略 -->
</SystemMenu>
}}
*メインメニュー
**全般
#highlight(xml){{
<MainMenu>
<HeaderHeight>68</HeaderHeight>
<TopLine>True</TopLine>
<BottomLine>True</BottomLine>
<Gradation>
<Enabled>True</Enabled>
<StartColor>000000</StartColor>
<StartAlpha>70</StartAlpha>
<EndColor>FFFFFF</EndColor>
<EndAlpha>0</EndAlpha>
</Gradation>
}}
<HeaderHeight>では、メインメニューの高さを指定します。
<TopLine>と<BottomLine>は省略することが出来ます。省略した場合は「True」を指定したときと同じになります。
#image(TopLine.jpg)
左：Fales 右：True
***Gradation要素
Gradationでメニューの背景を指定します。
※分かりやすくするために<Background>で赤色(#FF0000)を指定しています
#image(Gra01.jpg)
<Enabled>False</Enabled>とした場合、<StartColor>等はすべて無視され<Background>が表示されます。
次のように書くと
#highlight(xml){{
<Gradation>
<Enabled>True</Enabled>
<StartColor>00FF00</StartColor>
<StartAlpha>255</StartAlpha>
<EndColor>0000FF</EndColor>
<EndAlpha>255</EndAlpha>
</Gradation>
}}
#image(Gra02.jpg)
このような表示になります
**未読数
#highlight(xml){{
<Numbers>
<MainDirPath>..\Common\number\red\big</MainDirPath>
<MenuDirPath>..\Common\number\red\small</MenuDirPath>
<HPosition>Right</HPosition>
<VPosition>Top</VPosition>
</Numbers>
}}
<Numbers>は未読数表示につかう画像と、その表示位置を指定します。
<HPosition>と<VPosition>それぞれ数値で指定することもできます。
プラスで右or下。マイナスで左or上にずれます。
**メニューアイコン
#highlight(xml){{
<IconInfo>
<Path>..\Common\iconset\main\logo.png</Path>
<Left>6</Left>
<Top>6</Top>
<Width>16</Width>
<Height>16</Height>
<Action>WindowSysMenu</Action>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\gray\home.png</Path>
<ActivePath>..\Common\iconset\main\btn_on_bg.png</ActivePath>
<Left>16</Left>
<Top>34</Top>
<Width>28</Width>
<Height>28</Height>
<ActiveLeft>-7</ActiveLeft>
<ActiveTop>-8</ActiveTop>
<ActiveWidth>43</ActiveWidth>
<ActiveHeight>45</ActiveHeight>
<ActiveBK>True</ActiveBK>
<Action>HomeTL</Action>
<Round>False</Round>
<Shadow>False</Shadow>
<Name>Home</Name>
</IconInfo>
<!-- 以下省略 -->
<IconInfo>
<Path>..\Common\iconset\gray\gear_off.png</Path>
<ActivePath>..\Common\iconset\gray\gear_on.png</ActivePath>
<Left>-40</Left>
<Top>34</Top>
<Width>27</Width>
<Height>28</Height>
<Action>ShowOptions</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
</MainMenu>
}}
<IconInfo>でメニューアイコンの位置、サイズを指定します。<IconInfo>～</IconInfo>を削除することで、メニューから消すことが出来ます。
***各要素
| Path | |通常時の画像 |
| ActivePath | |マウスオーバー時の画像 |
| Left | |左からの位置 負の値なら右から |
| Top | |上からの位置 |
| Width | |画像の横幅 |
| Height | |画像の縦幅 |
| ActiveLeft |省略 |クリック可能エリアの開始位置 |
| ActiveTop |省略 |クリック可能エリアの開始位置 |
| ActiveWidth |省略 |クリック可能エリアの横幅 |
| ActiveHeight|省略 |クリック可能エリアの高さ |
| ActiveBK |省略 |マウスオーバー時に通常時の画像を残すか |
| Action | |クリック時の実行内容 |
| Round |省略 |丸みを持たせるか |
| Shadow |省略 |影を付けるか |
| Name |省略 |不明 |
*タイムラインメニュー
**背景色と文字色
#highlight(xml){{
<TimeLineMenu>
<TitleHeight>26</TitleHeight>
<TitleColor>FFFFFF</TitleColor>
<TitleAlpha>140</TitleAlpha>
<ActiveColor>FFFFFF</ActiveColor>
<ActiveAlpha>200</ActiveAlpha>
<HotColor>FFFFFF</HotColor>
<HotAlpha>240</HotAlpha>
<CaptionLeft>26</CaptionLeft>
<TitleFont>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>9</Size>
<Color>444444</Color>
<Height>-12</Height>
<Style>B</Style>
</TitleFont>
<HotFont>
<!-- 以下省略 -->
</HotFont>
<SmallIcon>
<Left>5</Left>
<Top>5</Top>
<Home>..\Common\iconset\gray\home_s.png</Home>
<Mentions>..\Common\iconset\gray\mention_s.png</Mentions>
<Message>..\Common\iconset\gray\direct_s.png</Message>
<List>..\Common\iconset\gray\list_s.png</List>
<Search>..\Common\iconset\gray\search_s.png</Search>
</SmallIcon>
}}
タイムライン上側のタブ部分のデザインを指定します。
|要素 | 説明 |
|TitleHeigh |タブの高さ |
|TitleColor |通常の背景色 |
|TitleAlpha |通常の背景透過率 |
|ActiveColor |フォーカスされているタイムラインのタブの背景色 |
|ActiveAlpha |フォーカスされているタイムラインのタブの背景通過率 |
|HotColor |マウスオーバー時の背景色 |
|HotAlpha |マウスオーバー時の背景透過率 |
|CaptionLeft |文字列の表示位置 |
|TitleFont |フォントの種類、サイズ、色、太さ |
|HotFont |マウスオーバー時のフォントの種類、サイズ、色、太さ |
|SmallIcon |タブに表示する小さいアイコンと、その表示位置 |
***Color要素
#highlight(xml){{
<TitleColor>FF0000</TitleColor> <!-- 赤 -->
<TitleAlpha>255</TitleAlpha>
<ActiveColor>00FF00</ActiveColor><!-- 緑 -->
<ActiveAlpha>255</ActiveAlpha>
<HotColor>0000FF</HotColor> <!-- 青 -->
<HotAlpha>255</HotAlpha>
}}
#image(timeline.jpg)
左：通常 中：タイムラインにフォーカスがある 右：タブにマウスをのせている状態
***フォントプロパティ
|要素 |説明 |
|Name |フォント名 |
|Charset|不明 |
|Size |フォントサイズ |
|Color |文字色 |
|Style |B=ボールド体 I=イタリック なし=なし |
|Height|不明 |
**タイムラインの文字サイズ
#highlight(xml){{
<TimeLineFontSize>
<Tiny>10.5</Tiny>
<Small>11.5</Small>
<Normal>12.5</Normal>
<Big>14</Big>
<Giant>16</Giant>
<UltraGiant>24</UltraGiant>
</TimeLineFontSize>
}}
設定→基本設定のフォントプロパティで選ぶ文字サイズに対応
**その他のアイコン
#highlight(xml){{
<AutoLabel>
<Path>..\Common\iconset\main\auto_black.png</Path>
<Left>4</Left>
<Top>4</Top>
<Width>11</Width>
</AutoLabel>
<StreamLabel>
<Path>..\Common\iconset\main\strm_black.png</Path>
<Left>4</Left>
<Top>4</Top>
<Width>11</Width>
</StreamLabel>
<IconInfo>
<Path>..\Common\iconset\main\close_s_off.png</Path>
<ActivePath>..\Common\iconset\main\close_s_on.png</ActivePath>
<MouseOverPath>..\Common\iconset\main\close_s_on_red.png</MouseOverPath>
<Left>-20</Left>
<Top>4</Top>
<Width>16</Width>
<Height>16</Height>
<Action>CloseTL</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<!-- 以下省略 -->
<IconInfo>
<Path>..\Common\iconset\main\close_s_on.png</Path>
<ActivePath>..\Common\iconset\main\close_s_on.png</ActivePath>
<MouseOverPath>..\Common\iconset\main\close_s_on_red.png</MouseOverPath>
<Left>-20</Left>
<Top>30</Top>
<Width>16</Width>
<Height>16</Height>
<Action>FindClose</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
</TimeLineMenu>
}}
AutoLabelは「新しいツイートにスクロールする」が有効になっているタイムラインに表示するアイコンです。通常は左端に表示されています。
*ツイート欄
#highlight(xml){{
<TweetWindow>
<Height>92</Height>
<VMargin>0</VMargin>
}}
#image(edit_height.jpg)
確保する高さと、余白
**テキストエリアとフォント
#highlight(xml){{
<Edit>
<Left>10</Left>
<Top>10</Top>
<Right>80</Right>
<MinLines>3</MinLines>
<MaxLines>9</MaxLines>
<Color>FFFFFF</Color>
<Font>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>9</Size>
<Color>333333</Color>
<Height>-12</Height>
<Style></Style>
</Font>
</Edit>
}}
#image(edit_ar.jpg)
|要素 | 説明 |
|Left |テキストエリアの左側の余白 |
|Top |テキストエリアの上側の余白 |
|Right|テキストエリアの右側の余白 |
|MinLines |最小の行数 ツイート欄の最小の高さ |
|MaxLines |最大の行数 |
|Color |背景色 |
|Font |フォントの種類、サイズ、色、スタイル |
**カウンター
#highlight(xml){{
<Number>
<Left>-190</Left>
<Top>-30</Top>
<Font>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>12</Size>
<Color>999999</Color>
<Height>-16</Height>
<Style>B</Style>
</Font>
<Over140FontColor>FF0000</Over140FontColor>
</Number>
}}
文字数カウンターのフォントなどを指定します。
Over140FontColorで140字を超えたときの警告色を指定します。
**サムネイル
#highlight(xml){{
<Thumbnail>
<Left>16</Left>
<Width>70</Width>
<Height>70</Height>
<PreserveAspect>True</PreserveAspect>
<VMargin>2</VMargin>
<CloseLeft>52</CloseLeft>
<CloseTop>2</CloseTop>
<ClosePath>..\Common\iconset\main\close_s_on_red.png</ClosePath>
</Thumbnail>
}}
サムネイルの大きさなどを指定します。
**ツイート欄の背景(省略可能)
#highlight(xml){{
<TopAlpha>255</TopAlpha>
<BottomAlpha>255</BottomAlpha>}}
#image(tweetbox_a.jpg)
左：Alpha 0 中：(指定無し) 右：Alpha 255
※TopAlpha,BottomAlphaともに同じ数値を指定
**テキストエリアの背景
#highlight(xml){{
<Background>
<IconInfo>
<Path>..\Common\images\TweetCenterMiddle.png</Path>
<ActivePath></ActivePath>
<Left>13</Left>
<Top>8</Top>
<Width>-93</Width>
<Height>-16</Height>
<Action></Action>
<Round>False</Round>
<Shadow>False</Shadow>
<Stretch>True</Stretch>
</IconInfo>
<!-- 以下省略 -->
<IconInfo>
<Path>..\Common\images\TweetRightBottom.png</Path>
<ActivePath></ActivePath>
<Left>-80</Left>
<Top>-13</Top>
<Width>7</Width>
<Height>7</Height>
<Action></Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
</Background>
}}
ツイート欄の背景を構成します。通常はフキダシ型になるように整形されています。
**投稿者画像、切り替えボタン、閉じるボタン
#highlight(xml){{
<IconInfo>
<Path>$PROFILE_IMAGE</Path>
<ActivePath></ActivePath>
<Left>-60</Left>
<Top>22</Top>
<Width>48</Width>
<Height>48</Height>
<Action>ChangeAccount</Action>
<Round>True</Round>
<Shadow>True</Shadow>
<Stretch>True</Stretch>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\pulldown_gray_on.png</Path>
<ActivePath>..\Common\iconset\input\pull.png</ActivePath>
<Left>-25</Left>
<Top>59</Top>
<Width>14</Width>
<Height>10</Height>
<Action>ChangeAccount</Action>
<Name>ChangeAccountPull</Name>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\main\close_s_on.png</Path>
<ActivePath>..\Common\iconset\main\close_s_on_red.png</ActivePath>
<Left>-24</Left>
<Top>3</Top>
<Width>16</Width>
<Height>16</Height>
<Action>ToggleTweetWindow</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
}}
**URL短縮、画像の追加、下書きの保存、ツイートボタン
#highlight(xml){{
<IconInfo>
<Path>..\Common\iconset\input\url_s.png</Path>
<ActivePath>..\Common\iconset\input\url_s_on.png</ActivePath>
<Left>13</Left>
<Top>-25</Top>
<Width>27</Width>
<Height>16</Height>
<Action>ShortenURL</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\pic_s.png</Path>
<ActivePath>..\Common\iconset\input\pic_s_on.png</ActivePath>
<Left>48</Left>
<Top>-25</Top>
<Width>16</Width>
<Height>16</Height>
<Action>SelectPicture</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\save_s.png</Path>
<ActivePath>..\Common\iconset\input\save_s_on.png</ActivePath>
<Left>76</Left>
<Top>-25</Top>
<Width>16</Width>
<Height>16</Height>
<Action>DraftMenu</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\tweet_en.png</Path>
<ActivePath>..\Common\iconset\input\tweet_en_on.png</ActivePath>
<Left>-140</Left>
<Top>-26</Top>
<Width>61</Width>
<Height>16</Height>
<Action>SendTweet</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\tw_msg.png</Path>
<ActivePath>..\Common\iconset\main\close_s_on.png</ActivePath>
<Left>8</Left>
<Top>10</Top>
<Width>16</Width>
<Height>16</Height>
<Action>ClearTweet</Action>
<Round>False</Round>
<Shadow>False</Shadow>
<Name>ClearTweet</Name>
</IconInfo>
</TweetWindow>
}}
*タイムライン切り替えタブ
#highlight(xml){{
<ScrollBar>
<SmallIcon>
<Home>..\Common\iconset\gray\home_s.png</Home>
<Mentions>..\Common\iconset\gray\mention_s.png</Mentions>
<Message>..\Common\iconset\gray\direct_s.png</Message>
<List>..\Common\iconset\gray\list_s.png</List>
<Search>..\Common\iconset\gray\search_s.png</Search>
<Plus>..\Common\number\red\small\plus.png</Plus>
</SmallIcon>
<Font>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>8</Size>
<Color>444444</Color>
<Style></Style>
</Font>
<DisableColor>999999</DisableColor>
</ScrollBar>
}}
画面下部のタイムライン切り替えタブのデザインを指定します。
**複数の指定方法
&italic(){<DisableColor>999999</DisableColor>} の部分を次のように書くことが出来ます
#highlight(xml){{
<EnableColor>CCCCCC</EnableColor>
<DisableAlpha>100</DisableAlpha>
}}
#highlight(xml){{
<EnableColor>AADDFF</EnableColor>
<DisableColor>999999</DisableColor>
<EnableAlpha>240</EnableAlpha>
<DisableAlpha>100</DisableAlpha>
}}
*ステータスバー
#highlight(xml){{
<StatusBar>
<Font>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>8</Size>
<Color>FFFFFF</Color>
<Style></Style>
</Font>
</StatusBar>
}}
ステータスバーのフォントを指定します。
*その他<省略可能>
**Notice
#highlight(xml){{
<Notice>
<BackColor>B0B0B0</BackColor>
<Font>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>9</Size>
<Color>1E1E1E</Color>
<Height>-12</Height>
<Style></Style>
</Font>
</Notice>
}}
ポップアンプウィンドウの背景色とフォントを指定します。
**SubWindow
#highlight(xml){{
<SubWindow>
<MenuFontColor>FF9900</MenuFontColor>
</SubWindow>
}}
#image(subwindow.jpg)
設定画面の文字色が変わります。
指定しない場合は、<Background>で指定した色から生成されます。
//#highlight(xml){{
//
//}}
#setmenu(メニュー_Janetter_v1)
>111 名前：開発チーム★[] 投稿日：2010/12/22(水) 15:43:54 ID:???0
>■setting.xmlについて
>テーマの情報を記述したXMLファイルです。
>テーマの名称や概要、アプリケーションの外観、メニューアイコンやタイムラインの最小幅など、タイム>ライン内部以外のすべての設定の記述はここで行います。
>
>&bold(){簡単な解説(下記ファイルをダウンロードしてメモ帳等で開いて下さい)}
>&bold(){[[http://janetter.net/test/sample_setting.xml]]}
※以下の情報は、独自研究に基づくものです。
----
#contents()
*テーマ情報
#highlight(xml){{
<Infomation>
<ThemeName>Silver</ThemeName>
<Description>メタリック</Description>
<SampleImage>sample.jpg</SampleImage>
<Author>Jane, Inc.</Author>
<URL>http://janetter.net</URL>
<TwitterID>Janetter_jp</TwitterID>
</Infomation>
}}
|ThemeName |テーマファイルの名前 ※重複しないようにして下さい |
|Description |説明文を2行まで表示可能です （改行文字は「＆＃１０；」） |
|SampleImage |サンプル画像です 実寸[ 199 x 267 ] |
|Author |作者名 |
|URL |WebページURL テーマ変更画面に表示されてリンクが貼られる |
|TwitterID |テーマ作者のツイッターアカウント テーマ変更画面のtマークにリンクが貼られる |
公開するときに、適宜書き換えて下さい。
*タイムライン・プロフィール・右クリックメニュー
#highlight(xml){{
<HtmlFile>index.htm</HtmlFile>
<ProfileHtml>..\Common\prof\profile.html</ProfileHtml>
<ContextMenu>..\Common\ContextMenu.xml</ContextMenu>
}}
プロフィール画面を書き換えたい時に「ProfileHtml」は変更しますが、それ以外はあまり使いません。
*背景
#highlight(xml){{
<Background>
<Image>metal.jpg</Image>
<Style>Tile</Style>
<Color>C0C0C0</Color>
<EdgeColor>E1854D</EdgeColor>
</Background>
}}
アプリケーションの背景を指定します。
背景に使用する画像ファイルは .jpg .png .gifを指定可能です。動画gifは動きません。
「Image」に何も指定しない場合は、「Color」で指定した色で塗りつぶされます。
EdgeColorでWindow枠の色を指定します。
**Style要素
|<Style></Style>|画像を繰り返しなしで表示します。 |
|<Style>Stretch</Style>|画像を&bold(){画面解像度幅}に引き伸ばして表示します。|
|<Style>Tile</Style>|画像を敷き詰めて表示します。|
#image(back_img.jpg)
左：指定無し 中：Stretch 右：Tile
*タイムラインの最小幅
#highlight(xml){{
<TimeLineDeck>
<TimeLineWidth>318</TimeLineWidth>
<OutLineWidth>2</OutLineWidth>
</TimeLineDeck>
}}
TimeLineWidthでタイムラインの横幅の最小値を指定します。値を小さくすることで、同時に表示できるTL数を稼ぐことが出来ます。
OutLineWidthでタイムラインの左右下の余白の幅を指定します。小さくしすぎると、ウィンドウサイズの変更に支障が出る場合があります。
*タイムラインの透過
#highlight(xml){{
<TimeLineBackground>
<Transmission>True</Transmission>
<Color>FFFFFF</Color>
<Alpha>60</Alpha>
</TimeLineBackground>
}}
|要素|値 | 説明|
| Transmission | True / False | 透過させるか |
| Color | HEX COLOR | 色 |
| Alpha | 0～255 | 透過率 値が小さいほど透過します |
透過させる場合、ある程度のマシンパワーが要求されますので注意して下さい。
Transmission を False にした場合は、スタイルシートで指定した背景色になります。
Transmission を True にした場合は、<body>に対して行った背景色や背景画像の指定は解除されます。
#image(trans.jpg)
左：Alpha 0 中：Alpha 180 右：Alpha 255
※<Background>に青色(0000FF)、<Color>に黒色(000000)
*閉じる・最大化・最小化・表示モード切替
#highlight(xml){{
<SystemMenu>
<IconInfo>
<Path>..\Common\sysytemicon\close.png</Path>
<ActivePath>..\Common\sysytemicon\close_on.png</ActivePath>
<Left>-47</Left>
<Top>1</Top>
<Width>41</Width>
<Height>19</Height>
<Action>WindowClose</Action>
<Name>Normal</Name>
</IconInfo>
<!-- 以下省略 -->
</SystemMenu>
}}
|Path |通常時の画像ファイルは .jpg .png .gifを指定可能です。動画gifは動きません。|
|ActivePath |マウスオーバー時のアイコンファイル|
|Left |アイコンの左からの位置 マイナスの場合は右から位置|
|Top |アイコンの上からの位置 マイナスの場合は下から位置|
|Width |アイコンのクリック領域の幅|
|Height |アイコンのクリック領域の高さ|
|Action |クリックしたときの動作 |
|Name |表示条件 Normal:通常時, Max:最大化している時|
*メインメニュー
**全般
#highlight(xml){{
<MainMenu>
<HeaderHeight>68</HeaderHeight>
<TopLine>True</TopLine>
<BottomLine>True</BottomLine>
<Gradation>
<Enabled>True</Enabled>
<StartColor>000000</StartColor>
<StartAlpha>70</StartAlpha>
<EndColor>FFFFFF</EndColor>
<EndAlpha>0</EndAlpha>
</Gradation>
}}
<HeaderHeight>では、メインメニューの高さを指定します。
<TopLine>と<BottomLine>は省略することが出来ます。省略した場合は「True」を指定したときと同じになります。
#image(TopLine.jpg)
左：Fales 右：True
***Gradation要素
Gradationでメニューの背景を指定します。
※分かりやすくするために<Background>で赤色(#FF0000)を指定しています
#image(Gra01.jpg)
<Enabled>False</Enabled>とした場合、<StartColor>等はすべて無視され<Background>が表示されます。
次のように書くと
#highlight(xml){{
<Gradation>
<Enabled>True</Enabled>
<StartColor>00FF00</StartColor>
<StartAlpha>255</StartAlpha>
<EndColor>0000FF</EndColor>
<EndAlpha>255</EndAlpha>
</Gradation>
}}
#image(Gra02.jpg)
このような表示になります
**未読数
#highlight(xml){{
<Numbers>
<MainDirPath>..\Common\number\red\big</MainDirPath>
<MenuDirPath>..\Common\number\red\small</MenuDirPath>
<HPosition>Right</HPosition>
<VPosition>Top</VPosition>
<HAdjust>0</HAdjust>
<VAdjust>0</VAdjust>
</Numbers>
}}
<Numbers>は未読数表示につかう画像と、その表示位置を指定します。
|MainDirPath |メインメニュー上に表示するファイルのあるディレクトリ 0.png～9.png,plus.pngが必要|
|MenuDirPath |メインメニューからのポップアップメニューに表示するファイルのあるディレクトリ 0.png～9.png,plus.pngが必要|
|HPosition |未読件数を表示する水平方向での位置 Left,Center,Right で指定|
|VPosition |未読件数を表示する垂直方向での位置 Top,Center,Bottom で指定|
|HAdjust |水平方向の調整 プラスで右，マイナスで左|
|VAdjust |垂直方向の調整 プラスで下，マイナスで上|
**メニューアイコン
#highlight(xml){{
<IconInfo>
<Path>..\Common\iconset\main\logo.png</Path>
<Left>6</Left>
<Top>6</Top>
<Width>16</Width>
<Height>16</Height>
<Action>WindowSysMenu</Action>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\gray\home.png</Path>
<ActivePath>..\Common\iconset\main\btn_on_bg.png</ActivePath>
<Left>16</Left>
<Top>34</Top>
<Width>28</Width>
<Height>28</Height>
<ActiveLeft>-7</ActiveLeft>
<ActiveTop>-8</ActiveTop>
<ActiveWidth>43</ActiveWidth>
<ActiveHeight>45</ActiveHeight>
<ActiveBK>True</ActiveBK>
<Action>HomeTL</Action>
<Round>False</Round>
<Shadow>False</Shadow>
<Name>Home</Name>
</IconInfo>
<!-- 以下省略 -->
<IconInfo>
<Path>..\Common\iconset\gray\gear_off.png</Path>
<ActivePath>..\Common\iconset\gray\gear_on.png</ActivePath>
<Left>-40</Left>
<Top>34</Top>
<Width>27</Width>
<Height>28</Height>
<Action>ShowOptions</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
</MainMenu>
}}
<IconInfo>でメニューアイコンの位置、サイズを指定します。<IconInfo>～</IconInfo>を削除することで、メニューから消すことが出来ます。
***各要素
| Path | |通常時の画像 |
| ActivePath | |マウスオーバー時の画像 |
| Left | |左からの位置 負の値なら右から |
| Top | |上からの位置 |
| Width | |画像の横幅 |
| Height | |画像の縦幅 |
| ActiveLeft |省略 |クリック可能エリアの開始位置 |
| ActiveTop |省略 |クリック可能エリアの開始位置 |
| ActiveWidth |省略 |クリック可能エリアの横幅 |
| ActiveHeight|省略 |クリック可能エリアの高さ |
| ActiveBK |省略 |マウスオーバー時に通常時の画像を残すか |
| Action | |クリック時の実行内容 |
| Round |省略 |丸みを持たせるか |
| Shadow |省略 |影を付けるか |
| Name | |対応する未読数を表示 |
*タイムラインメニュー
**背景色と文字色
#highlight(xml){{
<TimeLineMenu>
<TitleHeight>26</TitleHeight>
<TitleColor>FFFFFF</TitleColor>
<TitleAlpha>140</TitleAlpha>
<ActiveColor>FFFFFF</ActiveColor>
<ActiveAlpha>200</ActiveAlpha>
<HotColor>FFFFFF</HotColor>
<HotAlpha>240</HotAlpha>
<CaptionLeft>26</CaptionLeft>
<EdgeColor>E1854D</EdgeColor>
<TitleFont>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>9</Size>
<Color>444444</Color>
<Height>-12</Height>
<Style>B</Style>
</TitleFont>
<HotFont>
<!-- 以下省略 -->
</HotFont>
<SmallIcon>
<Left>5</Left>
<Top>5</Top>
<Home>..\Common\iconset\gray\home_s.png</Home>
<Mentions>..\Common\iconset\gray\mention_s.png</Mentions>
<Message>..\Common\iconset\gray\direct_s.png</Message>
<List>..\Common\iconset\gray\list_s.png</List>
<Search>..\Common\iconset\gray\search_s.png</Search>
</SmallIcon>
}}
タイムライン上側のタブ部分のデザインを指定します。
|要素 | 説明 |
|TitleHeigh |タブの高さ |
|TitleColor |通常の背景色 |
|TitleAlpha |通常の背景透過率 |
|ActiveColor |フォーカスされているタイムラインのタブの背景色 |
|ActiveAlpha |フォーカスされているタイムラインのタブの背景通過率 |
|HotColor |マウスオーバー時の背景色 |
|HotAlpha |マウスオーバー時の背景透過率 |
|CaptionLeft |文字列の表示位置 |
|EdgeColor |タイムライン枠の色 指定しないときは全体の背景色から計算 |
|TitleFont |フォントの種類、サイズ、色、太さ |
|HotFont |マウスオーバー時のフォントの種類、サイズ、色、太さ |
|SmallIcon |タブに表示する小さいアイコンと、その表示位置 |
***Color要素
#highlight(xml){{
<TitleColor>FF0000</TitleColor> <!-- 赤 -->
<TitleAlpha>255</TitleAlpha>
<ActiveColor>00FF00</ActiveColor><!-- 緑 -->
<ActiveAlpha>255</ActiveAlpha>
<HotColor>0000FF</HotColor> <!-- 青 -->
<HotAlpha>255</HotAlpha>
}}
#image(timeline.jpg)
左：通常 中：タイムラインにフォーカスがある 右：タブにマウスをのせている状態
***フォントプロパティ
|要素 |説明 |
|Name |フォント名 |
|Charset|不明 |
|Size |フォントサイズ |
|Color |文字色 |
|Style |B=ボールド体 I=イタリック なし=なし |
|Height|不明 |
**タイムラインの文字サイズ
#highlight(xml){{
<TimeLineFontSize>
<Tiny>10.5</Tiny>
<Small>11.5</Small>
<Normal>12.5</Normal>
<Big>14</Big>
<Giant>16</Giant>
<UltraGiant>24</UltraGiant>
</TimeLineFontSize>
}}
設定→基本設定のフォントプロパティで選ぶ文字サイズに対応
**その他のアイコン
#highlight(xml){{
<AutoLabel>
<Path>..\Common\iconset\main\auto_black.png</Path>
<Left>4</Left>
<Top>4</Top>
<Width>11</Width>
</AutoLabel>
<StreamLabel>
<Path>..\Common\iconset\main\strm_black.png</Path>
<Left>4</Left>
<Top>4</Top>
<Width>11</Width>
</StreamLabel>
<IconInfo>
<Path>..\Common\iconset\main\close_s_off.png</Path>
<ActivePath>..\Common\iconset\main\close_s_on.png</ActivePath>
<MouseOverPath>..\Common\iconset\main\close_s_on_red.png</MouseOverPath>
<Left>-20</Left>
<Top>4</Top>
<Width>16</Width>
<Height>16</Height>
<Action>CloseTL</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<!-- 以下省略 -->
<IconInfo>
<Path>..\Common\iconset\main\close_s_on.png</Path>
<ActivePath>..\Common\iconset\main\close_s_on.png</ActivePath>
<MouseOverPath>..\Common\iconset\main\close_s_on_red.png</MouseOverPath>
<Left>-20</Left>
<Top>30</Top>
<Width>16</Width>
<Height>16</Height>
<Action>FindClose</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
</TimeLineMenu>
}}
AutoLabelは「新しいツイートにスクロールする」が有効になっているタイムラインに表示するアイコンです。通常は左端に表示されています。
*ツイート欄
#highlight(xml){{
<TweetWindow>
<Height>92</Height>
<VMargin>0</VMargin>
}}
#image(edit_height.jpg)
確保する高さと、余白
**テキストエリアとフォント
#highlight(xml){{
<Edit>
<Left>10</Left>
<Top>10</Top>
<Right>80</Right>
<MinLines>3</MinLines>
<MaxLines>9</MaxLines>
<Color>FFFFFF</Color>
<Font>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>9</Size>
<Color>333333</Color>
<Height>-12</Height>
<Style></Style>
</Font>
</Edit>
}}
#image(edit_ar.jpg)
|要素 | 説明 |
|Left |テキストエリアの左側の余白 |
|Top |テキストエリアの上側の余白 |
|Right|テキストエリアの右側の余白 |
|MinLines |最小の行数 ツイート欄の最小の高さ |
|MaxLines |最大の行数 |
|Color |背景色 |
|Font |フォントの種類、サイズ、色、スタイル |
**カウンター
#highlight(xml){{
<Number>
<Left>-190</Left>
<Top>-30</Top>
<Font>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>12</Size>
<Color>999999</Color>
<Height>-16</Height>
<Style>B</Style>
</Font>
<Over140FontColor>FF0000</Over140FontColor>
</Number>
}}
文字数カウンターのフォントなどを指定します。
Over140FontColorで140字を超えたときの警告色を指定します。
**サムネイル
#highlight(xml){{
<Thumbnail>
<Left>16</Left>
<Width>70</Width>
<Height>70</Height>
<PreserveAspect>True</PreserveAspect>
<VMargin>2</VMargin>
<CloseLeft>52</CloseLeft>
<CloseTop>2</CloseTop>
<ClosePath>..\Common\iconset\main\close_s_on_red.png</ClosePath>
</Thumbnail>
}}
サムネイルの大きさなどを指定します。
**ツイート欄の背景(省略可能)
#highlight(xml){{
<TopAlpha>255</TopAlpha>
<BottomAlpha>255</BottomAlpha>}}
#image(tweetbox_a.jpg)
左：Alpha 0 中：(指定無し) 右：Alpha 255
※TopAlpha,BottomAlphaともに同じ数値を指定
**テキストエリアの背景
#highlight(xml){{
<Background>
<IconInfo>
<Path>..\Common\images\TweetCenterMiddle.png</Path>
<ActivePath></ActivePath>
<Left>13</Left>
<Top>8</Top>
<Width>-93</Width>
<Height>-16</Height>
<Action></Action>
<Round>False</Round>
<Shadow>False</Shadow>
<Stretch>True</Stretch>
</IconInfo>
<!-- 以下省略 -->
<IconInfo>
<Path>..\Common\images\TweetRightBottom.png</Path>
<ActivePath></ActivePath>
<Left>-80</Left>
<Top>-13</Top>
<Width>7</Width>
<Height>7</Height>
<Action></Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
</Background>
}}
ツイート欄の背景を構成します。通常はフキダシ型になるように整形されています。
**投稿者画像、切り替えボタン、閉じるボタン
#highlight(xml){{
<IconInfo>
<Path>$PROFILE_IMAGE</Path>
<ActivePath></ActivePath>
<Left>-60</Left>
<Top>22</Top>
<Width>48</Width>
<Height>48</Height>
<Action>ChangeAccount</Action>
<Round>True</Round>
<Shadow>True</Shadow>
<Stretch>True</Stretch>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\pulldown_gray_on.png</Path>
<ActivePath>..\Common\iconset\input\pull.png</ActivePath>
<Left>-25</Left>
<Top>59</Top>
<Width>14</Width>
<Height>10</Height>
<Action>ChangeAccount</Action>
<Name>ChangeAccountPull</Name>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\main\close_s_on.png</Path>
<ActivePath>..\Common\iconset\main\close_s_on_red.png</ActivePath>
<Left>-24</Left>
<Top>3</Top>
<Width>16</Width>
<Height>16</Height>
<Action>ToggleTweetWindow</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
}}
**URL短縮、画像の追加、下書きの保存、ツイートボタン
#highlight(xml){{
<IconInfo>
<Path>..\Common\iconset\input\url_s.png</Path>
<ActivePath>..\Common\iconset\input\url_s_on.png</ActivePath>
<Left>13</Left>
<Top>-25</Top>
<Width>27</Width>
<Height>16</Height>
<Action>ShortenURL</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\pic_s.png</Path>
<ActivePath>..\Common\iconset\input\pic_s_on.png</ActivePath>
<Left>48</Left>
<Top>-25</Top>
<Width>16</Width>
<Height>16</Height>
<Action>SelectPicture</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\save_s.png</Path>
<ActivePath>..\Common\iconset\input\save_s_on.png</ActivePath>
<Left>76</Left>
<Top>-25</Top>
<Width>16</Width>
<Height>16</Height>
<Action>DraftMenu</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\tweet_en.png</Path>
<ActivePath>..\Common\iconset\input\tweet_en_on.png</ActivePath>
<Left>-140</Left>
<Top>-26</Top>
<Width>61</Width>
<Height>16</Height>
<Action>SendTweet</Action>
<Round>False</Round>
<Shadow>False</Shadow>
</IconInfo>
<IconInfo>
<Path>..\Common\iconset\input\tw_msg.png</Path>
<ActivePath>..\Common\iconset\main\close_s_on.png</ActivePath>
<Left>8</Left>
<Top>10</Top>
<Width>16</Width>
<Height>16</Height>
<Action>ClearTweet</Action>
<Round>False</Round>
<Shadow>False</Shadow>
<Name>ClearTweet</Name>
</IconInfo>
</TweetWindow>
}}
*タイムライン切り替えタブ
#highlight(xml){{
<ScrollBar>
<SmallIcon>
<Home>..\Common\iconset\gray\home_s.png</Home>
<Mentions>..\Common\iconset\gray\mention_s.png</Mentions>
<Message>..\Common\iconset\gray\direct_s.png</Message>
<List>..\Common\iconset\gray\list_s.png</List>
<Search>..\Common\iconset\gray\search_s.png</Search>
<Plus>..\Common\number\red\small\plus.png</Plus>
</SmallIcon>
<Font>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>8</Size>
<Color>444444</Color>
<Style></Style>
</Font>
<DisableColor>999999</DisableColor>
</ScrollBar>
}}
画面下部のタイムライン切り替えタブのデザインを指定します。
**複数の指定方法
&italic(){<DisableColor>999999</DisableColor>} の部分を次のように書くことが出来ます
#highlight(xml){{
<EnableColor>CCCCCC</EnableColor>
<DisableAlpha>100</DisableAlpha>
}}
#highlight(xml){{
<EnableColor>AADDFF</EnableColor>
<DisableColor>999999</DisableColor>
<EnableAlpha>240</EnableAlpha>
<DisableAlpha>100</DisableAlpha>
}}
*ステータスバー
#highlight(xml){{
<StatusBar>
<Font>
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>8</Size>
<Color>FFFFFF</Color>
<Style></Style>
</Font>
</StatusBar>
}}
ステータスバーのフォントを指定します。
*通知ポップアップ
#highlight(xml){{
<Notice>
<BackColor>FFFFFF</BackColor> <!-- 背景色 -->
<Font> <!-- フォント Default:タイムラインのタイトルフォント -->
<Name>Meiryo</Name>
<Charset>1</Charset>
<Size>9</Size>
<Color>91351D</Color> <!-- フォント色 Default:黒 -->
<Height>-12</Height>
<Style></Style>
</Font>
</Notice>
}}
ポップアップウィンドウの背景色とフォントを指定します。
*設定ダイアログやその他のウィンドウ
#highlight(xml){{
<SubWindow> <!--設定ダイアログなど その他のウィンドウ -->
<BackgroundColor>FEE895</BackgroundColor> <!-- 背景色 Default:全体の背景色 -->
<FontColor>000000</FontColor> <!-- フォント色 Default:背景色から計算 -->
<MenuFontColor>E1854D</MenuFontColor> <!-- メニューフォント色 Default:背景色から計算 -->
</SubWindow>
}}
#image(subwindow.jpg)
設定画面の文字色が変わります。
指定しない場合は、<Background>で指定した色から生成されます。
//#highlight(xml){{
//
//}}
