息継ぎ接いだソースコード

・抹茶さん「背景に素材を使ったシンプルだけどオシャレなテンプレート。白を基調として、読みやすい可愛らしいもの。」

自動改行“しない”で作成しています。
表紙ページに一つずつ文章へのリンクを貼る仕様になっていますので、リストタグを使用していません。お気をつけください。
画像はこちらからどうぞ。

HEAD

@import url('https://fonts.googleapis.com/css?family=Rubik');

@font-face
{
font-family: はれのそら明朝;
src: url('https://cdn.leafscape.be/Harenosora/harenosora_web.woff2')
     format("woff2");
}

body{
font-family:"Rubik","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#555;
background:#fff;
margin:0;
padding:0;}

.bk{
content:"";
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100%;
background:url(##背景画像URL##)  center/cover no-repeat;
-webkit-background-size:cover;
background-size:cover;}

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

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

.con{
margin:50px 20px 20px;
padding:15px;
background:rgba(255,255,255,.9);
}

.cau{margin-top:20px;}

.act{
border-top:solid 2px #eee;
margin:30px auto 10px;
padding:10px 0;
text-align:left;
color:#ccc;}

.text{
font-size:13px;
letter-spacing:2px;
line-height:200%;
margin:50px 5px 20px;
padding:30px 15px 10px;
background:rgba(255,255,255,.9);}

.text p{
font-size:11px;
letter-spacing:1px;
line-height:150%;
margin:20px;
padding:10px;
border:solid 2px #eee;
color:#888;}

strong{
color:#000;
background:#dda0dd;
font-weight:normal;
margin:0 1px;
padding:0 2px;}

.ft{
text-align:center;
padding:10px 10px 0;
margin:15px 0 0;}

h1{
font-size:24px;
font-weight:normal;
font-family:はれのそら明朝, sans-serif;
color:#3b7960;
margin:20px 0;
padding:0;}

h2{
color:#555;
font-size:15px;
font-weight:normal;
font-family:Rubik,はれのそら明朝, sans-serif;
margin:10px 0;}

h2 p{
color:#fff;
background:#92b5a9;
margin:0 10px 0 0;
padding:2px 5px;
display:inline-block;}

h3{
font-size:24px;
font-weight:normal;
font-family:はれのそら明朝, sans-serif;
color:#3b7960;
margin:20px 0 50px;
padding:0 5px 10px;
border-bottom:solid 2px #eee;}

a,.link{
color:#555;
border-bottom:dashed 1px #8fbc8f;
text-decoration:none;
padding:0 3px;
transition:0.5s;
cursor:pointer;}

a:hover,.link:hover{border-bottom:solid 1px #8fbc8f;}

input[type],textarea{
height:80px;
width:95%;
font-family:"Rubik","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#eee;
color:#555;
border:none;
margin:0 5px;
padding:5px;}

input[type=text]{
height:24px;
width:80px;
padding:5px;
margin:5px 5px 10px;}

input[type=submit]{
height:auto;
width:50px;
cursor:pointer;
text-shadow:none;
border:solid 1px #555;
background:#555;
color:#fff;
padding:2px 5px;
margin:5px 0;}

</style>

</script>

(function($){
	$(document).ready(
 function(){
	$('.link').click(function(){
	$(this).next('.cau').stop(true,true).slideToggle();
});
	$("div.cau").css("display","none");
});
})(jQuery);

</script>

var i=0;var int=0;$(window).bind("load",function(){
	$('.width').fadeIn(900);
var int=setInterval("sFade(i)",900);
});function sFade(){if(i>=1){
		clearInterval(int);
}
i++;}

</script>

表紙

<div class="bk"></div>
<div class="wrp">
<div class="con">
<h1>息継ぎ接いだ</h1>
<span class="link">name & caution</span>
<div class="cau">

ここに説明や注意書き、設定などを記載出来ます。開閉式になっていますので、非対応の機種等からはどう見えるかわかりません。その点ご了承ください。<div class="cau">～</div>部分が開閉式になっていますので、外したい場合は<div class="cau">～</div>を消してください。</div>
<div class="act">
<h2><p>01</p>息継ぎ接いだ</h2>
<a href="#">タイトル</a> | <a href="#">生き伸ばせたかな</a> | <a href="#">白い部屋</a> | <a href="#">ユダの教示</a> | <a href="#">流星に呪う</a> | <a href="#">大人じゃないのよ</a>
</div>
<div class="act">
<h2><p>02</p>暗がりの天井</h2>
<a href="#">01</a> | <a href="#">02</a> | <a href="#">03</a> | <a href="#">04</a> | <a href="#">05</a> | <a href="#">06</a> | <a href="#">07</a> | <a href="#">08</a> | <a href="#">09</a> | <a href="#">10</a>
</div>
<div class="act">
<h2><p>03</p>いなくなったらさみしいな</h2>
<a href="#">タイトル</a>
</div>
</div></div>

文章