Ave Mariaソースコード

・ひさやんさん「グノーのアヴェ・マリアをイメージした小説ページ。見やすさ重視で画像は任意。HGSゴシックMの字体を使用。」

自動改行“しない”で作成しています。
表紙ページに一つずつ文章へのリンクを貼る仕様になっていますので、リストタグを使用していません。お気をつけください。
フォントについてのご指定がありましたが、機種などによっては反映しないことをご了承ください。

画像はパブリックドメインのものを加工していますので、こちらからお持ち帰りください。

HEAD

@import url('https://fonts.googleapis.com/css?family=League+Script|Arsenal');

@font-face
{
font-family: 和田研細丸ゴシック;
src: url('https://cdn.leafscape.be/wadalab/wadalab-hosomin_web.woff2')
     format("woff2");
}

body{
font-family:"Arsenal","HGSゴシックM", 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;}

.act{
max-width:300px;
margin:20px auto 30px;
}
}

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

.act{margin:20px 20px 30px;}
}

.top{
background:rgba(255,255,255,.7);
padding:30px 0 10px;
text-align:center;}

.act{
color:#ccc;
padding:15px;
border:solid 1px #eee;
border-radius:10px;}

.text{
font-size:13px;
letter-spacing:2px;
line-height:200%;
margin:20px;}

.text p{
font-size:11px;
letter-spacing:1px;
line-height:150%;
margin:20px;
padding:10px;
background:#f0f8ff;
color:#555;}

header{
padding:0;
max-width:230px;
margin:50px auto;
background:url(##画像URL##) no-repeat;
background-size:230px;}

header a{
line-height:120%;
color:#fff;
background:rgba(83, 131, 195,.6);
padding:4px 5px;
margin:0 10px;
display:inline-block;
text-align:center;
width:80px;
border-radius:3px;}

header a:hover{
color:#5383c3;
background:rgba(238, 238, 238,.6);}

.ft{
text-align:center;
margin:20px;}

h1{
font-family:League Script,和田研細丸ゴシック, sans-serif;
font-size:34px;
line-height:100%;
text-align:center;
margin:0 0 10px;
padding:80px 10px 3px 2px;
color:#555;
text-shadow:0 0 10px #fff,0 0 5px #fff;
}

h2{
font-family:League Script,和田研細丸ゴシック, sans-serif;
color:#555;
border-bottom:solid 1px #eee;
font-size:18px;
text-align:center;
margin:0 auto -30px;
padding:0 5px;
position:relative;
bottom:48px;}

h2 p{
text-align:center;
background:#a2d7dd;
color:#fff;
width:25px;
height:25px;
line-height:30px;
font-size:15px;
padding:5px;
border-radius:50%;
display:inline-block;}

h3{
font-family:League Script,和田研細丸ゴシック, sans-serif;
border-bottom:solid 1px #eee;
font-size:24px;
line-height:100%;
text-align:center;
margin:0;
padding:100px 0 0;
color:#555;
text-shadow:0 0 10px #fff,0 0 5px #fff;}

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

a:hover{color:#ccc;}

input[type],textarea{
height:50px;
width:80%;
font-family:"Arsenal","HGSゴシックM", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#eee;
color:#333;
border:solid 1px #eee;
margin:5px 10px;
padding:2px 5px;
-webkit-appearance: none;
box-shadow:none;
border-radius:5px;}

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

input[type=submit]{
margin:5px;
height:auto;
width:80px;
cursor:pointer;
text-shadow:none;
border:solid 1px #a2d7dd;
background:#a2d7dd;
color:#fff;
font-weight:normal;
}

</style>

表紙

文章

名前変換