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

個人的に最近はまっていることなんで、ちょっと足跡を残して置きます。
※HTML(CSS)に関する知識をお持ちの方にはまったく無用のエントリーです。

自分用のテンプレートを作れると、以下のようなノートが作れます。
※こんなマニアックなもの使わない、という方にも無用のエントリーです。

screenshot1

screenshot3

screenshot2

screenshot

概要

Evernoteはエディタ機能も(いちおう)存在しています。でもって、Webクリップも取り込める。

ということは、自分で気に入ったWebページを作り、それをクリッパーで取り込めば、自分用のフォーマットとして使えるということになります。

流れはごく簡単。

  1. テキストエディタか何かでHTMLファイルを作成する
  2. それをブラウザで表示させ
  3. さらにそれをクリップする

これだけです。作成したHTMLファイルをEvernoteに直接放り込む手段もありますが、Webクリップの方がなじみ深いと思うので、それをメインに解説します。

取り込んだノートは、原本として置いておき、それを必要に応じてコピーして使います。

作成環境

私の作成時の環境を書いておきます。特にWindowsだといろいろ違った結果になるかもしれませんので、あしからず。

  • Mac OS X10.6.8
  • Evernote(バージョン 3.0.0 Beta 3)
  • Firefox 3.6.19
  • CotEditor バージョン1.2

基本となるタグ

実際のウェブページを作るわけではないので、HTMLはごく基本的なものを押さえておけばそれでOKです。追加する要素は後回しにして、まず骨子になる部分を書きましょう。

<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
このへんが内容。
</body>
</html>

テキストエディタに上の文字を入力して、「test.html」という名前(名前は何でもよい)を保存すればそれでOK。そのファイルをウェブブラウザで見ればページとして表示されます。

Evernoteへのクリップでのポイントはページのタイトル部分。上のTitileというタグの後に来ている部分がそのページのタイトルになります。ウェブブラウザだとタブとかに表示されるやつですね。そのタイトルはEvernoteにクリップしたときにノートのタイトルになります。これはEvernote上で後から変更可能ですが、あらかじめ指定しておいた方が楽でしょう。

さいごに

これだけでは、テンプレートにほど遠いですが、とりあえず準備は整いました。

次回は、これに表組みを追加したり、色を付けたり、といった要素を紹介します。

Related Posts with Thumbnails
Send to Kindle
Rashita
物書きをやっております。実用書から小説までなんでもござれのハイブリッド物書きです。 ライフハックや仕事術、知的生産などに興味があります。

7件のコメント

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です