Serenti

REQUEST

はるねさん
聖域、もしくは綺麗なイメージの強いページ（イメージカラー：黒）

THANKS

タイトル：enamel
背景素材：Subtle Patterns.（Dark Embroidery）
フレーム：Frame Design（クラシカルデコその2）
王冠アイコン：ICOOON MONO（王冠のフリーアイコンその3）

INFOTMATION

名前変換ページ / 文章レイアウト

游明朝体を使用しているためWindows環境の場合、文字が薄く感じる場合があります。

お話タイトルの左にはCSSにて番号を自動で振っています。必要の無い場合はCSSよりmain .list a::before{ ... }の部分を削除してください。

SOURCE CODE

HTML

CSS

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
    box-sizing: border-box;
    list-style-type: none;
}

html::before {
    content: '';
    position: fixed;
    z-index: -1;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 10px double #444;
}

a {
    color: #fff;
    text-decoration: none;
    transition: .3s;
}

hr {
    border: none;
    margin: 80px 0;
}

body {
    text-align: justify;
    background: url(背景画像_url);
    margin: 0 auto 40px;
    font-size: 12px;
    font-family: 'Libre Baskerville', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", serif;
    color: #dfdfdf;
    line-height: 1.6;
}

header {
    margin-top: 50px;
    text-align: center;
    background: url(フレーム素材_url) no-repeat center top;
    background-size: 204px;
    min-height: 204px;
}

header a {
    line-height: 24px;
    display: inline-block;
    color: #fff;
    font-size: 11px;
    padding: 0 8px;
    background: #333;
    letter-spacing: 0.4px;
}

header h1 {
    color: #333;
    margin-bottom: 5px;
    padding-top: 60px;
    font-size: 35px;
    font-family: 'Berkshire Swash', cursive;
    text-shadow: 1px 1px 0 rgb(226, 198, 157);
}

main {
    max-width: 300px;
    width: 70%;
    margin: 40px auto;
    counter-reset: number;
}

main p {
    margin-bottom: 20px;
}

main a {
    color: #d8cab4;
}

main .list {
    line-height: 36px;
}

main .list a {
    color: #dfdfdf;
    display: block;
}

main .list a::before {
    counter-increment: number;
    content: counter(number);
    margin-right: 12px;
    font-size: 18px;
    background: #C79F62;
    color: #fff;
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
}

main h2 {
    position: relative;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 2px;
    margin: 50px 0 25px;
}

main h2 span {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin: 0 5px;
    padding: 50px 10px 0;
    background-color: #333;
    text-align: left;
    background: url(王冠アイコン_url) no-repeat center top;
    background-size: 32px;
}

main h2::before {
    position: absolute;
    top: 60%;
    z-index: 1;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: rgba(199, 159, 98,0.3);
}

main h3 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 40px 0 5px;
    font-size: 16px;
}

main h4 {
    width: 60%;
    position: relative;
    padding-left: 25px;
    margin: 40px 0 12px;
}

main h4::before {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 0;
    width: 0;
    height: 0;
    border: none;
    border-left: solid 15px transparent;
    border-bottom: solid 15px rgb(199, 159, 98);
}

main h4::after {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 10px;
    width: 100%;
    border-bottom: solid 3px rgb(199, 159, 98);
}

main .char {
    margin: 40px 0;
    line-height: 1.6;
}

main .char a {
    color: #d8cab4;
}

main .char p {
    margin-bottom: 20px;
}

main .char .page {
    margin-top: 40px;
    text-align: center;
}

main.name {
    text-align: center;
}

main form h3 {
    font-size: 10px;
}

main form input,
main textarea {
    color: #333;
    width: 100%;
    border: none;
    background: rgba(199, 159, 98,0.5);
    padding: 5px 10px;
    height: 30px !important;
    font-family: 'Libre Baskerville', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", serif;
    -webkit-appearance: none;
}

main form input[type=submit] {
    margin-top: 40px;
    -webkit-appearance: none;
    background: #C79F62;
    color: #fff;
}

main textarea {
    color: #fff;
    height: 80px !important;
    padding: 10px;
    line-height: 18px;
    font-size: 10px;
}

footer {
    text-align: center;
    line-height: 22px;
}</style>

CHAPTER 01

CHAPTER 02

REQUEST

THANKS

INFOTMATION

SOURCE CODE

HTML

CSS