<p class="thumb"><img src="http://web-marketing.zako.org/images/2010/08/wrttn.jpg" alt="オンラインノート" title="wrttn" width="514" height="204" class="aligncenter size-full wp-image-15759" /></p>
<p>シンプルなもの、他のサービスとの連携が優れているものなど、オンラインノートにはさまざまな特徴を持ったものがありますよね。</p>
<p>今回ご紹介するのは、シンプルかつ、共有機能が優れていながら、CSSスタイルの適用やコードの共有などもできるサービスです。</p>
<!--more-->
<p>「wrttn.me」は、<strong>シンプルでありながらも、コードの共有やCSSを適用させたノートを作成、サイトへ埋め込むこともできるオンラインノートパッド。</strong></p>
<p>利用する際のログインも不要で、<b>共有機能やコメント機能</b>も備えた優れものです。</p>

<h4 class='tips'>CSSを適用させたノート</h4>
<script src='http://wrttn.me/embed/b07a54/' type='text/javascript'></script>
<p>↑こちらが埋め込みタグを使ってこのページへ埋め込んだノートです。</p>

<p><img src="http://web-marketing.zako.org/images/2010/08/wrttn1.png" alt="CSS適用" title="wrttn1" width="400" height="193" class="aligncenter size-full wp-image-15761" /><br />↑元になっているノートはこちら。ただし、classなどを指定しないと、埋め込んだページにもCSSが適用されてしまうのでご注意を。</p>

<h4 class='tips'>HTMLタグなどの共有も可能</h4>
<script src='http://wrttn.me/embed/d2a7d0/' type='text/javascript'></script>
<p>↑こちらは上のノートの内容を、pLaintext にして埋め込んだものです。</p>
<p><img src="http://web-marketing.zako.org/images/2010/08/wrttn2.png" alt="HTML" title="wrttn2" width="400" height="135" class="size-full wp-image-15764" /><br />↑全４種類から見せる形式を選ぶことができます。</p>
<h4 class='tips'>共有機能も充実</h4>
<p><img src="http://web-marketing.zako.org/images/2010/08/wrttn3.png" alt="共有" title="wrttn3" width="400" height="159" class="aligncenter size-full wp-image-15766" /><br />↑「SHARE」を選択すると、TwitterやGoogle Buzz、Facebookへの共有ボタンが出てきます。</p>
<p><img src="http://web-marketing.zako.org/images/2010/08/wrttn4.png" alt="埋め込み" title="wrttn4" width="400" height="130" class="aligncenter size-full wp-image-15768" /><br />↑そして、「Embed」を選択すると、埋め込み用のタグが発行されます。</p>
<p><img src="http://web-marketing.zako.org/images/2010/08/wrttn5.png" alt="コメント" title="wrttn5" width="400" height="364" class="aligncenter size-full wp-image-15769" /><br />↑コメント機能をONにすれば、共有用のページにトラックバックURL付のコメント機能を持たせることができます。</p>
<p>興味のある方はwrttn.meへどうぞ。</p>
<p>この手のサービスは、必ず無料会員登録が必要であったり、若干操作が難しくなったりするものですが、ここまでカンタンに使えるものはそうはないはず。</p>
<p>なんだかんだいっても、やっぱりシンプルなものが一番ですね。</p>
<p>Via：<a class='web-site-link' href="http://delicious.com/url/944beafa986657d8a7ea94ba75e2c79f" onclick="window.open('http://delicious.com/url/944beafa986657d8a7ea94ba75e2c79f'); return false;">delicious</a></p>