R-style

Sharing is Power! / Create your own way.

Menu
  • ホーム
  • About
  • メルマガ
  • 著作リスト
  • Evernoteの使い方
  • Scrapboxの使い方
  • Tools
  • お問い合わせ
Menu

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

Posted on 2011 年 8 月 12 日2017 年 4 月 30 日 by Rashita

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

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

ここからHTMLのタグだとかCSSについて解説していこうと思っていましたが・・・

@rashita2 今更ですが、第1回で紹介されたテンプレートの1つを実際に作成する過程で説明していくHow to 形式だと、とっつきやすいかも…。作るの超面倒ですが。Thu Aug 11 04:20:57 via Echofonあおのうま
uma_blue

というコメントを頂いたので、そっちの方向にシフトします。ビバ、フレキシブル!

背景の色を変えたノート

今回は、背景色を変えたノートを作っていきます。

目標とするのは次のようなノート。サンプルでは色はピンクですが、もちろん自分の好みで選択できます。

screenshot3

今回使うHTMLタグは<DIV>です。文字列なんかを追加するのに使えるブロック要素です。

ブロック要素って何か?という質問にはお答えしませんが、インライン要素とブロック要素というのがあるということは、頭の片隅にでも置いておくとよいかもしれません。同種のタグでは<P>というタグがあるのですが、こいつは要素の前後に勝手に改行を追加してしまうので、テンプレ作りにはあまり活用できません。

ノートの背景色を変えるには、HTMLの骨子に<DIV>を追加し、その背景色を変更すればOKです。

まずは、以下のようなコードを書いてみましょう。でもって拡張子を.htmlにして適当に名前を付けて保存し、それをブラウザで開きEvernoteにクリップします。

<html>
<head>
<title>Pink</title>
</head>
<body>
<div style="background-color:FFCCFF;">テスト</div>
</body>
</html>

出来上がるのは、こんな感じのノートです。全然テンプレ風ではありませんが、まずはスタート。

screenshot

DIVでこっから文字列を始めますよ〜と宣言して、その中のstyleで装飾を指定しています。今回使ったのはbackgroud-colorという背景色を指定するスタイルシートです。

上に書いた”#”の部分が色の指定になっています。これはRGB指定と呼ばれるものです。他にも色の指定法はありますが、今回はこの方式で行きます。

RGBはそれぞれRed、Green、Blueの頭文字です。#以降の文字列はRRGGBBというカンジで二つの文字でそれぞれの色を担当します。ちなみに、この文字列は16進数で、9の次がA(つまり10を意味する)、Aの次がBで、一番大きいのがFという文字です。

なので、#FF0000というのは、純粋な赤色を、#0000FFは青色を意味します。#000000と書けば黒色、#FFFFFFは白色になります。この辺は「カラーチャート」というキーワードで、グーグル先生にお伺いを立てれば、好みの色をRGB指定に置き換えるのは難しくありません。

縦幅を拡大

上記のサンプルだと、あまりにも表示が寂しいので縦幅を拡大してみます。

<html>
<head>
<title>Pink</title>
</head>
<body>
<div style="background-color:FFCCFF;height:700px">テスト</div>
</body>
</html>

heightというのが縦幅を指定する部分です。700px(ピクセル)を指定していしてみました。これを保存して、ブラウザで読み込めば色つきの部分が伸びたものが表示されるはずです。

screenshot1

ご覧のように、スタイルシートの要素と要素の間はは「;」で区切ります。また要素名とその指定の間は「:」で区切ります。プログラマーでない方は、これをよく間違える注意してください。
※ちゃんとしたHTMLエディタだったら入力補助が付いているとは思いますが。

以上で完成・・・なように見えますが、上のページをクリップしたノートに直接記入してみてください。改行を押すと、ものすごい下にまでカーソルが飛ぶと思います。完全に失敗です。

これが起きる内部的な理由の説明は割愛しますが、要するに上のやり方ではノートのテンプレとしては使えません。実際は次のようにします。

<html>
<head>
<title>Pink</title>
</head>
<body>
<div style="background-color:FFCCFF;height:700px">
<div>テスト</div>
</div>
</body>
</html>

<DIV>タグの中にもう一つ<DIV>タグを入れる。このバージョンをブラウザで表示させ、クリップしてみてください。これだと問題無く記入できるはずです。

わざわざ回りくどい説明をしたのは、自作でノートテンプレを作る場合、この特徴を踏まえておくのがとても大切だからです。<DIV>タグなどの中で改行された場合、どうも同じタグを複製して追加するようです。この特徴を使った工夫もありますが、それはまた別の回に譲ります。

ちなみに、ある程度HTMLの知識がある人ならば、backbround-colorを<Body>タグに適用すればいいんじゃないのか、という疑問を持たれるかもしれませんが、残念ながらクリップ時に<Body>タグは華麗にスルーされる仕様なので、その方法は不可です。逆に言うと、<Body>タグの代わりになる<DIV>タグを作るということですが、まあこのあたりの話は別にいいですね。

画面一杯にする

上の色つき用紙のテンプレートで、とりあえずは完成ですが端の方に余白が空いてしまっていると思います。これがどうにもうっとうしいということならば、それを詰めることもできます。

<html>
<head>
<title>Pink</title>
</head>
<body>
<div style="background-color:FFCCFF;margin-left:-8px;margin-top:-8px;width:102.5%;height:700px">
<div>テスト</div>
</div>
</body>
</html>

実際の数字は、画面とか解像度とかで違ってくるかもしれませんので、適当に調整してください。marginというのは余白を指定するスタイルシートで、それをマイナス方向に(余白を詰めるように)指定してあります。右に詰めると逆に左部分が空いてしまうので、幅(width)を広げることで対応してあります。

さいごに

以上で、色つき用紙のテンプレートのできあがりです。

このテンプレを使うと、ビューをサムネイルにしたときにものすごく目立つノートができます。というか具体的な効果はそれだけかもしれません。
※サマリービューでは反映されない。

しかし、ノートの数が増えてくると、「ぱっと見て分かる」というのは強力なアドバンテージになることも確かです。自分の好きな色を使って、色つき用紙のテンプレートを作ってみるのも面白いかもしれません。

2 thoughts on “HTMLでEvernoteのノート・テンプレートを作る 第三回”

  1. ピンバック: Hacks for Creative Life! » Blog Archive » ベック日誌VOL.6(8月12日分)ー ついに体重が下降傾向に!
  2. ピンバック: R-style » HTMLでEvernoteのノート・テンプレートを作る 第四回

コメントを残す

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

有料メルマガ配信中!

サークルもやってます

New Book!

すべてはノートからはじまる あなたの人生をひらく記録術

「やること地獄」を終わらせるタスク管理「超」入門 (星海社新書)

オススメ本

→これまでの著作一覧
  • →SNS:
  • rashita2 さんのプロフィールを Twitter で表示
  • rashita さんのプロフィールを GitHub で表示

Hot Books!

→紹介記事

→紹介記事

→紹介記事

最近の投稿

  • 歴代もっとも快適なLogseqのメモ環境
  • アウトライナーとその機能
  • 情報ツールの時間性
  • LogseqとWorkFlowy
  • 非構造的なメモとその扱い
  • 手帳としてのLogseq

カテゴリー

  • 0-知的生産の技術 (1,578)
    • BlogArts (121)
    • Evernoteの使い方 (177)
    • Scrapboxの用法 (101)
    • Scrivenerへの散歩道 (22)
    • アウトライナーで遊ぼう (88)
    • プログラミング (11)
    • 執筆法 (44)
    • 断片からの創造 (93)
    • 物書き生活と道具箱 (681)
  • 1-情報ツール考察 (71)
  • 2-社会情報論 (107)
  • 3-叛逆の仕事術 (392)
    • 「タスク」の研究 (260)
  • 4-僕らの生存戦略 (259)
  • 5-創作文 (91)
  • 6-エッセイ (217)
  • 7-本の紹介 (465)
  • コレクション (4)
  • 未分類 (2,832)
    • まとめ記事 (516)
    • 企画 (83)
    • 告知 (261)
    • 感想群 (111)
    • 時事ニュース (1,241)

タグ

#365日の書斎 #AppleScriptでEvernoteを操作する #「目標」の研究 #わりと身も蓋もない話 applescript blog BlogArts CategoryAllegory Dynalist Evernote GTD iPhone・iPad・Mac Scrapbox Scrivener Workflowy 〈学びの土曜日〉 「本」の未来 『「やること地獄」を終わらせるタスク管理「超」入門』 うちあわせCast ささやかな質問 ほぼ日手帳 アウトライナー アナログ道具あそび ショートショート セミナー・オフ会・イベント セルフ・ブランディング タスク管理 ノート ノート術 ポッドキャスト 哲学 思想 思考の技術 情報カード 情報摂取の作法 手帳術 政治・社会 教育 文房具 文章の織り方 新しい時代を生きる力 書評 発想法の探求 経済・金融 電子書籍

アーカイブ

メタ情報

  • ログイン
  • 投稿フィード
  • コメントフィード
  • WordPress.org

My Works

著作リスト

著作リスト

アーカイブ

カテゴリー

アーカイブ

  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年6月
  • 2021年5月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年5月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年8月
  • 2015年7月
  • 2015年6月
  • 2015年5月
  • 2015年4月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2014年5月
  • 2014年4月
  • 2014年3月
  • 2014年2月
  • 2014年1月
  • 2013年12月
  • 2013年11月
  • 2013年10月
  • 2013年9月
  • 2013年8月
  • 2013年7月
  • 2013年6月
  • 2013年5月
  • 2013年4月
  • 2013年3月
  • 2013年2月
  • 2013年1月
  • 2012年12月
  • 2012年11月
  • 2012年10月
  • 2012年9月
  • 2012年8月
  • 2012年7月
  • 2012年6月
  • 2012年5月
  • 2012年4月
  • 2012年3月
  • 2012年2月
  • 2012年1月
  • 2011年12月
  • 2011年11月
  • 2011年10月
  • 2011年9月
  • 2011年8月
  • 2011年7月
  • 2011年6月
  • 2011年5月
  • 2011年4月
  • 2011年3月
  • 2011年2月
  • 2011年1月
  • 2010年12月
  • 2010年11月
  • 2010年10月
  • 2010年9月
  • 2010年8月
  • 2010年7月
  • 2010年6月
  • 2010年5月
  • 2010年4月
  • 2010年3月
  • 2010年2月
  • 2010年1月
  • 2009年12月
  • 2009年11月
  • 2009年10月
  • 2009年9月
  • 2009年8月
  • 2009年7月
  • 2009年6月
  • 2009年5月
  • 2009年4月
  • 2009年2月
  • 2009年1月
  • 2008年12月
  • 2008年11月
  • 2008年10月
  • 2008年9月
  • 2008年8月
  • 2008年7月
  • 2008年6月
  • 2008年5月
  • 2008年4月
  • 2008年3月
  • 2008年2月
  • 2008年1月
  • 2007年12月
  • 2007年11月
  • 2007年10月
  • 2007年9月
  • 2007年8月
  • 2007年7月
  • 2007年6月
  • 2007年5月
  • 2007年4月
  • 2007年3月
  • 2007年2月
  • 2007年1月
  • 2006年12月
  • 2006年11月
  • 2006年10月
  • 2006年9月
  • 2006年8月
  • 2006年7月
  • 2006年6月
  • 2006年5月
  • 2006年4月
  • 2006年3月
  • 2006年2月
  • 2006年1月
  • 2005年12月
  • 2005年11月
  • 2005年10月
  • 2005年9月
  • 2005年8月
  • 2005年7月
  • 2005年6月
  • 2005年5月
  • 2005年4月
  • 2005年3月
  • 2005年2月
  • 2005年1月
  • 2004年7月
  • 2004年6月
  • 2004年5月
  • 2004年4月
  • 2004年3月
©2022 R-style | WordPress Theme by Superbthemes.com