「2chMateを使いこなそう スキン色設定編」の編集履歴(バックアップ)一覧はこちら

2chMateを使いこなそう スキン色設定編」の最新版変更点

追加された行は青色になります。

削除された行は赤色になります。

 [[トップページ]]>[[2chMate]]>
 *■2chMateを使いこなそう スキン色設定編
 ----
 作者によるテーマ解説も合わせて読んでください。
 https://sites.google.com/site/nikenonomonooki/2chMate/theme
 
 以下、特に表記のないものはバージョン0.8.2時点
 #contents(fromhere=true)
 ----
 *テーマ(スキン)の変更
  メニュー→その他→テーマ(タブレット用モード:メニュー→テーマ) または ジェスチャー
 で切り替える。
 
 *テーマ用ファイルの作成
 テーマ用ファイルは文字やツールバーなどの配色を指定する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){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|1ページ下|
 |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(){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(){【専ブラ】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)
 ----