概要 ▶ IDEA*IDEAで紹介されていたブラウザをメモ帳に変えるコードを使いやすい様に改造してみました。すぐに文字が入力できます。また、お好みの設定も簡単です。
本ページはプロモーションが含まれている場合があります
本ページはプロモーションが含まれている場合があります
DEMICOUPER CUT OFF MEMO by yto, on Flickr
「たった一行でブラウザをシンプルなメモ帳に変える方法 | IDEA*IDEA」で
data:text/html, <html contenteditable>
をFirefoxやChromeやSafariなどのブラウザのアドレス欄にコピペすると、ブラウザのタブ全体がメモ帳みたいに文字入力ができるようになる、というものが紹介されていました。
これはdata URIというフォーマットを利用したものですが、おもしろいですね。
でもネタ元のページを見たら、なんか色々な方がカスタマイズをしまくっていたので、マネして自分が使いやすそうなコードを書いてみました。
カスタマイズしたブラウザをメモ帳にするコード
data:text/html;charset=utf-8, <title>TextEdit</title><textarea style="font-size:1.5em;line-height:1.5;width:40em;height:100%;border:none;outline:none;margin:2em;" autofocus />
※montasさんのコードを基本に作りました。
特徴
- 文字コードをUTF-8にした
- タブに「TextEdit」と表示した（別名で保存時にファイル名の候補になる）
- 見やすくするために文字のサイズを大きくした
- 見やすくするために行間を広げた
- あんまり横に長いとイヤなので40文字で改行するようにした
- タブの表示領域ギリギリから始まると、見づらいので2文字分余白を空けた
- 「autofocus」を指定する事で、すぐに文字入力ができる（IDEA*IDEAのコードはタブの表示領域をクリックしないとダメなのだ）
見ると分かりますが、自分好みの文字の大きさや行間などに数値指定で変更できるので、みなさんもお好みの設定をしてみてくださいね。
それでは。