0410こんにちは、とみーです。先日、コメントにて「Evernoteのテンプレートはどうやって作成しているんですか?」というご質問があったので、作成手順を記事にしようと思います。これがきっかけでEvernoteのテンプレートを作る人が増えるといいなぁ・・・と思います。まとめEvernoteテンプレートの作り方まずはじめにEvernoteのテンプレートを作るにあたり、HTMLとCSSというウェブサイトを作るときの言語を理解することが必要です。いえ、そんなに難しいものではありません。検索すれば解説サイトがごろごろ出てきます。分からなければとりあえずぐぐってみればいいです。icon-external-link個人的には習うより慣れろ派なので、さくっと次の項目へどうぞ。HTMLファイルを用意とりあえず実践的に手順を解説していきます。何も考えずにこれをメモ帳にコピペしてください。コピペしたら、名前を付けて保存します。入力してお好きな場所に保存しましょう。PCに詳しい方はファイルの種類が気になるかもしれませんが、*.txtと表示されていても無視していいです。Windowsユーザーの方はこのようなファイルができました。(アイコンは、人によってChromeだったりFirefoxだったりします)これで、自分のパソコンの中に、小さなウェブサイトが出来上がりました。ちなみにこれをダブルクリックして開いても真っ白なページが表示されるだけです。HTMLを編集する実際にHTMLとCSSを編集していきます。メモ帳でtemplate.htmlを開き、<body>と</body>の間に記述していきます。簡単な見出しを作成してみましょう。7行目に追加しました。この状態でtemplate.htmlをダブルクリックして開くとこんな感じです。これをCSSで装飾してきます。CSSを編集するCSSによって出来ることは様々ですが、今回は見出しの背景に色を付けたいと思います。7行目にちょっと書き足しました。style=”(中略)”がCSSと呼ばれるものです。background-color:が背景色を指定することを意味しています。#F6D4D8がカラーコードと言って、色を指定するための英数字です。この状態でtemplate.htmlをダブルクリックして開くとこんな感じです。いう方はこちらのサイトを参考にお好きな色にしてみてください。colorswww.color-sample.comEvernoteにコピペするここまで出来ればあとはもう簡単です。表示されている見出しをCtrl+Aで全て選択し、Ctrl+Cでコピーします。Evernoteを開いて、そのままCtrl+Vでペーストします。するとEvernoteにまるっとコピーされます!あとはもう配布するなり煮るなり焼くなり。自分で作ったものですから、お好きにカスタマイズしてください。CSS記述に関して注意点CSSで検索していると、<head></head>の間に記述する方法がよく出てくると思いますが、EvernoteではHTML内に記述する方法しか対応していないようですCSS3という色々と出来ることが増えたCSSがありますが、Evernoteは未対応ですまとめ今回は背景色をつける解説のみですが、CSSを勉強していくともっと色々と出来ることがあるのが分かると思います。枠線を付けたり、その枠線を二重線や点線に出来たり。文字に影をつけることも可能です。見出し」で検索してみると、色々なデザインが見れるので参考になりますよ。私が作成したテンプレートも参考にしてみてくださいね。選択しエクスポートした後、そのファイルをメモ帳で開いてみるとソースコードが見れます。詳しくは投稿をご覧ください。コメントをキャンセルメールアドレスが公開されることはありません。「このブログに投票」ボタンを押していただけると更新の励みになります。(9)サーバーお借りしています。