HTMLでEvernoteのノート・テンプレートを作る 第四回

連載ものです。過去のエントリーはこちら。

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>ここがマス1</TD>
<TD>ここがマス2</TD>
</TR>
</Table>
</body>
</html>

これにTRとTDを追加していけば、いくらでも大きいサイズの表組みを作れます。また前回紹介した背景色の指定を<TD>に行うことで、好みのセル色にすることができます。

上のサンプルのコードはあまりにも長いので、ブラウザでページを表示させて「ページのソースを表示」あたりで確認してください。

テーブルについて詳しく知りたい方は、とほほさんの、「<table> – テーブル(表)」を参考にしてください。というかHTMLやCSSはここで調べれば大抵問題は片づきます。

プロジェクトノート

プロジェクトノートサンプル

ページの背景色指定、<DIV>や<TABLE>の要素を組み合わせて作ったのが、上記のページ。これも実際にEvernoteにクリップしてみてください。

その後、「進捗日誌」の部分に何か書いてみてください。改行を入れると罫線が細かいドットになっていると思います。ソースの部分で言うと、

style=”border-bottom:1px dotted gray;”

が、これにあたります。以前書いた「改行を入れると同じ要素を繰り返す」という現象を利用して、罫線を作っています。

上のスタイルシートは、下の線を、1pxの太さで、ドットで、灰色にしなさいという指示です。pxの前の数字を大きくすれば、線が太くなります。dottedの部分は、他にもdashed(粗い点線)、solid(実線)、double(二重線)などがあります。
※この辺も、とほほさんの「border」あたりを参考に。

その他の要素については、ソースを確認してみてください。

さいごに

というわけで、後半ものすごく駆け足になりましたが、Evernoteのテンプレ作りの基本を紹介してみました。実際詳しく紹介していくと、HTML講座になってしまうので、こまかい部分は「とほほ」さんを参考にしてください。

基本的に使う要素は、<DIV><TABLE>あたりで事足りるはずです。スタイルシートは背景色(background-color)、テキストの色(color)、フォントサイズ(font-size)、あたりが使えると思います。

デジタルの「ノート」は、自分の好みのテンプレを作るというのが、なかなか難しいものですが、Evernoteであれば、HTMLとCSSの簡単な知識があれば、割合好きな感じに作れます。その自由さも、個人的にはEvernoteの魅力の一つです。

▼こんな一冊も:

EVERNOTE「超」仕事術
EVERNOTE「超」仕事術 倉下忠憲

シーアンドアール研究所 2010-08-18
売り上げランキング : 35570

Amazonで詳しく見る by G-Tools

EVERNOTE「超」知的生産術
EVERNOTE「超」知的生産術 倉下忠憲

シーアンドアール研究所 2011-02-26
売り上げランキング : 26158

Amazonで詳しく見る by G-Tools

Related Posts with Thumbnails
Send to Kindle

1件のコメント

Other Links to this Post

  1. Evernoteで日報(ワークログ)を記録するためにテンプレートを作る | Roguer — 2012 年 4 月 12 日 @ 8:00 AM

この投稿へのコメントの RSS フィード TrackBack URI

コメントをどうぞ

WordPress Themes