■2chMateを使いこなそう スキン色設定編


作者によるテーマ解説も合わせて読んでください。
https://sites.google.com/site/nikenonomonooki/2chMate/theme

以下、特に表記のないものはバージョン0.8.2時点

テーマ(スキン)の変更

メニュー→その他→テーマ(タブレット用モード:メニュー→テーマ) または ジェスチャー
で切り替える。

テーマ用ファイルの作成

テーマ用ファイルは文字やツールバーなどの配色を指定する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に準じる。
最後の項目だけ末尾にカンマが不要なので注意。

色指定の方法

0x11223344
 11:不透明度(透明00←→FF不透明)
 22:赤 33:緑 44:青 (16進数)
黒色0xFF000000
白色0xFFFFFFFF
赤色0xFFFF0000
黄色0xFFFFFF00
水色0xFFAFDFE4
透明   0x00000000 (10進数表記で0と書いてもいい)

透明度の目安

16進数 透明度(%)
00 100.0
11 93.3
22 86.7
33 80.0
44 73.3
55 66.7
66 60.0
77 53.3
7F 49.8
80 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時点。GooglePlay版(0.8.2)までに変更、追加された項目もあります。


現在指定できる項目一覧

作者の「灰色.night」(9月30日(0.7.6.35dev)現在)参考
青色の項目はストア版(0.8.2)にはありません
赤色の項目はストア版(0.8.2)から変更または削除されています
マップ付きスクロールバー(0.8.5.22dev以上、実験的)のマーカーも同色
上の図解も参考にしてください。
項目名 参考設定値 説明
windowBackgroundColor 0 最背面の背景色*1、AA画像ビューア表示の背景色
actionbarBackgroundColor 0 アクションバーの背景色(Android 3.0以上)
progressBarBackgroundColor プログレスバー(巡回の進行状況)の背景色(0.8.3.12dev)
progressBarPrimaryColor プログレスバーの色(0.8.3.12dev)
tabbarTopBorderColor タブバーの上端の色
tabbarHighlightColor tabbarTopBorderColorより1ドット下
tabbarLightColor タブバーの背景色(グラデーション)
tabbarDarkColor
tabbarShadowColor tabbarBottomBorderColorより1ドット上
tabbarBottomBorderColor タブバーの下端の色
tabbarTextColor タブバーの文字色
tabbarTextShadowColor タブバーの文字の影
titlebarTopBorderColor 0 タイトルバーの上端の色
titlebarHighlightColor 0 タイトルバーの上端の色(titlebarTopBorderColorより1ドット下)*2
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ドット上)*3
toolbarBottomBorderColor 0 ツールバーの下端の色
toolbarTextColor 0xffDEDEDE ツールバーの文字色
toolbarTextShadowColor 0xff000000 ツールバーの文字の影
toolbarTabColor 0xff1A2553 ツールバー選択中タブの背景色
textPrimaryColor 0xffE6E6E6 HOME・板表示のときのスレッドタイトル
textSecondaryColor 0xff9C9C9C HOME・板表示のときの日付・勢い・レス数、未読の「履歴のスレに~」の文字色
textEmphasisColor 0xffDA8F92 板表示のときの日付・勢い・レス数の変化後*4、「DAT落ち」の文字色
textHitBackgroundColor 0xffAF55BF 検索でヒットした文字列の背景色、「NG対象ですが1は表示します」の背景色
listCategoryTopBorderColor スレ一覧のカテゴリの上端の色
listCategoryHighlightColor listCategoryTopBorderColorより1ドット下*5
listCategoryLightColor 0xff2d2d2d スレ一覧のカテゴリの背景色(グラデーション)
listCategoryDarkColor 0xff353535
listCategoryShadowColor listCategoryBottomBorderColorより1ドット上*6
listCategoryBottomBorderColor スレ一覧のカテゴリの下端の色
listCategoryTextColor 0xFFE0E0E0 スレ一覧のカテゴリの文字色
listBackgroundColor 0xff202020 リスト表示部の基本背景色(スレ一覧、スレ画面などで共通)
listDividerColor 0xff555555 スレ一覧の区切りの色
listPopupBackgroundColor 0xff373737 ポップアップの背景色
listPopupShadowColor 0xff037EDA ポップアップの下端の影
listPopupBorderColor レスポップアップ外枠(0.8.5.20dev)*7
listActivatedBackgroundColor 履歴ポップアップなどの時選択中のスレの背景色、スレ一覧複数選択時の背景色
cachedItemTextColor 0xff00DBDB 板表示、検索などのときキャッシュ済みスレッドの文字色
unreadTextColor 未読数表示(スレッドタイトル右)、新着表示(板のスレ一覧)(0.5.3.22dev)の文字色
unreadTextShadowColor 未読数、新着表示(0.5.3.22dev)の文字の影
unreadBorderTopColor 未読数、新着表示(0.5.3.22dev)の枠色(グラデーション)
unreadBorderBottomColor
unreadBackgroundTopColor 未読数、新着表示(0.5.3.22dev)の背景色(グラデーション)
unreadBackgroundBottomColor
resHeaderTextColor 0xff8C8F9F レスヘッダー(名前欄)文字色
resAnchorTextColor 0xff9ABADA アンカー、本文中のID:xxxの色
resBodyTextColor 0xffE6E6E6 レス文字色*8
resCategoryTopBorderColor レスカテゴリ(「ここまで読んだ」「おわり」など)の上端の色
resCategoryHighlightColor resCategoryTopBorderColorより1ドット下*9
resCategoryLightColor 0xff000000 「ここまで読んだ」「おわり」などの背景色(グラデーション)
resCategoryDarkColor 0xff101010
resCategoryShadowColor resCategoryBottomBorderColorより1ドット上*10
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 通常リンク(タップ中の色は赤→青、緑→赤、青→緑となる。*11)
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 タップ中のテキストボックス、ツールバー、レスの枠色(グラデーション)
タップ中のツールバー、レスの背景色(透過度は指定の70%)
statePressedBottomColor 0xFFF9A72F
scrollbarColor レスのスクロールバー(現在位置から「ここまでよんだ」まで)(0.8.5.13dev未満)
スクロールバー(0.8.5.13dev)
scrollbarHighlightColor レスのスクロールバー(未読)(0.8.5.13dev未満)
menuDividerColor メニューの区切り(0.8.5.20dev)

背景画像

JSON(テーマ用ファイル)と同じフォルダに画像を入れる or windowBackgroundで指定(下記)
ファイル名は「テーマ名.png」の形にする。
例えばテーマ「灰色.night」の背景にしたい場合は「灰色.png」とする。
listBackgroundColorあたりを透過すれば背景を見られるようになる。
windowBackgroundで指定した場合はそちらが優先される。

その他の画像

ツールバーなどの背景画像はテーマ用ファイルに書き込む
項目名 参考設定値 説明
windowBackground "bg.png#right#bottom" 背景画像
toolbarBackground "toolbar.png" ツールバー背景画像
toolbarBackgroundV "toolbar.v.png" 横画面表示時(ツールバーが縦に表示される端末)のツールバー背景画像
titlebarBackground "titlebar.png#hdpi#tileX" タイトルバーの背景画像
指定すると関連する各種Colorは無効になります。

ファイル名の後ろに記述できるパラメータ

#tile 縦横に繰り返す
#tileX 横方向だけ繰り返す
#tileY 縦方向だけ繰り返す
#fit 画面の画素数に合わせる
#left #right #top #bottom #center 画像の位置を寄せる。#tileは無効になる。
#xhdpi 320dpiの画像として扱う
#hdpi 240dpiの画像として扱う(一般的なWVGA端末でリサイズなしで表示される)

ボタン

適用するJSON(テーマ用ファイル)と同じフォルダに画像を入れる
ファイル名 説明
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 1ページ下
multiSelect.png 複数選択
menu.png メニュー
popupBoard.png 板(ポップアップ)
レス長押しメニュー(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 共有(記憶)
一度使うと記憶させたアプリのアイコンになる
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」に)

関連リンク

【専ブラ】5ちゃんねるブラウザ 「ChMate」
https://egg.5ch.net/test/read.cgi/applism/1552712548/
2chMate スキン総合
https://egg.5ch.net/test/read.cgi/smartphone/1536666367/
図解に使用したテーマ
http://ux.getuploader.com/android_2ch_skin/download/520/wiki-sample_theme.zip
テーマの確認用にでも(したらば)
http://jbbs.livedoor.jp/bbs/read.cgi/computer/43302/1322627230/



最近のリンク元
申し訳ありませんが、recent_page_ref プラグインは提供を終了し、ご利用いただけません。

タグ:

+ タグ編集
  • タグ:

このサイトはreCAPTCHAによって保護されており、Googleの プライバシーポリシー利用規約 が適用されます。

最終更新:2019年04月25日 08:26

*1 背景画像ファイルが存在する場合は画像優先

*2 titlebarTopBorderColor未指定の場合はタイトルバー上端

*3 toolbarBottomBorderColor未指定の場合はツールバーの下端

*4 日付が新しい、勢い・レス数が高いほどtextSecondaryColorからこの色に近づく

*5 listCategoryTopBorderColor未指定の場合はスレ一覧のカテゴリ上端

*6 listCategoryBottomBorderColor未指定の場合はスレ一覧のカテゴリ下端

*7 夜系で値が0の場合はstateFocusedTopColor

*8 ツリー表示時の未読レスが参照している既読レスには透過度50%のこの色が使われる

*9 resCategoryTopBorderColor未指定の場合はレスカテゴリ上端

*10 resCategoryBottomBorderColor未指定の場合はレスカテゴリ下端

*11 HSVで240度。例えば0xFF112233ならタップ中は0xFF223311。よって無彩色では変化しない