「2chMateを使いこなそう スキン色設定編」の編集履歴（バックアップ）一覧に戻る
[[トップページ]]>[[2chMate]]>
*■2chMateを使いこなそう スキン色設定編
----
作者によるテーマ解説も合わせて読んでください。
https://sites.google.com/site/nikenonomonooki/2chMate/theme
以下、特に表記のないものはバージョン0.8.2時点
#contents(fromhere=true)
----
*テーマ（スキン）の変更
メニュー→その他→テーマ（タブレット用モード:メニュー→テーマ） または ジェスチャー
で切り替える。
*テーマ用ファイルの作成
テーマ用ファイルは文字やツールバーなどの配色を指定するtxtファイルと背景のpngファイルの２つが必要であり、以下の場所にフォルダを作成し置く。
/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){GooglePlay版(0.8.2)までに変更、追加された項目もあります。}
&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.2)にはありません}
&color(#db4f4f){赤色の項目はストア版(0.8.2)から変更または削除されています}
マップ付きスクロールバー(0.8.5.22dev以上、実験的)のマーカーも同色
上の図解も参考にしてください。
|BGCOLOR(lightgray):項目名|BGCOLOR(lightgray):参考設定値|BGCOLOR(lightgray):説明|
|windowBackgroundColor|0|最背面の背景色&footnote(背景画像ファイルが存在する場合は画像優先)、AA画像ビューア表示の背景色|
|actionbarBackgroundColor|0|アクションバーの背景色(Android 3.0以上)|
||||
|COLOR(#4F81DB):progressBarBackgroundColor||プログレスバー(巡回の進行状況)の背景色(0.8.3.12dev)|
|COLOR(#4F81DB):progressBarPrimaryColor||プログレスバーの色(0.8.3.12dev)|
||||
|tabbarTopBorderColor||タブバーの上端の色|
|tabbarHighlightColor||tabbarTopBorderColorより1ドット下|
|tabbarLightColor||タブバーの背景色（グラデーション）|
|tabbarDarkColor||~|
|tabbarShadowColor||tabbarBottomBorderColorより1ドット上|
|tabbarBottomBorderColor||タブバーの下端の色|
|tabbarTextColor||タブバーの文字色|
|tabbarTextShadowColor||タブバーの文字の影|
||||
|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|検索でヒットした文字列の背景色、「NG対象ですが1は表示します」の背景色|
||||
|listCategoryTopBorderColor||スレ一覧のカテゴリの上端の色|
|listCategoryHighlightColor||listCategoryTopBorderColorより1ドット下&footnote(listCategoryTopBorderColor未指定の場合はスレ一覧のカテゴリ上端)|
|listCategoryLightColor|0xff2d2d2d|スレ一覧のカテゴリの背景色（グラデーション）|
|listCategoryDarkColor|0xff353535|~|
|listCategoryShadowColor||listCategoryBottomBorderColorより1ドット上&footnote(listCategoryBottomBorderColor未指定の場合はスレ一覧のカテゴリ下端)|
|listCategoryBottomBorderColor||スレ一覧のカテゴリの下端の色|
|listCategoryTextColor|0xFFE0E0E0|スレ一覧のカテゴリの文字色|
|listBackgroundColor|0xff202020|リスト表示部の基本背景色（スレ一覧、スレ画面などで共通）|
|listDividerColor|0xff555555|スレ一覧の区切りの色|
|listPopupBackgroundColor|0xff373737|ポップアップの背景色|
|listPopupShadowColor|0xff037EDA|ポップアップの下端の影|
|COLOR(#4F81DB):listPopupBorderColor||レスポップアップ外枠(0.8.5.20dev)&footnote(夜系で値が0の場合はstateFocusedTopColor)|
|listActivatedBackgroundColor||履歴ポップアップなどの時選択中のスレの背景色、スレ一覧複数選択時の背景色|
||||
|cachedItemTextColor|0xff00DBDB|板表示、検索などのときキャッシュ済みスレッドの文字色|
||||
|unreadTextColor||未読数表示（スレッドタイトル右）、&color(#4F81DB){新着表示（板のスレ一覧）(0.5.3.22dev)}の文字色|
|unreadTextShadowColor||未読数、&color(#4F81DB){新着表示(0.5.3.22dev)}の文字の影|
|unreadBorderTopColor||未読数、&color(#4F81DB){新着表示(0.5.3.22dev)}の枠色(グラデーション)|
|unreadBorderBottomColor||~|
|unreadBackgroundTopColor||未読数、&color(#4F81DB){新着表示(0.5.3.22dev)}の背景色(グラデーション)|
|unreadBackgroundBottomColor||~|
||||
|resHeaderTextColor|0xff8C8F9F|レスヘッダー（名前欄）文字色|
|resAnchorTextColor|0xff9ABADA|アンカー、本文中のID:xxxの色|
|resBodyTextColor|0xffE6E6E6|レス文字色&footnote(ツリー表示時の未読レスが参照している既読レスには透過度50%のこの色が使われる)|
|resCategoryTopBorderColor||レスカテゴリ(「ここまで読んだ」「おわり」など)の上端の色|
|resCategoryHighlightColor||resCategoryTopBorderColorより1ドット下&footnote(resCategoryTopBorderColor未指定の場合はレスカテゴリ上端)|
|resCategoryLightColor|0xff000000|「ここまで読んだ」「おわり」などの背景色（グラデーション）|
|resCategoryDarkColor|0xff101010|~|
|resCategoryShadowColor||resCategoryBottomBorderColorより1ドット上&footnote(resCategoryBottomBorderColor未指定の場合はレスカテゴリ下端)|
|resCategoryBottomBorderColor||レスカテゴリの下端の色|
|resCategoryTextColor|0xFFE0E0E0|「ここまで読んだ」「おわり」などの文字色|
|resHeaderEmphasisTextColor|0xffFF0000|被アンカーレス番号(1-2)、書き込み回数(自動あだ名)の色(2-3)}|
|resHeaderEmphasisTextColor2||被アンカーレス番号(3-4)、書き込み回数(自動あだ名)の色(4-5)|
|resHeaderEmphasisTextColor3||被アンカーレス番号(5-6)、書き込み回数(自動あだ名)の色(6-7)|
|resHeaderEmphasisTextColor4||被アンカーレス番号(7以上)、書き込み回数(自動あだ名)の色(8以上)|
|resHeaderBackgroundColor|0|レスヘッダー（名前欄）背景色|
|resCheckedBackgroundColor|0xff283C88|ポップアップ時の元レスの背景色|
|resMarkedBackgroundColor|0xff494949|自分のレス左のバーの色|
|resReplyBackgroundColor||自分のレスへの返信（左のバー、ID横の返信マーク）|
|resDividerColor|0xff555555|レスの区切りの色|
||||
|linkTextColor|0xff9AB5D6|通常リンク(タップ中の色は赤→青、緑→赤、青→緑となる。&footnote(HSVで240度。例えば0xFF112233ならタップ中は0xFF223311。よって無彩色では変化しない))|
|linkBackgroundColor|0|通常リンク背景色|
|link2chTextColor|0xff9AD6A9|2chリンク|
|link2chBackgroundColor|0|2chリンク背景色|
|linkImageTextColor|0xffD6B89A|画像リンク|
|linkImageBackgroundColor|0|画像リンク背景色|
||||
|editTextColor|0xFFFFFFFF|テキストボックスの文字色|
|editBorderTopColor|0xFF555555|テキストボックスの枠色(グラデーション)|
|editBorderBottomColor|0xFF777777|~|
|editBackgroundShadowColor|0xFF000000|テキストボックス内側の影|
|editBackgroundColor|0xFF101010|テキストボックスの背景色|
|editHighlightBackgroundColor||テキストボックス内のハイライト(次スレ作成時に修正された部分など)|
||||
|dialogTitleColor||ダイアログ(スレ・レス長押のメニュー等)のタイトル文字色|
|dialogBackgroundColor||ダイアログの背景色|
||||
|ratingColor5|0xffF08E91|★5つ（スレタイ左、タブ下(タブレット用モード))|
|ratingColor4|0xffE699CD|★4つ|
|ratingColor3|0xffCEA2DD|★3つ|
|ratingColor2|0xffB0A5DA|★2つ|
|ratingColor1|0xffABB7D3|★1つ|
|ratingColor0|0xff909090|★0|
||||
|stateFocusedTopColor|0xFFF89D29|選択している（入力可能になっている）いるテキストボックスの枠色(グラデーション)|
|stateFocusedBottomColor|0xFFEF7D22|~|
|statePressedTopColor|0xFFFAAA30|タップ中のテキストボックス、ツールバー、レスの枠色(グラデーション)&br()タップ中のツールバー、レスの背景色(透過度は指定の70%)|
|statePressedBottomColor|0xFFF9A72F|~|
||||
|scrollbarColor||&color(#db4f4f){レスのスクロールバー（現在位置から「ここまでよんだ」まで）(0.8.5.13dev未満)}&br()&color(#4F81DB){スクロールバー(0.8.5.13dev)}|
|scrollbarHighlightColor||レスのスクロールバー（未読）&color(#db4f4f){(0.8.5.13dev未満)}|
||||
|COLOR(#4F81DB):menuDividerColor||メニューの区切り(0.8.5.20dev)|
**背景画像
JSON(テーマ用ファイル)と同じフォルダに画像を入れる or windowBackgroundで指定(下記)
ファイル名は「テーマ名.png」の形にする。
例えばテーマ「灰色.night」の背景にしたい場合は「灰色.png」とする。
listBackgroundColorあたりを透過すれば背景を見られるようになる。
windowBackgroundで指定した場合はそちらが優先される。
**その他の画像
ツールバーなどの背景画像はテーマ用ファイルに書き込む
|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(){#xhdpi 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|停止（自動スクロール、巡回）|
|popupRecent.png|履歴ポップアップ|
|search.png|検索|
|pageUp.png|1ページ上|
|pageDown.png|１ページ下|
|multiSelect.png|複数選択|
|menu.png|メニュー|
|popupBoard.png|板（ポップアップ）|
|>|BGCOLOR(lightgray):レス長押しメニュー&color(#4F81DB){(0.8.3.22?)}|
|copy.png|コピー|
|copyAll.png|すべてコピー|
|copySelection.png|選択してコピー|
|copyID.png|IDをコピー|
|copyBody.png|本文をコピー|
|switchAA.png|AA表示(AA解除)|
|switchMark.png|マーク(マーク解除)|
|ng.png|NG...|
|ngLocal.png|ローカルNG|
|ngID.png|NGID|
|reply.png|返信|
|share.png|共有...|
|share0.png|共有(記憶)&br()一度使うと記憶させたアプリのアイコンになる|
|share1.png|~|
|share2.png|~|
|share3.png|~|
|shareLast.png|~|
**現在変更できない部分
-板一覧、板カテゴリの文字色
-ジェスチャーのとき出る顔文字の文字色
-「書き込む」、フィルターなどのボタンの色
-(ポップアップの被アンカーレスの背景色)※listPopupBackgroundColorとresCheckedBackgroundColorの中間色が使われる
-タイトルバーの★アイコン
-VIPを含む板の>>1の文字色
*テーマの配布について
**配布するとき
ファイル名は「○○○_theme.zip」としてできるだけ他人とかぶらないようにする。
zip内のフォルダの下にテーマファイルや画像を配置する。(zipを解凍せず開いたときフォルダが見える形になる)
>○○○_theme.zip
>└フォルダ（テーマ名）
> ├テーマ.day
> └画像.png
/2chmate/themeにはこのフォルダがコピーされる。
フォルダが複数ある場合はすべてコピーされる。
フォルダの下にさらにフォルダーを作成してもインストールされない。
文字化けを防ぐためファイル名は半角英数字がいいかも。
パソコンで2バイト文字を使用したテーマを圧縮する場合は、文字コードをUTF-8にすれば多分大丈夫…
**配布されているスキンを使用する場合
ファイル名が「○○○_theme.zip」の場合はファイラーなどで開けば自動的に解凍され「/sdcard/2chMate/theme/」にインストールされる。(zipの中身により正常にインストールできない場合もあります。その場合は手動で行ってください)
それ以外のファイル名の場合は解凍の上「テーマ用ファイルの作成」を参考にファイルを配置する。
*入れたのに適用されない
テーマを切り替えてみる。
間違いがないか確認。コンマが消えてる事（逆に最終行にもコンマが入っている事）も多い。
一旦タスクマネージャーから完全に終了させる。
再インストールしてみる。
それでもできなかったら知らん。
*その他
**フォント
フォントの変更はテーマではないが一応…
フォントの変更は設定でできる。
そのままでは本文のみで、ヘッダーやメニュー他には適用されない。
本文以外にも好きなフォントを使用したい場合には、本文に使うフォントをリネームして「.ui」を追加する。（たとえば「mate.otf」を使いたい場合は「mate.ui.otf」に）
**関連リンク
&bold(){【専ブラ】5ちゃんねるブラウザ 「ChMate」}
https://egg.5ch.net/test/read.cgi/applism/1552712548/
&bold(){2chMate スキン総合}
https://egg.5ch.net/test/read.cgi/smartphone/1536666367/
&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)
----
