Chocolate Menier

Information

ここは●●と××を取り扱う個人サイトです。理解の無い方はＵたーん。
管理人はななし。などなど。
pass a pathのソースをちょっと改変しただけという手抜きっぷり。
ナビゲーションは右下固定になっています。
＜span＞で文字色を変えられます。何か目立たせたい時にどうぞ。

強調

はこんな感じ。

bkm

リンクフリーに甘えています。エトセトラエトセトラ。
メニュー以外のリンクサンプル link link

Main contents

自動改行は「しない」で制作しています。
背景はパブリックドメインのものを加工したものなのでこちらから。

HEAD

<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great|Sawarabi+Mincho&display=swap" rel="stylesheet">
<style type="text/css"><!--
body,h1,h2,h3,p{
 margin: 0;
 padding: 0;}

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

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

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

a:active{ color: #a44;}

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

.top{ text-align: center;}

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

h1{color:#000;
 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: #000;
 text-align: center;
 margin-bottom: 12px;}

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

span{color:#e9967a;}

#footer {
  bottom: 0;
  width: 100%;
  height: 100px;
}

footer a{ padding: 0 3px;}

menu{position: fixed;	
bottom: 0;	
right: 0;
width: 300px;
background:#f9f2a4;}

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

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

nav a:hover{
background:#d2b48c;
 color: #000;}

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


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;
background:rgba(178,175,139,.3);
color:#222;
width:98%;
padding:1%;
display;block;
height:40px;
border:none;
border-radius:3px;
letter-spacing:1px;
line-height:1.5;
}

--></style>

HTML

<div class="all top"></div><div class="all">
<h1>Chocolate Menier </h1><br>
since:00/00-12345 hits!<article><section id="info"><h2><span>I</span>nformation </h2>
ここは●●と××を取り扱う個人サイトです。理解の無い方はＵたーん。<br>
管理人はななし。などなど。<br>
<br>ナビゲーションは右下固定になっています。<br>
＜span＞で<span>文字色を変えられます。</span>何か目立たせたい時にどうぞ。<br>
<h3>強調</h3>はこんな感じ。<br>
<h3>bkm</h3><br>
リンクフリーに甘えています。エトセトラエトセトラ。<br>
<a href="#">メニュー以外のリンクサンプル</a> <a href="#">link</a> <a href="#">link</a><br></article>
<menu><nav>menu>><a href="#info">info</a><a href="#source">source</a><a href="#con">contact</a></nav></menu>
</div>

Contact

何かあればこちらから。などなど。
返信不要の場合は文頭もしくは文末に「×」をお書きください。(こちらのフォームは拍手に繋がっています)