誰でも簡単! Evernoteテンプレート作成方法

2016-11-27Software

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

こんにちは、とみーです。

先日、コメントにて「Evernoteのテンプレートはどうやって作成しているんですか?」というご質問があったので、作成手順を記事にしようと思います。

これがきっかけでEvernoteのテンプレートを作る人が増えるといいなぁ・・・と思います。もっと便利なの色々出てほしい!

スポンサーリンク

まずはじめに

Evernoteのテンプレートを作るにあたり、HTMLとCSSというウェブサイトを作るときの言語を理解することが必要です。

とはいえ、そんなに難しいものではありません。検索すれば解説サイトがごろごろ出てきます。
分からなければとりあえずぐぐってみればいいです。

HTML 入門 – Google検索 icon-external-link
CSS 入門 – Google検索 icon-external-link

個人的には習うより慣れろ派なので、さくっと次の項目へどうぞ。

HTMLファイルを用意

とりあえず実践的に手順を解説していきます。

まずは何も考えずにこれをWindows付属ソフトのメモ帳にコピペしてください。

<html>
<head>
	<title>Evernote</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>

</body>
</html> 

コピペしたら、名前を付けて保存します。

template.html と入力してお好きな場所に保存しましょう。
少しPCに詳しい方はファイルの種類が気になるかもしれませんが、*.txtと表示されていても無視していいです。

20161127_01

Windowsユーザーの方はこのようなファイルができました。
(アイコンは、人によってChromeだったりFirefoxだったりします)

20161127_02

これで、自分のパソコンの中に、小さなウェブサイトが出来上がりました。

ちなみにこれをダブルクリックして開いても真っ白なページが表示されるだけです。

HTMLを編集する

実際にHTMLとCSSを編集していきます。

メモ帳でtemplate.htmlを開き、<body>と</body>の間に記述していきます。

まず、簡単な見出しを作成してみましょう。

<html>
<head>
	<title>Evernote</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
	<div>見出し</div>
</body>
</html> 

7行目に追加しました。

この状態でtemplate.htmlをダブルクリックして開くとこんな感じです。味気ないですね。

20161127_03

これをCSSで装飾してきます。

CSSを編集する

CSSによって出来ることは様々ですが、今回は見出しの背景に色を付けたいと思います。

<html>
<head>
	<title>Evernote</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
	<div style="background-color:#F6D4D8;">見出し</div>
</body>
</html> 

7行目にちょっと書き足しました。
style=”(中略)”がCSSと呼ばれるものです。

background-color:が背景色を指定することを意味しています。
#F6D4D8がカラーコードと言って、色を指定するための英数字です。

この状態でtemplate.htmlをダブルクリックして開くとこんな感じです。

20161127_04

他の色がいい! という方はこちらのサイトを参考にお好きな色にしてみてください。

Evernoteにコピペする

ここまで出来ればあとはもう簡単です。

表示されている見出しをCtrl+Aで全て選択し、Ctrl+Cでコピーします。

20161127_05

Evernoteを開いて、そのままCtrl+Vでペーストします。

20161127_06

するとEvernoteにまるっとコピーされます!

あとはもう配布するなり煮るなり焼くなり。
自分で作ったものですから、お好きにカスタマイズしてください。

CSS記述に関して注意点

  • CSSで検索していると、<head></head>の間に記述する方法がよく出てくると思いますが、EvernoteではHTML内に記述する方法しか対応していないようです
  • CSS3という色々と出来ることが増えたCSSがありますが、Evernoteは未対応です

まとめ

今回は背景色をつける解説のみですが、CSSを勉強していくともっと色々と出来ることがあるのが分かると思います。
枠線を付けたり、その枠線を二重線や点線に出来たり。文字に影をつけることも可能です。

「CSS 見出し」で検索してみると、色々なデザインが見れるので参考になりますよ。

 

私が作成したテンプレートも参考にしてみてくださいね。
Evernoteに保存後、ファイル > エクスポート > 単一のHTML Webページファイル(.html)でエクスポート を選択しエクスポートした後、そのファイルをメモ帳で開いてみるとソースコードが見れます。

こちらの記事もおすすめです