最近、Janetterを使い始めたのですが、入力ボックスが小さくて使いにくかったのでカスタマイズしました。

　そのメモです。

（2011/10/14 - 21:20 変更：カスタムCSSの使い方を習ったので書き直しました）

---

● 入力ボックスの改良

　スクリーンショットのように変更します。手順は以下で説明します。

---

● デバッグモードでの起動

　パスの末尾に「--debug」と付けて起動します。これで、各種デバッグ操作ができるようになります。

「〜\Janetter2\bin\Janetter.exe --debug」のように指定します。

　デバッグ操作は、タイトルバーを右クリックして行います。



「Debveloper Tools」を選ぶと、Chromeと同じようなデバッグダイアログが表示されます。

「Test」を選ぶと、デバッグモードで再起動します。CSSの変更の確認は、この「Test」でいけました。

□開発者向け情報

---

● ユーザースタイルシート

「%APPDATA%\Jane\Janetter2\UserStyleSheets」フォルダ内に「Custom.css」があるので、このファイル内に書き込みます。

例）Windows Vista
C:\Users\hoge\AppData\Roaming\Jane\Janetter2\UserStyleSheets\Custom.css

「Custom.css」以外のファイルを作った場合、自動で読み込まれるそうです。

□ユーザースタイルシート

---

● 入力ボックスのサイズの変更

「Janetter2\Theme\Common\css\base.css」の「.tweet-edit」がターゲットです。ここが入力ボックスの外形になります。

　以下を上記の「Custom.css」に書き込みます。「max-height」と「height」を変更しています。これで設定が上書きされます。

.tweet-edit{
　　width: 100%;
　　border: none;
　　font-size: 12px;
　　resize: none;
　　line-height: 1.5em;
　　min-height: 1.5em;
　　max-height: 12em;　　/* max-height: 6em; */
　　height: 12em;　　/* height: 4.5em; */
　　overflow-x: auto;
　　overflow-y: scroll;
　　white-space: pre-wrap;
　　word-wrap: break-word;
　　outline: none;
　　background-color: #FFF;
　　color: #111;
}

---

● 入力ボックスの文字サイズの変更

「Janetter2\Theme\Common\css\style.css」の「.expanded textarea」の各文字をがターゲットです。ここが入力欄の文字サイズになります。

　以下を上記の「Custom.css」に書き込みます。これで設定が上書きされます。

.font-tiny .expanded textarea{
　　font-size: 18px;　　/* font-size: 10px; */
}
.font-small .expanded textarea{
　　font-size: 19px;　　/* font-size: 11px; */
}
.font-normal .expanded textarea{
　　font-size: 20px;　　/* font-size: 12px; */
}
.font-big .expanded textarea{
　　font-size: 21px;　　/* font-size: 14px; */
}
.font-giant .expanded textarea{
　　font-size: 22px;　　/* font-size: 16px; */
}
.font-ultragiant .expanded textarea{
　　font-size: 23px;　　/* font-size: 18px; */
}

---

　これで、「Janetter」が少し使いやすくなりました。HTMLを直接いじれるようなので、スクリプトを仕込むのも1つの手ですね。

　というわけで、もうしばらく使ってみようと思います。