>テーマの情報を記述した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> }} //#highlight(xml){{ // //}}
