pass a path - Ikkaku

背景画像はパブリックドメインのものなのでこちらから保存してください。
自動改行は「しない」で作っています。
nanoサーバーなど広告下げにならないようご注意ください。

head

body{font-family: 'Sawarabi Mincho', sans-serif;
background:url(##背景画像ＵＲＬ##) ;
 background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed #f4ffff;; 
background-size:cover;
color: #222222;
 font-size: 13px;
 line-height: 1.6;
 word-wrap : break-word;}

a{
 color: #000;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 tap-highlight-color: rgba(0,0,0,0);}

a:hover{
 text-decoration: none;
 color: #a44;}

a:active{ color: #a44;}

.all{
 max-width: 500px;
 margin: auto;
padding: 25px 15px 0 15px;
 margin-top: 30px;}

.top{ text-align: center;}

h1,h2,h3,h4{
 font-family: 'Sawarabi Mincho', sans-serif; ProN W3','ＭＳ Ｐ明朝',serif;
 letter-spacing: 1px;}

h1{color:#fff;
 font-size: 42px;
 text-align: center;
 position: relative;
 top: 15px;
 display: inline;
 font-family: 'Fredericka the Great', cursive;
 padding: 0 2%;}

h2{
 font-size: 150%;
 color: #ccc;
 text-align: center;
 margin-bottom: 12px;}

h3{
 font-size: 120%;
 color: #fff;
 background-color: #333;
 background-image: -ms-linear-gradient(left,#333 50%,#a44 50%);
 background-image: -webkit-linear-gradient(left,#333 50%,#a44 50%);
 background-image: linear-gradient(left,#333 50%,#a44 50%);
 padding-left: 13px;
 margin-bottom: 6px;}

h4{color:#fff;
display:inline-block;
margin:.3em 0; padding:.3em .7em .2em .8em;
background:#2c2c2c; font-size:90%;}

nav{
 letter-spacing: 1px;
 text-align: center;
 padding: 24px 0;
}

nav a{
 display: inline-block;
margin:.3em 0; padding:.3em .3em .2em .3em;
 width: 20%;
 margin: 0 3px;
background:rgba(0,0,0,0.5);
 color: #fff;
 text-decoration: none;}

nav a:hover{
 background-color :#933;
 color: #fff;}

article{ margin-bottom: 26px;
padding: 5px 10px;
font-weight:bold; 
background:rgba(250,250,250,0.5);}

.footer{ text-align: center;}

.footer a{ padding: 0 3px;}

p{ padding: 3px 0;
font-weight:normal;}

.color{ color: #a44;}

hr{border:0;
height: 10px;
  background-image: linear-gradient(
    hsla(0, 0%, 100%, 1),
    hsla(0, 0%, 100%, 1) 33.33%,
    hsla(0, 0%, 100%, 0) 33.33%,
    hsla(0, 0%, 100%, 0) 100%);
  background-size: 100% 3px;
  width: 40px;
}

textarea{
font-family: 'Sawarabi Mincho', sans-serif;
border:0;
padding:10px;
font-size:10px;
color:#222222;
background:#fff;
border:solid 1px #ccc;
margin:0 0 20px;
width:200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);}
--></style>

html

<section id="top"><div class="all top"><h1>-  pass a path-</h1><br><nav><a href="#info">info</a><a href="#main">contents</a><a href="#memo">memo</a><a href="#source">source</a></nav></div>
<div class="all">
<section id="info"><h3>Information</h3>
<article>このサイトは○○で××なサイトです。<br>
理解の無い方は閲覧をご遠慮ください。などなど。<br>
メニューの数が多かったり、長文だと（多分）デザインが崩れてしまうので、増やす際はhead内の　nav a{ ;}　でmarginを弄ってみてください。<br>
メニュー以外のリンクは<a href="#">こうなります</a><br>
<em>強調はこうなります</em><br><br>
コンテンツ全体に太字をかけてあります。<p>通常のフォントだとこんなかんじ。<br>ですがこれだとなんとなく心もとない感じがします。個人的に。</p>
太字でなくてもでいいやという方はhead内の　font-weight:bold; 　を消すか、＜p＞で囲んで下さい。<br><br>
<h4>link</h4><br>
http://yoursiteURL.jp/<br>
管理人はななしです。同業者のみリンクフリー。<br>
<hr>
<h4>bkm</h4><br>
<a href="#">リンク</a>/<a href="#">リンク</a>/<a href="#">リンク</a>/<a href="#">リンク</a>
<center><a href="#top">△</a></center></article><br><br>
<section id="main"><h3>Main contents</h3><article>
<h4>text</h4><br>
佐藤：<a href="#">xxx</a> / <a href="#">xxx</a> / <a href="#">xxx</a> /<br>
田中：<a href="#">xxx</a> /<a href="#">xxx</a> / <a href="#">xxx</a> /<br>
山田：<a href="#">xxx</a> /<a href="#">xxx</a> / <a href="#">xxx</a> /<br>
<br>
<h4>img</h4><br>
<a href="#">◆</a>　<a href="#">◆</a>　<a href="#">◆</a>　<a href="#">◇</a><br>
<center><a href="#top">△</a></center></article><br><br><br>

<section id="memo"><h3>Memo</h3><h4>00/00/00(sun) メモのサンプル</h4><br><article>
<br>…とか言っていますがこのテンプレでブログつくるならこんな感じかなと作ってみただけなので独自タグの配置などは何も考えていません。<br>
<hr></article>
<h4>00/00/00(sun)タイトル</h4><article><br>
こんな感じでいい感じに改変どうぞ。長文テスト長文テスト長文テスト長文テスト長文テスト長文テスト長文テスト長文テスト<br>
<hr></article>
<h4>00/00/00(sun) お久しぶりの更新です</h4><article>
<br>コンテンツ××に○○を追加しました。<br>とかとか。<br><hr>
</article><article>
<center><a href="#top">△</a></center></article><h2>your site name / xxxxxhit!</h2></div>

△

- pass a path -

Information

強調はこんな感じ

link

bkm

Main contents

text

img

Source & Code

head

html

your site name / xxxxxhit!