SublimeTextで編集したEvernoteの見た目をスタイリッシュにして見やすくしよう！
[
こんにちは、えんぞーです。
結構前に「Evernote の編集を SublimeText でやるとすごく便利！」と言った記事を書いたのですが、今回は編集したノートの見た目について。
前の記事書いた時に続けざまに投稿しておけばよかったのですが、すっかり忘れていました。
スタイリッシュにとは言え、やれることが限られているので少しでも見やすくなればいいよね程度です。
基本的には Evernote のエディタ部分が使いづらいから SublimeText で書けたら便利だなって所から始まってます。（しかもマークダウン記法で）
ちょっとしたメモだったりレポート書くにはとても便利なので興味ある人は一度お試し下さいｗ
見た目ってどのくらい弄れるの？
そもそも「sublime-evernote」という SubliteText のプラグインを使用しているので、このプラグインで出来る範囲という事になります。
上記のページに書いてある程度が出来る事ということになります。
実際に私が適応させている状態をサンプルとして出しますと、
左が何もしていない状態で右が設定を付け足し状態です。
流石に何もしていない状態よりは見やすくなっていると思います。
ちなみに上記ページの実際の URL はこちら
SublimeText で編集した Evernote の見た目をカスタマイズ
記載している内容はこちら。
1# H1の場合
2
3普通のテキストはこの様に表示されます。
4
5決まったフォーマットで書けるのは後で見やすいし書いてる時のモチベーションも変わってきますｗ
6
7**強調表示**は弄れないみたいなのでこのままですね。
8
9## H2の場合
10
11H2は多用しますよねぇ。
12
13### H3の場合
14
15H3位になるとたまに使うレベル。
16
17#### H4の場合
18
19H4まで掘り下げるような事を書かないかなぁ・・・。
20
21##### H5の場合
22
23H5って使ったこと無いかも・・・。
24
25> ここは引用部分です。
26>
27> 結構使いますよね。
28>
29> 見やすいに越したことは無いですし。
30
31---
32
33コードはこんな感じになっています。
<?php phpinfo(); ?>
1
2実用部分としてはこんな感じでしょうか。
メモ感覚でサラサラっと書いて Evernote に反映させるとスタイルが適用されてアップされます。
設定の方法
設定の方法と言うか、前述した Wiki にかいてある通りなのですが設定ファイルにスタイルの内容を記述するだけです。
「Evernote」の「Setting – User」に設定を書いちゃいましょう。
下記に私の設定を記述しておきますので参考にして下さい。
色変えたり余白調整したりで自分好みに設定しましょう～。
1"wiki_tables": true,
2 "inline_css": {
3 "body": "font-family: gotham,ヒラギノ角ゴ ProN W3,Hiragino Kaku Gothic ProN,メイリオ,Meiryo,MS Pゴシック,MS PGothic,helvetica,arial,sans-serif;",
4 "pre": "color: #000000; font-family: Ricty,monospace,monospace; font-size: 0.9em; white-space: pre-wrap; word-wrap: break-word; border: 1px solid #A8C6F3; border-radius: 3px; overflow: auto; padding: 6px 10px; margin-bottom: 10px;background: #F0F4FF;",
5 "code": "color: black; font-family: Ricty,monospace,monospace; font-size: 0.9em;",
6 "inline-code": "color: #000000; font-family: monospace,monospace; padding: 0.1em 0.2em; margin: 0.1em; font-size: 85%; background-color: #F5F5F5; border-radius: 3px; border: 1px solid #cccccc;",
7 "h1": "margin-bottom: 1em;margin-top: 1.2em;font-size: 2em;padding: 10px;border-bottom: 1px solid #0696EA;background: #196BBF;color: #FFF;",
8 "h2": "font-size: 1.5em;border-bottom: 1px solid #196BBF;padding: 5px;color: #196BBF;",
9 "h3": "margin-bottom: 0.5em;margin-top: 0.5;font-size: 1.4em;border-bottom: 1px dashed #567798;padding: 5px;color: #567798;",
10 "h4": "margin-bottom: 0.5em;margin-top: 0.5;font-size: 1.3em;border-bottom: 1px dashed #567798;padding: 5px;color: #567798;",
11 "h5": "margin-bottom: 0.5em;margin-top: 0.5;font-size: 1.2em;border-bottom: 1px dashed #567798;padding: 5px;color: #567798;",
12 "footnotes": "border-top: 1px solid #9AB39B; font-size: 80%;",
13 "hr": "margin-bottom: 2em;margin-top: 2em;color:#9AB39B;background-color:#9AB39B;height:1px;border:none;",
14 "sup": "color:#6D6D6D;font-size:1ex",
15 "blockquote": "border: 1px dashed #D8D8D8;margin-left: 3em;padding: 1em;margin-top: 1.4285em;margin-bottom: 1.4285em;background: #F5F5F5;border-radius: 10px;",
16 // ONLY USED IF wiki_tables or gfm_tables are enabled
17 "table": "border-collapse: collapse; border-spacing: 0; margin: 1em;",
18 "td": "border: 1px solid #DDD; padding: 6px 13px;",
19 "th": "border: 1px solid #DDD; padding: 6px 13px;",
20 "tr:odd": "border: 1px solid #DDD; padding: 6px 13px;",
21 "tr:even": "border: 1px solid #DDD; padding: 6px 13px; background-color: #F8F8F8;"
22 },
一応「wiki_tables」の設定は有りにしています。
実際に貼り付けると下の画像のようになるかと思います。
Wiki のページには H1 だけが記述されていたんですが H2 ～ H5 も設定してみたら出来たのでそのまま使ってます。
とりとめのないまとめ
マークダウンでガリガリ書いていくだけで見やすい形で保存してくれるので便利ですね。
欲を言えばもっと細かい所もいじれるようになるとなぁ・・・とは思うのですが、この辺がちょうどいいのかも知れませんね。