コンパスの導き

リクエスト内容

小立南さん
薄い暗めの色の少し凝ってて見やすい小説ページ

イメージカラー：少し暗め

素材配布元

enamel - タイトル

テンプレート仕様

文章画面

名前変換機能を表紙ページで完結させているため、名前変換ページはありません。

改行を<br>に変換して表示しない、また本文の改行を<br>に変換しない設定にしています。改行が入ってしまうとリンク色が交互になりません。

固定メニューの「 LIKE」には拍手用URLを設定してみてください。

ソースコード

HTML

#novel#

<article>
    <header>
        <h1>
            <span class="lnr lnr-map-marker"></span>
            コンパスの導き
        </h1>
    <form action="＃dream_url＃" method="post">
    
    <input type="text" name="DreamID[1]" value="＃name＃" />
    <input type="text" name="DreamID[2]" value="＃name1＃" />
    <input type="submit" name="set" value="◎" />
    </form>
    </header>
    <aside>
        ＃list＃
    </aside>
</article>
<nav>
    <ul>
        <li><a href="トップページURL"><span class="lnr lnr-home"></span><strong>HOME</strong></a></li>
        <li>＃prev_<span class="lnr lnr-arrow-left"></span><strong>BACK</strong>_<span class="lnr lnr-arrow-left"></span><strong>BACK</strong>#</li>
        <li><a href="小説ページURL"><span class="lnr lnr-list"></span><strong>MAIN</strong></a></li>
        <li>＃next_<span class="lnr lnr-arrow-right"></span><strong>NEXT</strong>_<span class="lnr lnr-arrow-right"></span><strong>NEXT</strong>#</li>
        <li><a href="拍手用URL"><span class="lnr lnr-heart"></span><strong>LIKE</strong></a></li>
    </ul>
</nav>

<article>
    <section>
        <h2>
            #title#
        </h2>
        <span class="lnr lnr-chevron-down"></span>
        #text#
    </section>
</article>
<nav>
    <ul>
        <li><a href="トップページURL"><span class="lnr lnr-home"></span><strong>HOME</strong></a></li>
        <li>＃prev_<span class="lnr lnr-arrow-left"></span><strong>BACK</strong>_<span class="lnr lnr-arrow-left"></span><strong>BACK</strong>#</li>
        <li><a href="小説ページURL"><span class="lnr lnr-list"></span><strong>MAIN</strong></a></li>
        <li>＃next_<span class="lnr lnr-arrow-right"></span><strong>NEXT</strong>_<span class="lnr lnr-arrow-right"></span><strong>NEXT</strong>#</li>
        <li><a href="拍手用URL"><span class="lnr lnr-heart"></span><strong>LIKE</strong></a></li>
    </ul>
</nav>

タイトル：タイトル名
一覧表示でのタイトルに左：<p><span>番号</span>
一覧表示でのタイトルに右：</p>

CSS

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

input, button, textarea {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
}

a {
    text-decoration: none;
    color: #1c301d;
}

body {
    margin-bottom: 80px;
    font-family: 'Assistant', "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 12px;
    line-height: 1.8;
    color: #333;
    text-align: justify;
    word-break: break-all;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23eaeaea' fill-opacity='0.67'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

article {
    width: 72%;
    max-width: 480px;
    margin: 50px auto 0;
}

article section a {
    color: #ACBDC5;
    border-bottom: 1px solid #dfdfdf;
    padding: 0 3px;
}

article section h2 {
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

article section h2 span {
    display: block;
    font-size: 20px;
}

article section p {
    margin-bottom: 20px;
    font-size: 12.5px;
    line-height: 1.7;
}

article section .lnr-chevron-down {
    display: block;
    color: #bfbfbf;
    margin: 20px 0;
    font-size: 20px;
    text-align: center;
}

nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #044260;
}

nav ul {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 7px;
}

nav ul li {
    text-align: center;
    display: inline-block;
    width: 60px;
    height: 40px;
    color: #888;
}

nav ul li a {
    color: #fff;
}

nav ul li span {
    display: block;
    width: 30px;
    height: 15px;
    font-size: 17px;
    margin: 0 auto;
}

nav ul li:nth-child(3) {
    width: 55px;
    background: #044260;
    position: relative;
    top: -20px;
    border-radius: 50% 50% 0 0;
}

nav ul li:nth-child(3) span {
    font-size: 28px;
    position: relative;
    top: 8px;
}

nav ul li:nth-child(3) strong {
    position: relative;
    top: 20px;
}

nav ul li strong {
    font-size: 10px;
    letter-spacing: 2px;
}

nav ul li a:hover {
    color: #aaa;
}

nav ul li a:hover strong {
    letter-spacing: 4px;
}

nav ul li:last-child a:hover {
    color: #E9546B !important;
}

header {
    margin-bottom: 50px;
}

header form input {
    width: 80px;
    background: #efefef;
}

aside {
    width: 200px;
    margin: 0 auto;
}

aside p {
    margin-bottom: 10px;
}

aside p span {
    display: inline-block;
    width: 24px;
    height: 24px;
    text-align: center;
    border-radius: 3px;
    background: #044260;
    color: #fff;
    position: relative;
    top: -5px;
    margin-right: 7px;
}

aside p:nth-child(even) span {
    background: #ACBDC5;
}

header {
    text-align: center;
    overflow: hidden;
}

header h1 {
    margin-bottom: 10px;
    font-size: 20px;
    font-family: "Noto Sans Japanese";
    font-weight: 200;
    letter-spacing: 2px;
}

header h1 span {
    display: block;
    color: #E9546B;
    font-size: 30px;
}

header h2 {
    font-size: 12px;
    letter-spacing: 3px;
    margin-bottom: 5px;
}

header form input[type=text],
header form input[type=submit] {
  line-height: 1.8;
  font-size: 11px;
  font-family: Verdana, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  display: inline;
  background: #efefef;
  border: none;
  padding: 3px 10px;
  border-radius: 3px;
}

header form input[type=text] {
    width: 70px;
    line-height: 22px;
    height: 26px;
    margin-right: 8px;
}

header form input[type=submit] {
    width: 30px;
    height: 24px;
    margin-top: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #044260;
    color: #fff;
}

h3 {
    font-weight: bold;
    position: relative;
    padding: 5px 0 0 8px;
    border-left: 6px solid #e2e2e2;
    margin-bottom: 10px;
}

h3::before {
    position: absolute;
    left: -6px;
    bottom: 0;
    content: '';
    width: 6px;
    height: 50%;
    background: #ACBDC5;
}
</style>