Note

1Pつめこみ型です。段落を減らして詰め込まない型にしても良いと思います。段落を増やす場合はHEAD内のboxを増やして行って下さい。
背景色は各BOXをHEADで指定しているので、ナノの色設定機能はあまり関係ありません。が、最後の段落と同じ色にすると綺麗にはまるかもしれません。

ページ内リンクは、リンクしたい場所に＜a name="○○"＞＜/a＞を貼り、リンクする時は＜a href="#○○"＞リンク名＜/a＞のように、a href 内を #○○ と記入して下さい。○○は同じ単語です。

下の▲でmenuに戻ります。

付箋はこんなかんじでお好きに色を変えてください

HEAD

body {
  margin: 0;
  padding: 0; 
  font-size: 14px;
  font-family:'Lucida Grande',
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
  Meiryo, メイリオ, sans-serif;
  text-align: justify;
  text-justify: inter-ideograph;
}

#main {
  margin: 0 auto;
  width: 100%;
  height: auto !important;  
  height: 100%;             
}

#header { /*1番上のBOX */
  background: #2E3D59; 
  padding: 2em 2em 1em 2em;  
  color: #fff;
}

/* 以下、BOXを増やす場合はコピーしてbox後ろのナンバーを変えて行ってください */

#box2 {
  background: #BFB411; 
  padding: 2em 2em 1em 2em;  
  color: #fff;
}

#box3 {
  background: #ABA698; 
  padding: 2em 2em 1em 2em;  
  color: #fff;
}

#box4 {
  background: #D9B783; 
  padding: 2em 2em 1em 2em;  
  color: #fff;
}

#box5 {
  background: #BB3428; 
  padding: 2em 2em 1em 2em;  
  color: #fff;
}

/* leftは左詰のBOX、migiは右詰めのBOXで使用します */

#content 
{
  padding: 1em 1em; 
}

#left {  
  padding: 0px 0px 0px 0px;
  width: 80%;
  text-align: left;
}

#migi {
  padding: 0px 0px 0px 0px;
  width: 80%;
  margin-left: auto;
}

a {
 text-decoration: none; 
}

a:hover { 
 color: #ffffff; 
}

a.menu {/* header menuの色指定 */
 text-decoration:none; 
 color: #ffffff; 
}

a.menu:hover  {
 color: #eeeeee; 
 border-bottom: 1px dotted;
}

/* サイトタイトル・左詰のBOXの見出しはh1を、右詰のBOXの見出しはh2をつ使用します */

h1{
 color:#ffffff;
 font-size:30px;
 margin: 0px 0px -10px 0px;  
 font-family: 'Nunito', sans-serif;
 text-decoration: underline;
}

h2{
 color:#ffffff;
 font-size:30px;
 margin: 0px 0px -10px 0px;  
 font-family: 'Nunito', sans-serif;
 text-decoration: underline;
 text-align: right;
}

h3{
 color:#ffffff;
 font-size:20px;
 margin: 0px 0px -5px 0px;  
 font-family: 'Nunito', sans-serif;
}

h4{
 color:#ffffff;
 font-size:40px;
 margin: 0px 0px -25px 0px;  
 font-family: 'Nunito', sans-serif;
 text-decoration: underline;
}

.bottom {
 margin: 15px 0px 0px 0px;  
 padding:0 auto;
 text-align:center;
}

.ma {
background-color: #000000;
color: #ffffff;
}

</style>

BODY

<div id="main"><div id="header"><div id="left"><a name="top"></a><h4>colorbox</h4>
<a href="#info"class="menu">information</a> - <a href="#note"class="menu">note</a> - <a href="#main"class="menu">main</a> - <a href="#bkm"class="menu">bookmark</a>

</div></div></div><div id="box2"><div id="migi">
<a name="info"></a><h2>Information</h2>
サイトの説明などを書いたらどうでしょうか。ここはほにゃららほにゃららサイトです。色々あります。長文テストです。長文テストです。長文テストです。長文テストです。長文テストです。長文テストです。長文テストです。

動作確認はIEとsafari(iphone5)です、ガラケーではどうなってるのかわかりません(情報求む)
色は適当なのでお好きに変更して下さい
<div class="bottom"><a href="#top">▲</a></div></div></div><div id="box3"><div id="left">
<a name="note"></a><h1>Note</h1>
1Pつめこみ型です。段落を減らして詰め込まない型にしても良いと思います。段落を増やす場合はHEAD内のboxを増やして行って下さい。

ナノの色設定での背景色も、HEAD指定しているので、あまり関係ありません。が、最後の段落と同じ色にすると綺麗にはまるかもしれません。<br>

ページ内リンクは、リンクしたい場所に＜a name="○○"＞＜/a＞を貼り、リンクする時は ＜a href="#○○"＞リンク名＜/a＞ のように、a href 内を #○○ と記入して下さい。○○は同じ単語です。

下の▲でmenuに戻ります。

<span class="ma">付箋はこんなかんじでお好きに色を変えてください</span><div class="bottom"><a href="#top">▲</a></div></div></div><div id="box4"><div id="migi">
<a name="main"></a><h2>Main</h2>
<h3>▼ Long stoy</h3>
<a href="">りんく</a> | ○○と××が何何する話
<a href="">りんく</a> | こいのおはなし
<a href="">りんく</a> | ここではいえない話<

<h3>▽ Short stoy</h3>
<a href="">りんく</a> / <a href="">りんく</a> / <a href="">りんく</a> / <a href="">りんく</a> / <a href="">りんく</a> / <a href="">りんく</a> / <a href="">りんく</a>
<div class="bottom"><a href="#top">▲</a></div></div></div><div id="box5"><div id="left">
<a name="bkm"></a><h1>Boookmark</h1>
<a href="">りんく</a> | <a href="">りんく</a> | <a href="">りんく</a> | <a href="">りんく</a> | <a href="">りんく</a> | <a href="">りんく</a> | <a href="">りんく</a> | <div class="bottom"><a href="#top">▲</a></div></div></div></div>

▲