[[トップページ]]>[[2chMate]]> *■2chMateを使いこなそう スキン色設定編 ---- 作者によるテーマ解説も合わせて読んでください。 https://sites.google.com/site/nikenonomonooki/2chMate/theme 以下、特に表記のないものはバージョン0.8.1時点 #contents(fromhere=true) ---- *テーマ(スキン)の変更 メニュー→その他→テーマ または ジェスチャー(0.8.1.16dev以降) (0.8.1.16~20dev:メニュー→テーマ) で切り替える。 *テーマ用ファイルの作成 テーマ用ファイルは文字やツールバーなどの配色を指定するtxtファイルと背景のpngファイルの2つが必要であり、以下の場所にフォルダを作成し置く。 /sdcard/2chMate/theme/ 「theme」フォルダが存在しない場合は作成する。 テーマ名を「○○○」としたい場合、以下のようにファイルを置く。 /mnt/sdcard/2chmate/theme/○○○/○○○.night.txt /mnt/sdcard/2chmate/theme/○○○/○○○.png .nightは.dayでもよく、.dayにした場合、指定されてない配色は「昼」の配色のもので補完される。 .skyで作れば「空」の配色を利用できるが、作者の説明もなくzipでの自動インストールもできないため非推奨。 全体的に明るい印象のテーマを作る場合は.day、逆に暗い印象の場合は.nightとしておくのが無難。 1つのフォルダに入れるテーマは1つだけとする。 **設定ファイルの記述形式 ***例 >{ >listBackgroundColor: 0xAA202020, >resBodyTextColor: 0xFFE6E6E6, >resHeaderBackgroundColor: 0 >} 記述するのは変更する項目だけでいい。 指定していない部分はベーステーマのデフォルト設定が使われる。 記述形式は汎用データ記述言語[[JSON>http://ja.wikipedia.org/wiki/JavaScript_Object_Notation]]に準じる。 最後の項目だけ末尾にカンマが不要なので注意。 ***色指定の方法 0x11223344 11:不透明度(透明00←→FF不透明) 22:赤 33:緑 44:青 (16進数) ****例 >黒色&color(#000000){■}0xFF000000 >白色&color(#FFFFFF){■}0xFFFFFFFF >赤色&color(#FF0000){■}0xFFFF0000 >黄色&color(#FFFF00){■}0xFFFFFF00 >水色&color(#AFDFE4){■}0xFFAFDFE4 >透明 0x00000000 (10進数表記で0と書いてもいい) ***透明度の目安 |BGCOLOR(lightgray):16進数|BGCOLOR(lightgray):透明度(%)| |00|100.0| |11|93.3| |22|86.7| |33|80.0| |44|73.3| |55|66.7| |66|60.0| |77|53.3| |BGCOLOR(#EEEEEE):7F|BGCOLOR(#EEEEEE):49.8| |BGCOLOR(#EEEEEE):80|BGCOLOR(#EEEEEE):50.2| |88|46.7| |99|40.0| |AA|33.3| |BB|26.7| |CC|20.0| |DD|13.3| |EE|6.7| |FF|0.0| ***図解 0.8.1.9dev時点。&color(red){マーケット版(0.8.1)から変更、追加された項目もあります。} &blankimg(2chMateテーマ20111130p1.jpg,width=380,height=277)&blankimg(2chMateテーマ20111130p2.jpg,width=384,height=260) &blankimg(2chMateテーマ20111130p3.jpg,width=380,height=252)&blankimg(2chMateテーマ20111130p4.jpg,width=417,height=258) ***現在指定できる項目一覧 作者の「灰色.night」(9月30日(0.7.6.35dev)現在)参考 &color(#4F81DB){青色の項目はマーケット版(0.8.1)にはありません} &color(#db4f4f){赤色の項目はマーケット版(0.8.1)から変更または削除されています} 上の図解も参考にしてください。 |BGCOLOR(lightgray):項目名|BGCOLOR(lightgray):参考設定値|BGCOLOR(lightgray):説明| |windowBackgroundColor|0|最背面の背景色&footnote(背景画像ファイルが存在する場合は画像優先)、&color(#4F81DB){AA画像ビューア表示の背景色(0.8.1.31dev)}| |actionbarBackgroundColor|0|アクションバーの背景色(Android 3.0以上)&color(#db4f4f){(0.8.1.21dev未満)}| |||| |titlebarTopBorderColor|0|タイトルバーの上端の色| |titlebarHighlightColor|0|タイトルバーの上端の色(titlebarTopBorderColorより1ドット下)&footnote(titlebarTopBorderColor未指定の場合はタイトルバー上端)| |titlebarLightColor|0|タイトルバーの背景色(グラデーション)| |titlebarDarkColor|0|~| |titlebarShadowColor|0|タイトルバーの下端の色(titlebarBottomBorderColorより1ドット上)| |titlebarBottomBorderColor|0xff313131|タイトルバーの下端の色| |titlebarTextColor|0xffDEDEDE|タイトルバーの文字色| |titlebarTextShadowColor|0xff000000|タイトルバーの文字の影| |||| |toolbarTopBorderColor|0xff000000|ツールバーの上端の色| |toolbarHighlightColor|0xff313131|ツールバーの上端の色(toolbarTopBorderColorより1ドット下)| |toolbarLightColor|0|ツールバーの背景色(グラデーション)| |toolbarDarkColor|0|~| |toolbarShadowColor|0|ツールバーの下端の色(toolbarBottomBorderColorより1ドット上)&footnote(toolbarBottomBorderColor未指定の場合はツールバーの下端)| |toolbarBottomBorderColor|0|ツールバーの下端の色| |toolbarTextColor|0xffDEDEDE|ツールバーの文字色| |toolbarTextShadowColor|0xff000000|ツールバーの文字の影| |toolbarTabColor|0xff1A2553|ツールバー選択中タブの背景色| |||| |textPrimaryColor|0xffE6E6E6|HOME・板表示のときのスレッドタイトル| |textSecondaryColor|0xff9C9C9C|HOME・板表示のときの日付・勢い・レス数、未読の「履歴のスレに~」の文字色| |textEmphasisColor|0xffDA8F92|板表示のときの日付・勢い・レス数の変化後&footnote(日付が新しい、勢い・レス数が高いほどtextSecondaryColorからこの色に近づく)、「DAT落ち」の文字色| |textHitBackgroundColor|0xffAF55BF|検索でヒットした文字列の背景色、&color(#4F81DB){「NG対象ですが1は表示します」の背景色(0.8.1.29dev?)}| |||| |cachedItemTextColor|0xff00DBDB|板表示、検索などのときキャッシュ済みスレッドの文字色| |||| |listBackgroundColor|0xff202020|リスト表示部の基本背景色(スレ一覧、スレ画面などで共通)| |listCategoryLightColor|0xff2d2d2d|スレ一覧のカテゴリの背景色(グラデーション)| |listCategoryDarkColor|0xff353535|~| |listCategoryTextColor|0xFFE0E0E0|スレ一覧のカテゴリの文字色| |listDividerColor|0xff555555|スレ一覧の区切りの色| |listPopupBackgroundColor|0xff373737|ポップアップの背景色| |listPopupShadowColor|0xff037EDA|ポップアップの下端の影| |COLOR(#4F81DB):listActivatedBackgroundColor||履歴ポップアップなどの時選択中のスレの背景色(0.8.1.4dev)、&color(#4F81DB){スレ一覧複数選択時の背景色(0.8.1.15dev)}| |||| |resHeaderTextColor|0xff8C8F9F|レスヘッダー(名前欄)文字色| |resBodyTextColor|0xffE6E6E6|レス文字色&footnote(ツリー表示時の未読レスが参照している既読レスには透過度50%のこの色が使われる)| |resCategoryLightColor|0xff000000|「ここまで読んだ」「おわり」などの背景色(グラデーション)| |resCategoryDarkColor|0xff101010|~| |resCategoryTextColor|0xFFE0E0E0|「ここまで読んだ」「おわり」などの文字色| |resHeaderEmphasisTextColor|0xffFF0000|0.8.1.9dev未満:被アンカーレス番の文字色、&color(#4F81DB){書き込み回数(自動あだ名)の文字色(0.8.1.8dev)}&footnote(アンカー、書き込み回数が増えるとresHeaderTextColorからだんだんこの色位近づく)&br()&color(#4F81DB){0.8.1.9dev以上:被アンカーレス番号(1-2)、書き込み回数(自動あだ名)の色(2-3)}| |COLOR(#4F81DB):resHeaderEmphasisTextColor2||被アンカーレス番号(3-4)、書き込み回数(自動あだ名)の色(4-5)(0.8.1.9dev)| |COLOR(#4F81DB):resHeaderEmphasisTextColor3||被アンカーレス番号(5-6)、書き込み回数(自動あだ名)の色(6-7)(0.8.1.9dev)| |COLOR(#4F81DB):resHeaderEmphasisTextColor4||被アンカーレス番号(7以上)、書き込み回数(自動あだ名)の色(8以上)(0.8.1.9dev)| |resHeaderBackgroundColor|0|レスヘッダー(名前欄)背景色| |resCheckedBackgroundColor|0xff283C88|ポップアップ時の元レスの背景色| |resMarkedBackgroundColor|0xff494949|&color(#db4f4f){マークを付けたレスの背景色(0.8.1.17dev以下)}&br()&color(#4F81DB){マークを付けたレス左のバー(0.8.1.18dev)}| |resReplyBackgroundColor||&color(#4F81DB){マークを付けたレスへの返信(左のバー、ID横の返信マーク)(0.8.1.18dev)}| |resAnchorTextColor|0xff9ABADA|アンカーの色、&color(#4F81DB){本文中のID:xxx(0.8.1.12dev)}| |resDividerColor|0xff555555|レスの区切りの色| |||| |linkTextColor|0xff9AB5D6|通常リンク(タップ中の色は赤→青、緑→赤、青→緑となる。&footnote(HSVで240度。例えば0xFF112233ならタップ中は0xFF223311。よって無彩色では変化しない))| |linkBackgroundColor|0|通常リンク背景色| |link2chTextColor|0xff9AD6A9|2chリンク| |link2chBackgroundColor|0|2chリンク背景色| |linkImageTextColor|0xffD6B89A|画像リンク| |linkImageBackgroundColor|0|画像リンク背景色| |||| |ratingColor5|0xffF08E91|★5つ(スレタイ左)、&color(#DB4F4F){6回以上書き込み(声優名のとこ)(0.8.1.8dev未満)}| |ratingColor4|0xffE699CD|★4つ、&color(#DB4F4F){5回書き込み(0.8.1.8dev未満)}| |ratingColor3|0xffCEA2DD|★3つ、&color(#DB4F4F){4回書き込み(0.8.1.8dev未満)}| |ratingColor2|0xffB0A5DA|★2つ、&color(#DB4F4F){3回書き込み(0.8.1.8dev未満)}| |ratingColor1|0xffABB7D3|★1つ、&color(#DB4F4F){2回書き込み(0.8.1.8dev未満)}| |ratingColor0|0xff909090|★0| |||| |editTextColor|0xFFFFFFFF|テキストボックスの文字色| |editBorderTopColor|0xFF555555|テキストボックスの枠色(グラデーション)| |editBorderBottomColor|0xFF777777|~| |editBackgroundShadowColor|0xFF000000|テキストボックス内側の影| |editBackgroundColor|0xFF101010|テキストボックスの背景色| |COLOR(#4F81DB):editHighlightBackgroundColor||テキストボックス内のハイライト(次スレ作成時に修正された部分など)(0.8.1.4dev)| |||| |stateFocusedTopColor|0xFFF89D29|選択している(入力可能になっている)いるテキストボックスの枠色(グラデーション)| |stateFocusedBottomColor|0xFFEF7D22|~| |statePressedTopColor|0xFFFAAA30|タップ中のテキストボックス、&color(#DB4F4F){ツールバー、レス}の枠色(グラデーション)&br()&color(#4F81DB){タップ中のツールバー、レスの背景色(透過度は指定の70%)(0.8.1.38dev)}| |statePressedBottomColor|0xFFF9A72F|~| |||| |unreadTextColor||未読数表示(スレッドタイトル右)の文字色| |unreadTextShadowColor||未読数表示の文字の影| |unreadBorderTopColor||未読数表示の枠色(グラデーション)| |unreadBorderBottomColor||~| |unreadBackgroundTopColor||未読数表示の背景色(グラデーション)| |unreadBackgroundBottomColor||~| |||| |COLOR(#4F81DB):scrollbarColor||レスのスクロールバー(現在位置から「ここまでよんだ」まで)(0.8.1.12dev)| |COLOR(#4F81DB):scrollbarHighlightColor||レスのスクロールバー(未読)(0.8.1.12dev)| **背景画像 JSON(テーマ用ファイル)と同じフォルダに画像を入れる。 ファイル名は「テーマ名.png」の形にする。 例えばテーマ「灰色.night」の背景にしたい場合は「灰色.png」とする。 listBackgroundColorあたりを透過すれば背景を見られるようになる。 基本的にPNG画像しか扱えないが、JPEGの拡張子を.pngに偽装しても認識される模様。 **その他の画像 ツールバーなどの背景画像はテーマ用ファイルに書き込む |BGCOLOR(lightgray):項目名|BGCOLOR(lightgray):参考設定値|BGCOLOR(lightgray):説明| |windowBackground|"bg.png#right#bottom"|背景画像| |toolbarBackground|"toolbar.png"|ツールバー背景画像| |toolbarBackgroundV|"toolbar.v.png"|横画面表示時(ツールバーが縦に表示される端末)のツールバー背景画像| |titlebarBackground|"titlebar.png#hdpi#tileX"|タイトルバーの背景画像| 指定すると関連する各種Colorは無効になります。 ***ファイル名の後ろに記述できるパラメータ >&nowiki(){#tile 縦横に繰り返す} >&nowiki(){#tileX 横方向だけ繰り返す} >&nowiki(){#tileY 縦方向だけ繰り返す} >&nowiki(){#fit 画面の画素数に合わせる} >&nowiki(){#left #right #top #bottom #center 画像の位置を寄せる。#tileは無効になる。} >&nowiki(){#xdpi 320dpiの画像として扱う} >&nowiki(){#hdpi 240dpiの画像として扱う(一般的なWVGA端末でリサイズなしで表示される)} ***ボタン 適用するJSON(テーマ用ファイル)と同じフォルダに画像を入れる |BGCOLOR(lightgray):ファイル名|BGCOLOR(lightgray):説明| |autoScroll.png|自動スクロール| |edit.png|書き込む| |listController.png|リストコントローラー| |orderBoard.png|板| |orderCreated.png|新しい| |orderPost.png|書き込み履歴| |orderRating.png|スレ| |orderRecent.png|閲覧履歴| |orderRes.png|レス順| |orderSpeed.png|勢い| |orderThread.png|スレ順| |orderThreadBoard.png|レス(板順)| |orderTree.png|ツリー| |orderUnread.png|未読| |reload.png|巡回| |scroll.png|空白(タップでスクロール)| |stop.png|停止(自動スクロール)&color(#4F81DB){(巡回(0.8.1.4dev))}| |COLOR(#4F81DB):popupRecent.png|履歴ポップアップ(0.8.1.2dev)| |COLOR(#4F81DB):search.png|検索(0.8.1.16dev)| |COLOR(#4F81DB):pageUp.png|1ページ上(0.8.1.16dev)| |COLOR(#4F81DB):pageDown.png|1ページ下(0.8.1.16dev)| |COLOR(#4F81DB):multiSelect.png|複数選択(0.8.1.16dev?)| |COLOR(#4F81DB):menu.png|メニュー(0.8.1.34dev)| |COLOR(#4F81DB):popupBoard.png|板(ポップアップ)(0.8.1.39dev)| **現在変更できない部分 -板一覧、板カテゴリの文字色 -巡回中のバーの色 -ジェスチャーのとき出る顔文字の文字色 -「書き込む」、フィルターなどのボタンの色 -(ポップアップの被アンカーレスの背景色)※listPopupBackgroundColorとresCheckedBackgroundColorの中間色が使われる -タイトルバーの検索・★アイコン -VIPを含む板の>>1の文字色(TEST) *テーマの配布について **配布するとき ファイル名は「○○○_theme.zip」としてできるだけ他人とかぶらないようにする。 zip内のフォルダの下にテーマファイルや画像を配置する。(zipを解凍せず開いたときフォルダが見える形になる) >○○○_theme.zip >└フォルダ(テーマ名) > ├テーマ.day > └画像.png /2chmate/themeにはこのフォルダがコピーされる。 フォルダが複数ある場合はすべてコピーされる。 フォルダの下にさらにフォルダーを作成してもインストールされない。 文字化けを防ぐためファイル名は半角英数字がいいかも。 パソコンで2バイト文字を使用したテーマを圧縮する場合は、文字コードをUTF-8にすれば多分大丈夫… **配布されているスキンを使用する場合 ファイル名が「○○○_theme.zip」の場合はファイラーなどで開けば自動的に解凍され「/sdcard/2chMate/theme/」にインストールされる。(zipの中身により正常にインストールできない場合もあります。その場合は手動で行ってください) それ以外のファイル名の場合は解凍の上「テーマ用ファイルの作成」を参考にファイルを配置する。 *入れたのに適用されない テーマを切り替えてみる。 間違いがないか確認。コンマが消えてる事(逆に最終行にもコンマが入っている事)も多い。 一旦タスクマネージャーから完全に終了させる。 再インストールしてみる。 それでもできなかったら知らん。 *関連リンク &bold(){2chMate本スレ(2ch)} http://find.2ch.net/?STR=%C0%EC%A5%D6%A5%E9+2chMate &bold(){2chMateスキンスレ(2ch)} http://find.2ch.net/?STR=2chMate+%A5%B9%A5%AD%A5%F3 &bold(){図解に使用したテーマ} http://ux.getuploader.com/android_2ch_skin/download/520/wiki-sample_theme.zip &bold(){テーマの確認用にでも(したらば)} http://jbbs.livedoor.jp/bbs/read.cgi/computer/43302/1322627230/ ---- &link_edit(text=ここを編集) ---- 最近のリンク元 #recent_page_ref(10) ----