【ライフハック】 Invisible.jsとdropboxを使って公開メモ

2012/8/8 ライフハック

この記事をシェアする

はてなブックマーク - 【ライフハック】 Invisible.jsとdropboxを使って公開メモ

Share on Tumblr

Pocket

こんな使い方はあんまりしないと思うけれど、ちょっと作ってみたので紹介します。下記のリンクがdropbox内のpublicフォルダの中に作成した、メモの為のサイトです。

以前紹介した記事（【ライフハック】dropboxを使ってのネタ管理）にもあるInvisible.jsを使って公開できるメモ帳を見たいものを作りました。デフォルトよりちょっとだけCSSをいじって見やすく改造してみた。

可変長にしてみた。それ方がいいよね。自分はそっちの方がいいので。変更

body {
	background: #FFF;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	color: #333;
	font-size: small;
	font-family: verdana,Sans-Serif;
	line-height: 1.5;
	width: 90%;
}

可変長のテキストの設定と折り返しの設定と1文字下げてみた。これだけでも大分見やすくなるかなって

p {
	text-indent: 1em;
}

p,blockquote, ul, ol, dl, form, table, pre {
	line-height:1.5em;
	margin:0 1em 1em;
	width: 95%; 
	word-wrap: break-word; 
}

あとは、h1等を飾ってみた。これで少しは華やかというか見やすくなるはず。

h1 {
	font-size:1.8em;
	margin-bottom:.5em;
	font-weight:bold;
	background:#eee;
	border-top:1px solid #555;
	border-right:1px solid #555;
	border-left:7px solid #555555;
	border-bottom:1px solid #555;
	padding:.3em .3em
}
h2 {
	font-size:1.6em;
	margin-bottom:.5142em;
	padding-top:.2em;
	font-weight:bold;
	border-left:7px solid #555555; 
	padding:.3em .3em
}
h3 {
	border-left:4px solid #555555;
	padding:6px;
	font-size:1,2em;
	margin-top:1.5em;
	margin-bottom:.6em;
	margin-left:0.5em;
	font-weight:bold;
	background-color:#EEEEEE;
}

これで準備完了。後はdropboxのpublicにアップしてURLをゲットすれば公開出来ます。基本的にテキストを編集して、作っていくサイトが出来ます。markdownさえ、覚えてしまえば、本当に簡便なサイトであればこれでいけるでしょ。

Contents