source_Piyo-Piyo

Tips to Customize

PC環境では右下のリンク部分（Backのところ）に、画像置換法（DKIR）を使っています。が、画像自体は透過gifなので、a要素の背景色を指定しないと下の文字が透明部分からのぞきます。
ちなみにimgにリンクをはらなかった理由は携帯との兼ね合いからです。

CSSのborder-boxのところに「margin,padding,borderを幅と高さに含めない」とコメントが入っていましたが、正しくは「padding,borderを幅と高さに含める」です。

Images

画像のお持ち帰りはこちらからどうぞ。

back.gif

bg.gif * 拡大表示しています。本来のサイズは6*1です。

egg.gif

piyo.gif

wood.gif

Source

ナノ以外で使う場合のソース。テンプレとの違いはCSSのみです。
PCからのみ最下部のボックスから丸ごとコピペできます（携帯・スマホではボックスが出ません）

CSS（<head>～</head>）

textarea,input,select {
  margin:0.2em;
  background:#ddee99;
  color:#445500; }

.imode {
  display:none; }
</style>

a:link {
  color:#668833; }
a:visited {
  color:#668833; }
.header a, .navi a {
  color:#ffffff; }
a:focus {
  color:#776633; }

textarea:focus, input:focus, select:focus {
  background:#776633;
  color:#ffffff; }

.container {
  margin-bottom:1em; }

.header {
  padding:0.5em;
  background:url(bg.gif) #669922;
  font-size:medium; }

.count {
  font-size:xx-small;
  color:#ffffcc; }

.menu {
  margin:0.5em; }

.title {
  margin-bottom:1em;
  padding-top:30px;
  padding-left:50px;
  border-bottom:2px solid #669933;
  background:url(piyo.gif) no-repeat 10px bottom; }

.subtitle {
  margin:1em 0 0.5em;
  border-bottom:1px dotted #669933;
  color:#336622; }
/* au、docomo1.0では無効 サブタイトルの先頭に挿入 */
div.subtitle:before {
  content:"▽ "; }

.content {
  margin:0 0.5em;
  padding-bottom:0.5em;
  border-bottom:1px solid #669933; }

.footer {
  padding:35px 45px 10px 0.5em;
  background:url(wood.gif) no-repeat right bottom;
  color:#776633; }

.navi {
  padding:0.5em;
  background:url(bg.gif) #669922;
  text-align:right; }
]]>
</style>

body {
  font:0.9em/1.5 "Trebuchet MS",Osaka,"Meiryo UI",sans-serif;
  letter-spacing:1px;
  text-align:center; }

br {
  letter-spacing:0; }

a:link {
  color:#668833; }
a:visited {
  color:#668833; }
.header a, .navi a {
  color:#ffffff; }
a:hover {
  position:relative;
  top:1px; left:1px;
  color:#776633; }
a:focus {
  color:#776633; }

textarea,input,select {
  border:1px solid #88aa44;
  border-radius:4px;
  font-family:"Trebuchet MS",Osaka,"Meiryo UI",sans-serif;
  font-size:1em; }

input[type="submit"]:hover, input[type="reset"]:hover {
  background:#ffffcc;
  color:#776633; }

/* padding,borderを幅と高さに含める */
.container, .title, .subtitle {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box; }

.container {
  margin:0 auto 1em;
  width:640px;
  max-width:100%;
  background:#ffffff; /* 変更する場合、.navi aの背景色も同じ色に変更してください */
  text-align:left; }

.header {
  padding:1em;
  height:4em;
  background:url(bg.gif) #669922; }

#top {
  font-size:1.1em;
  color:#ffffff; }

.count {
  font-size:0.8em;
  color:#ffffcc; }

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

.title {
  margin:1em 16px;
  padding-top:0.9em;
  height:2.5em;
  min-height:35px;
  border-bottom:2px dashed #669933;
  background:url(piyo.gif) no-repeat 95% 90%;
  text-indent:1.2em;
  font-size:1.1em;
  color:#000000; }

.subtitle {
  margin:1.5em 0 1em;
  padding-top:0.8em;
  padding-left:36px;
  width:80%;
  min-width:200px;
  min-height:30px;
  height:2.4em;
  border-bottom:1px solid #668822;
  background:url(egg.gif) no-repeat left 80%;
  color:#557733; }

.content {
  margin:2em 1.5em 0; }

.footer {
  margin:0 16px;
  padding:45px 40px 0 0.5em;
  border-bottom:2px dashed #669933;
  background:url(wood.gif) no-repeat right bottom;
  font-size:0.9em;
  color:#666633; }

.navi {
  position:relative;
  z-index:5;
  margin:0 0.5em; }

.navi a {
  display:block;
  overflow:hidden;
  margin-left:auto;
  width:120px;
  height:40px;
  background:url(back.gif) no-repeat #ffffff; /* コンテンツボックスの背景色と同じものを指定 */ }

.navi span {
  position:relative;
  z-index:-1; }

/* 携帯のみ表示 */
span.mb {
  display:none; }
</style>

文書型宣言等

BODY

全体レイアウト

全部丸ごと持っていく↓

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

textarea,input,select {
  margin:0.2em;
  background:#ddee99;
  color:#445500; }

.imode {
  display:none; }
</style>

a:link {
  color:#668833; }
a:visited {
  color:#668833; }
a:focus {
  color:#776633; }

textarea:focus, input:focus, select:focus {
  background:#776633;
  color:#ffffff; }

.container {
  margin-bottom:1em; }

.header {
  padding:0.5em;
  background:url(bg.gif) #669922;
  font-size:medium; }

.count {
  font-size:xx-small;
  color:#ffffcc; }

.menu {
  margin:0.5em; }

.title {
  margin-bottom:1em;
  padding-top:30px;
  padding-left:50px;
  border-bottom:2px solid #669933;
  background:url(piyo.gif) no-repeat 10px bottom; }

.subtitle {
  margin:1em 0 0.5em;
  border-bottom:1px dotted #669933;
  color:#336622; }
/* au、docomo1.0では無効 サブタイトルの先頭に挿入 */
div.subtitle:before {
  content:"▽ "; }

.content {
  margin:0 0.5em;
  padding-bottom:0.5em;
  border-bottom:1px solid #669933; }

.footer {
  padding:35px 45px 10px 0.5em;
  background:url(wood.gif) no-repeat right bottom;
  color:#776633; }

.navi {
  padding:0.5em;
  background:url(bg.gif) #669922;
  text-align:right; }
]]>
</style>

body {
  background:#ffffcc;
  font:0.9em/1.5 "Trebuchet MS",Osaka,"Meiryo UI",sans-serif;
  letter-spacing:1px;
  text-align:center; }

br {
  letter-spacing:0; }

a:link {
  color:#668833; }
a:visited {
  color:#668833; }
.header a, .navi a {
  color:#ffffff; }
a:hover {
  position:relative;
  top:1px; left:1px;
  color:#776633; }
a:focus {
  color:#776633; }

textarea,input,select {
  border:1px solid #88aa44;
  border-radius:4px;
  font-family:"Trebuchet MS",Osaka,"Meiryo UI",sans-serif;
  font-size:1em; }

input[type="submit"]:hover, input[type="reset"]:hover {
  background:#ffffcc;
  color:#776633; }

/* margin,padding,borderを幅と高さに含めない */
.container, .title, .subtitle {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box; }

.container {
  margin:0 auto 1em;
  width:640px;
  max-width:100%;
  background:#ffffff; /* 変更する場合、.navi aの背景色も同じ色に変更してください */
  text-align:left; }

.header {
  padding:1em;
  height:4em;
  background:url(bg.gif) #669922; }

#top {
  font-size:1.1em;
  color:#ffffff; }

.count {
  font-size:0.8em;
  color:#ffffcc; }

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

.content {
  margin:2em 1.5em 0; }

.footer {
  margin:0 16px;
  padding:45px 40px 0 0.5em;
  border-bottom:2px dashed #669933;
  background:url(wood.gif) no-repeat right bottom;
  font-size:0.9em;
  color:#666633; }

.navi {
  position:relative;
  z-index:5;
  margin:0 0.5em; }

.navi span {
  position:relative;
  z-index:-1; }

/* 携帯のみ表示 */
span.mb {
  display:none; }
</style>

<div class="container">
  <div class="header">
	<a href="#" id="top" name="top">SITE NAME</a><br />
	<span class="count">counter</span>
  </div>
  <div class="menu">
	<a href="#">Menu</a> / <a href="#">Menu</a>
  </div>
  <hr size="1" class="imode" />
  <div class="title">PageTitle</div>
  <br class="imode" />
  <div class="content">
	<div class="subtitle">Sub Title</div>
	Contents<br />
	<br class="imode" />
	</div>
  <hr size="1" class="imode" />
  <div class="footer">footerを消すと木とボーダーラインが消えます。</div>
  <div class="navi"><a href="#"><span>← Back</span></a><span class="mb">｜<a href="#top">↑ Top</a></span></div>
</div>
<hr size="1" class="imode" />

</body>
</html>