TALKYソースコード

・はぜのきさん「白黒をベースにビビッドカラーの黄緑を使った可愛い雰囲気。長編向きで章が作れるもの。できれば画像無し。」

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

HEAD

@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');

@font-face
{
font-family:和田研中角ゴシック;
src: url('https://cdn.leafscape.be/wadalab/wadalab-nakakakugo_web.woff')
     format("woff");
}

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

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

.text{
border-right:double 3px #000;
border-left:double 3px #000;}
}

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

.bk{
width:151px;
height:151px;
background:#c3d825;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
overflow: hidden;
border:solid 1px #fff;
box-shadow:0 0 0 3px #c3d825;
margin:60px auto 0;
border-radius:10px;
}

.top{
position:relative;
bottom:165px;
background:rgba(0,0,0,.7);
border:solid 1px #fff;
box-shadow:0 0 0 3px rgba(0,0,0,.7);
margin:0 auto;
padding:10px;
width:151px;
height:151px;
margin:0 auto -100px;
border-radius:10px;
text-transform:uppercase;}

.top a{
display:inline-block;
color:#fff;
background:rgba(0,0,0,.8);
width:40px;
height:20px;
margin:5px 10px;
padding:15px 5px;
border:solid 1px #fff;
border-radius:50%;
text-align:center;}

.act{
background:#000;
border:solid 1px #fff;
box-shadow:0 0 0 3px #000;
margin:20px 25px;
padding:15px;
border-radius:10px;}

.act a{
color:#fff;}

.ttl{
margin:-50px 15px 20px;}

.text{
line-height:200%;
font-size:13px;
padding:30px 20px 20px;
margin:10px 5px;
text-align:left;
color:#000;
background:#fff;}

.text p{
line-height:150%;
background:#e7e7eb;
border:solid 1px #fff;
box-shadow:0 0 0 2px #e7e7eb;
margin:20px 10px;
padding:10px;
font-size:10px;}

header{
text-align:center;
margin:0;}

.ft{
font-size:12px;
line-height:150%;
margin-top:20px;
text-align:center;}

.ft a{
display:inline-block;
color:#fff;
background:#000;
width:40px;
height:20px;
margin:5px 10px;
padding:15px 5px;
border:solid 1px #fff;
box-shadow:0 0 0 2px #000;
border-radius:50%;
text-align:center;}

h1{
line-height:100%;
font-weight:normal;
border-top:double 3px #fff;
border-bottom:double 3px #fff;
color:#fff;
margin:30px 10px 10px;
padding:10px;
text-align:center;}

h2{
line-height:150%;
border-top:double 5px #c3d825;
color:#fff;
font-weight:normal;
font-size:15px;
margin:30px 10px 0;
padding:0;
text-align:center;
text-transform:uppercase;}

h2 p{
display:inline-block;
background:#000;
padding:0 10px;
position:relative;
bottom:50px;}

h3{
line-height:150%;
border-top:double 5px #000;
font-weight:normal;
font-size:18px;
color:#c3d825;
margin:30px 10px 30px;
padding:0;
text-align:center;}

h3 div{
display:inline-block;
background:#000;
padding:3px 15px;
position:relative;
bottom:20px;
border:solid 1px #fff;
box-shadow:0 0 0 3px #000;}

a{
color:#555;
text-decoration:none;
padding:0 3px;
transition:0.5s;
}

a:hover{color:#c3d825;}

input[type],textarea{
height:50px;
width:80%;
font-family:"Fira Sans Condensed","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#fff;
color:#000;
border:solid 1px #000;
margin:5px 10px;
padding:2px 5px;
border-radius:5px;}

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

input[type=submit]{
margin:5px;
height:auto;
width:80px;
cursor:pointer;
text-shadow:none;
border:solid 1px #000;
background:#000;
color:#c3d825;
text-transform:uppercase;}

</style>

表紙

文章

名前変換