Simpletext.wsをカスタマイズしてWindowsでWriteRoom風につかう。

最近iPhoneのWriteRoomというアプリを使い始めました。
かなり気に入ったのですがWindows版クライアントがありません。
DarkRoomというのがあるのですが残念なことにsimpletex.wsと同期する機能がなくてiPhone、simpletex.ws、と組み合わせるにはちょっと面倒です。
そこでsimpletex.wsをWriteRoom風にカスタマイズしてみました。

Chromeに Chrome Stylist という拡張機能を入れまして
色を黒白逆に、フォントサイズを小さく、行間を広く、paddingを広く
そして F11(全画面表示) これでかなりそれっぽくなりました。


writeroomcss.JPG


CSSの変更内容にご興味あるかたは続きをどうぞ。


さて、スタイルシートの変更内容ですが
オリジナル(http://www.simpletext.ws/documents/Documents.css)をコピーしてきて
以下のように書き換えて
http://www.simpletext.ws/documents/ 以下に適応させています。
太字の部分が変更追加したものです。


body { margin:0; padding:0; background:black; color:white; font:1em 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; font-size:0.9em; line-height:1.4em;}
a { color:white; }

textarea { outline:none; resize:none; background:black; color:white; line-height:1.4em; font-size:0.9em; }

textarea:focus { outline:none; background:black; color:white; line-height:1.4em; font-size:0.9em; }
h1, h2 { margin:0; padding:0 }
hr { border:none; height:1px; background-color:black; }

#loading { margin:0.5em; }

.menu { width:100%; padding:0.25em; font-weight:bold; border-bottom:1px solid white; }
.menuItem { margin:0 0.5em; white-space:nowrap; font-weight:bold; text-decoration:none; cursor:hand; cursor:pointer; }
.menuItem:hover { text-decoration:underline; }

.disabled { color:#777; cursor:default; }
.disabled:hover { text-decoration:none; }

.title-bar { border-bottom:1px solid white; text-align:center; width:100%; padding:0.25em; background-image: url('title-bar.png'); background-repeat: repeat-x; background-position:50%; }
.title { font-weight:bold; background:black; padding:0 1em; }

.content-container { width:100%; height:100%; padding:2em 20em 2em 20em; }
.content { border:none; font:1.0em Helvetica; width:100%; height:100%; font-size:0.9em; line-height:1.4em; }

.scrolled-content { padding-right:0.5em; }
.revision .content { margin-top:0.25em; padding-top:0.25em; }

ul { margin:0.5em; }
.conflict-view { margin-bottom:1em; padding:0.5em; border:1px solid white; }
.conflict-diffs { margin-top:1em; }

::selection{
background:ddd;
color:#fff;
}

コメント(2)

はじめまして。
私もWriteRoomを使い出してはまっている最中のものです。
すごく参考になりました。ありがとうございます。

上記のCSSを手打ちで試してみて一点気づいたので報告させていただきます。
2行目のa(アンカー)の文字色も白へ変更になっていたのですね。
ここを他の箇所と同様に太字に変えていただけると、あとから来る人の参考になると思います。

手打ちせずコピペしろって話ですねw

yaokiyaoki さん、ご指摘ありがとうございます!
さっそく修正しておきました。

このブログ記事について

このページは、砂智久が2010年7月 8日 16:23に書いたブログ記事です。

ひとつ前のブログ記事は「6月にみた映画(8本)」です。

次のブログ記事は「遊んで夜明け」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。