連載ものです。過去のエントリーはこちら。
HTMLでEvernoteのノート・テンプレートを作る 第一回
HTMLでEvernoteのノート・テンプレートを作る 第二回
HTMLでEvernoteのノート・テンプレートを作る 第三回
連載は、一応今回で終了。本来はもっと詳しくHTMLとかCSSについて解説しようかと考えていましたが、一体何のブログなのか分からなくなってきそうなので、今回で一区切りにしておきます。
タスクリスト
上記のページを、クリップしてEvernoteに取り込んでください。左から、締め切り、タスク名、着手したかどうか、終わったかどうか、です。使用時にはSTとCKの欄に一つ一つチェックボックスを挿入していくとGoodです。
※二回目以降はこれをコピーして使うので、そういう手間は必要無し。
これはHTMLの＜TABLE＞を使ったタスクリストです。＜TABLE＞は表組みを追加するタグです。
シンプルな例を挙げれば、次のような感じになります。
<html> <head> <title>Pink</title> </head> <body> <Table> <TR> <TD>ここがマス１</TD> <TD>ここがマス２</TD> </TR> </Table> </body> </html>
これにTRとTDを追加していけば、いくらでも大きいサイズの表組みを作れます。また前回紹介した背景色の指定を＜TD＞に行うことで、好みのセル色にすることができます。
上のサンプルのコードはあまりにも長いので、ブラウザでページを表示させて「ページのソースを表示」あたりで確認してください。
テーブルについて詳しく知りたい方は、とほほさんの、「<table> – テーブル（表）」を参考にしてください。というかHTMLやCSSはここで調べれば大抵問題は片づきます。
プロジェクトノート
ページの背景色指定、＜DIV＞や＜TABLE＞の要素を組み合わせて作ったのが、上記のページ。これも実際にEvernoteにクリップしてみてください。
その後、「進捗日誌」の部分に何か書いてみてください。改行を入れると罫線が細かいドットになっていると思います。ソースの部分で言うと、
style=”border-bottom:1px dotted gray;”
が、これにあたります。以前書いた「改行を入れると同じ要素を繰り返す」という現象を利用して、罫線を作っています。
上のスタイルシートは、下の線を、１ｐｘの太さで、ドットで、灰色にしなさいという指示です。ｐｘの前の数字を大きくすれば、線が太くなります。dottedの部分は、他にもdashed（粗い点線）、solid（実線）、double（二重線）などがあります。
※この辺も、とほほさんの「border」あたりを参考に。
その他の要素については、ソースを確認してみてください。
さいごに
というわけで、後半ものすごく駆け足になりましたが、Evernoteのテンプレ作りの基本を紹介してみました。実際詳しく紹介していくと、HTML講座になってしまうので、こまかい部分は「とほほ」さんを参考にしてください。
基本的に使う要素は、＜DIV＞＜TABLE＞あたりで事足りるはずです。スタイルシートは背景色(background-color)、テキストの色（color)、フォントサイズ(font-size)、あたりが使えると思います。
デジタルの「ノート」は、自分の好みのテンプレを作るというのが、なかなか難しいものですが、Evernoteであれば、HTMLとCSSの簡単な知識があれば、割合好きな感じに作れます。その自由さも、個人的にはEvernoteの魅力の一つです。
▼こんな一冊も：
| EVERNOTE「超」仕事術 | |
 |
倉下忠憲
シーアンドアール研究所 2010-08-18 |
| EVERNOTE「超」知的生産術 | |
 |
倉下忠憲
シーアンドアール研究所 2011-02-26 |
Dropboxにリンクされているテンプレート実例が両方とも見られません。
Dropboxの仕様が変更されており、閲覧不可能となっておりました。別の場所にアップしたものにリンクを差し替えておきました。