temp_PostIt_B | ナノ

右側が擬似インラインフレームなタイプ。

ソースは共通ですがCSSが少し違います。
こっちのタイプにしたい方は、

1. 普通にテンプレートをDLする
2. HEADを全て消す
3. 下からHEADをコピペして貼り付ける

一応BODY他のソースもコピーボックスがありますので、面倒でなければDLしなくてもそちらからお使いいただけます。

HEAD

a {
  text-decoration:none;
}
a:link {
  color:#556622;
}
a:visited {
  color:#99aa66;
}

hr {
  margin:0.5em 0;
  height:1px;
  border-width:1px 0 0 0;
  border-style:solid;
  border-color:#999966;
  color:#999966;
}

/* 主にiモードブラウザ1.0用 */
hr.imode {
  display:none;
}

/* clear用 */
hr.clear {
  clear:both;
  margin:0;
  width:1px;
  border-color:#ffffff; /* ページの背景色を指定 */
  color:#ffffff;
}

form {
  display:inline;
}

textarea,input,select {
  margin:3px;
  background:#ffffdd;
  color:#664400;
}

.count {
  margin-right:0.5em;
  text-align:right;
  color:#886633;
}

.date {
  margin:1em 0.5em 0 0.5em;
  text-align:right;
  color:#888888;
}

.jump {
  margin:0.5em 0;
  padding:0.2em 0;
  border-bottom:1px dashed #cccc99;
  text-align:center;
}
<nopc>]]></nopc>
</style>

<pc>
<style type="text/css" media="screen, projection">
/* ---- PC + SmariPhone ---- */

html,body {
  display:block;
  height:100%;
}

body {
  text-align:center;
  font:0.8em/1.5 "Lucida Sans Unicode",Osaka,"Meiryo UI",sans-serif;
}

#top a {
  color:#886622;
}
a:hover {
  color:#998844;
}

/* clear用 */
hr.clear {
  clear:both;
  margin:0;
  width:1px;
  border-color:#ffffff; /* ページの背景色を指定 */
}

/* -- フォームパーツ -- */
textarea,input,select {
  border:1px dashed #aa9966;
  font-size:1em;
  font-family:Osaka,"Meiryo UI",sans-serif;
}
textarea:hover,input:hover,select:hover {
  border:1px solid #887744;
  background:#ffffee;
  color:#445522;
}
textarea:focus,input:focus,select:focus {
  border:1px solid #887744;
  background:#ffffee;
  color:#445522;
}

textarea {
  padding:0.2em;
}

input,option {
  padding:0 0.4em;
}

select {
  width:8em;
}

/* 普段は非表示 */
.menu span, .footer {
  display:none;
}

/* -- 付箋 -- */
/* 基本設定 */
.subhead, .menu a, .footer a {
  border-width:0 0 1px 0.8em;
  border-style:solid;
  -moz-box-shadow:0 2px 2px #cccccc;
  -webkit-box-shadow:0 2px 2px #cccccc;
  box-shadow:0 2px 2px #cccccc;
  font-family:"うずらフォント","uzura_font","あずきフォント","azuki_font","あくあフォント","aquafont",Consolas,"Lucida Console",Verdana,Osaka,"Meiryo UI",sans-serif;
}

/* メインエリアの見出し部分 */
.subhead {
  margin:1em -0.5em;
  padding:0.3em 1em;
  width:90%;
  border-color:#ccbb88 #bbaa77;
  background:#eeddaa;
  font-size:1.2em;
  color:#553300;
}

/* サイドメニューのカラー */
a.menu1 {
  border-color:#eebbbb #dd9999;
  background:#ffdddd;
  color:#cc5555;
}
a.menu2 {
  border-color:#eedd99 #ffcc66;
  background:#ffffbb;
  color:#ff6600;
}
a.menu3 {
  border-color:#bbcc88 #99aa66;
  background:#ddeebb;
  color:#667733;
}
a.menu4 {
  border-color:#bbccee #88aacc;
  background:#ccddee;
  color:#336699;
}
a.menu5 {
  border-color:#ccbbdd #bb99cc;
  background:#ddccee;
  color:#885599;
}

/* -- 全体の幅と高さを決定 -- */
.all {
  margin:0 auto;
  padding-top:1.5em;
  width:800px;
  max-width:100%;
  height:85%;
  text-align:left;
}

.frame {
  border:1px dotted #cccc99;
  height:100%;
}

/* -- 左メニュー -- */
.sidebar {
  float:left;
  width:180px;
  height:100%;
  border-right:1px dotted #cccc99;
  z-index:10;
}

.menu {
  margin:2em 0 0 2em;
  font-size:1.2em;
}

.menu a {
  display:block;
  position:relative;
  margin-top:0.8em;
  padding:0.3em 1em;
}

.menu a:hover {
  margin:0 -15px 0 15px;
  margin-top:0.8em;
  padding:0.3em 1em;
  -moz-box-shadow:2px 2px 4px #cccccc;
  -webkit-box-shadow:2px 2px 4px #cccccc;
  box-shadow:2px 2px 4px #cccccc;
}

/* -- メインエリア -- */
.mainarea {
  margin-left:180px;
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}

.container {
  padding:2em 1em 1em 60px;
}

#top {
  margin:1.5em 5px 0 2em;
  padding:0.2em 0.4em;
  border-bottom:1px solid #aa9966;
  font-size:1.1em;
  text-align:right;
}

.title {
  padding:0 0.5em;
  border-bottom:1px dashed #aa9966;
}

.content {
  margin:2em 0.5em 1em;
}

/* -- 横幅600px もしくは 高さ400px以下の時に適用されるCSS -- */
@media screen and (max-width:600px), screen and (max-height:400px){

#top {
  margin-right:0;
}
.subhead {
  margin:1em 0;
  width:auto;
}

.all, .frame {
  padding:0;
  height:auto;
  border:none;
}

.sidebar {
  position:static;
  float:none;
  margin:1em;
  height:auto;
  width:auto;
  border:none;
}

.menu {
  margin:1em 0.5em 0 0;
  text-align:right;
}

.menu span, .menu a {
  display:inline;
}

.menu a, .menu a:hover {
  margin:0;
  padding:0;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  border:none;
  background:none;
  font-family:Consolas,"Lucida Console",Verdana,sans-serif;
}

.menu a:link {
  color:#778844;
}
.menu a:visited {
  color:#99aa66;
}
.menu a:hover {
  color:#998844;
}

.mainarea {
  float:none;
  margin:0;
  padding:0;
  height:auto;
  overflow:visible;
}

.container {
  margin:1em;
  padding:0;
}

.footer {
  clear:both;
  display:block;
}
.footer a {
  display:block;
  margin:1em 0 0 auto;
  padding:0.5em 1em;
  width:8em;
  border-color:#ccbb88 #bbaa77;
  background:#eeddaa;
  color:#553300;
}
.footer a:hover {
  position:relative;
  left:0.2em;
}
}/* -- media queries end -- */
</style>
</pc>

<nopc>
<style type="text/css" media="handheld">
<![CDATA[
/* ---- Mobile ---- */
body {
  font-size:x-small;
  line-height:1.4;
}

hr {
  margin:0.5em 5px;
}

select {
  width:6em;
}

.all {
  margin-bottom:1em;
}

#top {
  margin-top:0.5em;
  padding:0.2em;
  border-bottom:1px solid aabb99;
  font-size:medium;
}

.subhead, .title {
  font-size:small;
}

.subhead {
  margin:0.5em 10% 1em 0.5em;
  padding:0.1em 0.3em;
  border-width:0 3px 3px 0.6em;
  border-style:solid;
  border-color:#ffffff #cccccc #cccccc #bbaa77;
  background:#eeddaa;
  color:#553300;
}

.title {
  margin:0.5em;
  border-bottom:1px dashed #887744;
}

.menu {
  margin:0 0.5em;
}

.content {
  margin:1em;
}

.footer {
  margin-top:1em;
  padding:0 0.5em;
  border-bottom:1px solid #887744;
  text-align:right;
}
]]>
</style>
</nopc>

ページごとにHEADに貼り付けるCSS

* このCSSはページによって右にずれて表示される左メニューの付箋部分を変更するためのものですので、ページごとに対応するクラス名に書き換える必要があります。
面倒だったら入れなくても大丈夫です。
こちらはHEADの一番下に入れてください。

以下はテンプレをDLしない場合にコピペしてください。

文書型宣言

HTML

BODY

全体レイアウト