無垢の島

INFORMATION

ここは○○で××なサイトですなどサイトの説明をどうぞ。
サイトタイトルは英語のほうがいいかもしれません。
メニューリンク以外のリンクはこうなります。

強調はこうなります

http://xxxxxxx/xxxxxx/ | 12345

SOURCE&CODE

メニュー部分の背景画像はパブリックドメインのものを加工しているのでこちらから保存してください。
自動改行は「しない」で作成しています。

HTML

HEAD

<link href="https://fonts.googleapis.com/css?family=Cinzel|Sawarabi+Mincho" rel="stylesheet">
<style type="text/css">

body{
font-family: 'Sawarabi Mincho', sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#1a2930;
background:#b1221a;
margin:0;
padding:0;}

@media screen and (min-width:401px){
.wrp{
width:400px;
margin:0 auto;}
}

@media screen and (max-width:400px){
.wrp{
width:100%;
margin:0 auto;}
}

.box{
max-width:400px;
margin:0 auto;
overflow:hidden;}

.box:before,.box:after{
content: "";
display:table;}

.box:after{clear:both;}

.menu{
text-transform:uppercase;
letter-spacing:2px;
line-height:180%;
margin:50px 10px 0;
overflow:hidden;}

.menu a{
color:#1a2930;
padding:1px 5px;
background:rgba(255,255,255,.3);
border:none;}

.menu a:hover{
color:#8f9239;
background:none;
border:none;}

.top{
margin:50px 20px 20px;
padding:15px;
background:#b1221a;}

.con{
  margin: 0;
  padding: 15px;
text-align:center;
  position: relative;
  border: 1px solid #1a2930;
}

.con-title{
  position: absolute;
  top: -0.8em;
  left: 20px;
  font-weight: bold;
  font-size: 1.2em;
  background: #b1221a;
  padding: 0 0.5em;
}

.title-box1 p{
  margin: 0;
  padding: 0;
}

header{
background-image: url(##背景画像URL##);
margin:0;
padding:20px;}

strong{
background:#c5c1c0;
font-weight:normal;
padding:0 2px;
margin:0 2px;}

h1{
color:#8f9239;
font-family: 'Cinzel', serif;
font-size:36px;
letter-spacing:5px;
text-align:center;
text-shadow: 1px 2px 3px #000000;  position: relative;}

h2{
font-weight:normal;
color: #ffffff;
	font-size: 14px;
margin:10px 40px;
	line-height: 10px;
	padding: 5px;
	background: repeating-linear-gradient(45deg, #4f4f4f, #4f4f4f 10px, #000000 10px, #000000 20px);
text-align:center;}

h3{
font-weight:normal;
font-size:14px;
margin:10px 40px;
padding:2px 0;
color:#1a2930;
border:solid 1px #1a2930;
}

a{
color:#1a2930;
text-decoration:none;
padding:0 3px;
border-bottom:solid 1px #c5c1c0;}

a:hover{border-bottom:solid 1px #8f9239;}

textarea{
font-family: 'Sawarabi Mincho', sans-serif;
background:rgba(255,255,255,.3);
color:#222;
width:98%;
padding:1%;
display;block;
height:40px;
border:none;
border-radius:3px;
letter-spacing:1px;
line-height:1.5;
}

</style>