テーマについて
スタイルシート設定 (jd.css)
JDimはスタイルシートによるスレビュー表示のカスタマイズをサポートしている。
スタイルシートはキャッシュディレクトリ内にテーマフォルダ(theme/)を作成し
その中に「jd.css」という名前のファイルを作って設定する。
スタイルシートを変更したときはJDimを再起動する。
対応しているプロバティ
| プロパティ名 | 説明 | 備考 |
|---|---|---|
| color | 文字色 | リンクなどJDimの設定メニューから設定する物を除く |
| background-color | 背景色 | |
| border-color | 枠線色 | border-left-color など個別指定も可能 |
| border-style | 枠線形 | solid のみに対応 |
| border-width | 枠線幅 | border-left-width など個別指定も可能 |
| margin | 外余白 | margin-left など個別指定も可能 |
| padding | 内余白 | padding-left など個別指定も可能 |
| text-align | 位置 | left, center, right のみに対応 |
注意: スタイルシートはfont系のプロパティに対応していない。 フォント設定はメニューバーからダイアログを開いておこなう。
色の指定方法
blackやwhiteなどの定義済み色名か「#RRGGBB」形式で指定する。定義済み色名の種類は次の通り。
- CSS Level 1
- red
- fuchsia
- purple
- maroon
- yellow
- lime
- green
- olive
- blue
- aqua
- teal
- navy
- white
- silver
- gray
- black
- CSS Level 2 (v0.6.0+からサポート)
- orange
- CSS Colors Level 3 (v0.6.0+からサポート)
- X11色, 数が多いため下記リンク参照
- CSS Colors Level 4 (v0.6.0+からサポート)
- rebeccapurple
外部リンク: <color> - CSS: カスケーディングスタイルシート | MDN
単位
px, em のみに対応。単位を省略すると px になる。
レスの構造
スレ内のひとつひとつのレスは以下のような構造となっている。
NUMBERやNAMEなどの要素については「レス構造設定」の項で説明する。
<div class="res">
<div class="title"><NUMBER/> <NAMELINK/>：<NAME/> <MAIL/>： <DATE/> <ID/></div>
<div class="mes"><MESSAGE/><IMAGE/></div>
</div>
定義済みのセレクタ
注意: jd.css でクラス指定する際は div.res{} と書かずに .res{}
と要素名(div)を書かずにクラス名だけを指定すること。
- body
- スレビューのbody要素
- .res
- ひとつのレスの要素
- .title
- ひとつのレスのヘッダ行
- .mes
- ひとつのレスの本文
- .separator
- ここまで読んだ。
<div class="separator">ここまで読んだ</div>という構造になっている。 - .comment
- コメントブロック。
<div class="comment">任意のコメント</div>という構造になっている。 - imgpopup
- 画像ポップアップのbody要素。color, background-color, border-color, border-width, margin プロバティのみ(単位はpxのみ)に対応。
レス構造設定 (Res.html)
スレ内のひとつひとつのレスは「レスの構造」の項で示した構造となっている。
レスの構造はキャッシュディレクトリ内にテーマフォルダ(theme/)を作成し
その中に「Res.html」という名前のファイルを作って指定することが出来る。
レスの構造を変更したときはJDimを再起動する。
使用可能な要素
<div> のみ
置換可能な定義済み要素
Res.htmlでは次のように定義済み要素を指定して文字列の置換ができる。
| 定義済み要素 | 説明 |
|---|---|
| <NUMBER/> | レス番号 |
| <NAMELINK/> | 名前メニュー表示のリンク。「名前」の文字列に置換される。 |
| <NAME/> | 名前 |
| <MAIL/> | メール |
| <DATE/> | 日付 |
| <ID/> | ID |
| <MESSAGE/> | 本文。「br="no"」属性を指定すると本文の改行をしない。 |
| <IMAGE/> | インライン画像 |
注意点
<div class="res">〜</div>はRes.htmlで指定する必要が無い。 つまり Res.htmlに"hoge"とだけ指定した場合、レスの構造は以下のようになる。<div class="res"> hoge </div>- div の中に div を配置することは出来ない( 上の
<div class="res">は例外 )。 - クラス名は定義済みの物だけではなくて自由に指定できる。
フォント設定
フォント設定はメニューバーの設定(C)＞フォントと色(F)から設定ダイアログを開いておこなう。
| 項目 | 適用範囲 |
|---|---|
| スレビュー | スレビューのレス本文 |
| メール欄 ※1 | スレビューやポップアップのレス番号、名前、メール、日付、ID |
| ポップアップ | ポップアップウインドウのレス本文 |
| アスキーアート | スレビューやポップアップのアスキーアートと判定されたレス本文 |
| 板一覧／お気に入り | 板一覧／お気に入りなどサイドバーの項目 |
| スレ一覧 | スレ一覧の列名と項目 |
| 書き込みビュー | 書き込みビューの名前欄、メール欄、レス欄 |
- ※1 – バージョン0.3.0-20200301から追加。それより前は「スレビュー」の適用範囲に含まれる。
アイコン設定
キャッシュディレクトリ内にアイコンテーマのフォルダ(theme/icons/)を作成し
その中に対応するアイコン画像を置くとJDimのアイコンが置き換わる。
アイコン画像を変更したときはJDimを再起動する。
- 画像形式は一般的な物なら大体使用可能 ( png, jpg, svg, gif, bmp, その他)
- 画像ファイルのサイズは任意で良い
- ツールバーボタンのアイコンより大きな画像は 24x24 にサイズ調整される1 (V0.7.0+から変更)
- ファイル名は「アイコン名.拡張子 」(例) reload.jpg、 quit.png
- ファイル名の一覧はgitリポジトリにある ヘッダファイル(iconfiles.h) を参照すること
使用例
クリックで拡大
キャッシュディレクトリ内にテーマフォルダ(theme/)を作成し
その中にRes.html(下)とjd.cssをコピーしてJDimを起動する。
<div class="title"><NUMBER/> <NAMELINK/>：<NAME/> <MAIL/></div>
<div class="mes"><MESSAGE/><IMAGE/></div>
<div class="id"><ID/></div>
<div class="date"><DATE/></div>
-
視認性を良くするため組み込みのアイコン( 16x16 )よりサイズを一回り大きくとる ↩