Morningunofficial textsite

Last up 10/24
main+1

Introduction

Main contents

小説ページのリンクに使えそうなサンプルを用意してみました。ご利用用途に合わせてお使いください。

Sample1

タイトル
サンプルテキストサンプルテキストサンプルテキスト
複数行だとこんな感じ
タイトル - 1行のサンプル

Sample2

こんな感じのものも用意してみました
01 02 03..to be

About this template

トップページのみメニューなしのテンプレート。
優しいテイストで作ってみました。フォントと色を変えるとガラッと雰囲気が変わるかと思いますので、お好きに変えてみてください。

表示サンプル -- リンク文字／アクセント文字

おまけBOX

罫線

Souce code

HEAD

/*--------------- 初期値 ---------------*/
*{ margin: 0; padding: 0; box-sizing: border-box;}
body{
color: #937961;
font-size: 12px;
font-family: 'Cabin Sketch', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
line-height: 2em;
letter-spacing: 1.9px;
background-color: #fff;
word-break:break-all;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
img{ max-width: 100%;}
a{
text-decoration: none;
color: #e4bb97;
text-shadow: 1px 1px 0 #f7e6dc;
}
a:hover{ color: #f7e6dc;}

/*--------------- レイアウト ---------------*/
header{
width: 100%;
height: 60px;
-webkit-background-size: 28px 28px;
-moz-background-size: 28px 28px;
background-size: 28px 28px;
background-color: #d6e3f8;
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #fff), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(left, #fff 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(left, #fff 50%, transparent 50%, transparent);
background-image: linear-gradient(left, #fff 50%, transparent 50%, transparent);
}
#wrap{
width: 500px;
max-width: 90%;
margin: 30px auto 0;
}
section{ margin: 30px 0 0;}
.news{
font-size: 10px;
text-align: right;
line-height: 1.5em;
margin: 20px 0 0;
}
footer{
text-align: center;
margin: 1em 0;
}
footer a{
color: #937961;
background-color: #eff7dc;
border-radius: 5px;
padding: 3px 5px;
}
footer a:hover{
color: #937961;
background-color: #f7ede8;
}

/*--------------- 見出し、文字 ---------------*/
h1{
transform: rotate(-8deg);
font-size: 34px;
text-shadow: 3px 3px 0 #f7e6dc;
}
h1 span{
display: block;
font-size: 11px;
font-weight: normal;
}
h2{
height: 40px;
color: #fff;
text-align: center;
line-height: 40px;
margin: 40px 0 0.5em;
}
h2 span{
display: inline-block;
background-color: #d6e3f8;
border-radius: 10px;
padding: 0 1em;
}
h3{
transform: rotate(-5deg);
color: #9c5d63;
text-shadow: 2px 2px 0 #f7e6dc;
}
h3 span{
background-color: #fff;
padding: 0.5em;
}
mark{
background: linear-gradient(transparent 50%, #d6e3f8 50%);
}

/*--------------- 装飾 ---------------*/
.box{
background: #f7ede8;
border-radius: 10px;
padding: 0.5em 1em;
}
hr{
border: none;
height: 3px;
border-top: 3px dotted #eff7dc;
}
/* コンテンツ用div */
.contentsbox, .contentsbox2{
border: 3px solid #eff7dc;
border-radius: 10px;
margin: 0 0 0 0.5em;
padding: 20px 10px 10px 15px;
}
.contentsbox a, .contentsbox2 a{
display: inline-block;
color: #937961;
background-color: #eff7dc;
}
.contentsbox a{
line-height: 1.5em;
padding: 0 3px;
}
.contentsbox2 a{
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
margin: 3px;
}
.contentsbox a:hover, .contentsbox2 a:hover{
background-color: #f7ede8;
}
</style>

BODY

ALICE+