PRECIOUS - INFORMATION

掲示板テンプレート「PRECIOUS」について

nano独自機能「掲示板：スレッドタイプ」を使用しており、公開している掲示板は以下の設定を適用しています。

基本設定

掲示板タイプ	スレッド
詳細なレイアウト設定	しない
閲覧モード切替	しない
トリップ記号	◇
新着表示機関	24時間
新着表示マーク	なし
URL自動リンク	しない
トピック件数	10件
返信記事件数	5件
トピ並び順	各新しい順
トピック記事の表示	常に表示
返信のスレ上げ	する

投稿制限

公開前チェック	しない
未チェック時表示	メッセージ表示
半角英数のみの投稿	受け付ける
HTMLタグ許可	する
投稿後の編集許可	する
投稿後の削除許可	する
画像アップロード許可	する
PC投稿禁止	しない
連続投稿禁止	しない
同一内容投稿禁止	しない

項目設定

必須項目は各々で違うため、必須にしたい項目を選択して設定してください。

その他

記事投稿ページの細かなデザイン、投稿完了ページに対するデザインは仕様のため設定することができませんでした。

リクエスト内容

佐原さん
一覧ページはスレッド名とレス数、開くとアイコンと本文などを表示する掲示板デザイン

ソースコード

HTML

#bbs#

<header>
    <ul>
        <li><a href="自分のトップページURL"><i class="fa fa-home" aria-hidden="true"></i><span>HOME</span></a></li>
        <li><h1>plecious</h1></li>
        <li>#add_<i class="fa fa-plus" aria-hidden="true"></i><span>ADD</span>#</li>
    </ul>
</header>
<main>

<dl>
    <dt><span>RES</span><strong>#count#</strong></dt>
    <dd>
        <a href="#r_url#">#title#</a>
        <p>#text#</p>
    </dd>
</dl>

</main>
<footer>
    <ul>
        <li>#next_<i class="fa fa-long-arrow-left" aria-hidden="true"></i><span>NEXT</span>_<p><i class="fa fa-long-arrow-left" aria-hidden="true"></i><span>NEXT</span></p>#</li>
        <li>#prev_<i class="fa fa-long-arrow-right" aria-hidden="true"></i><span>PREV</span>_<p><i class="fa fa-long-arrow-right" aria-hidden="true"></i><span>PREV</span></p>#</li>
    </ul>
</footer>

<header>
    <ul>
        <li><a href="掲示板ページURL"><i class="fa fa-reply" aria-hidden="true"></i><span>BACK</span></a></li>
        <li><h1>plecious</h1></li>
        <li>#add_<i class="fa fa-paper-plane-o" aria-hidden="true"></i><span>RES</span>#</li>
    </ul>
</header>
<main class="res">

<dl>
    <dt>#tlink#</dt>
    <dd>
        <h2>#title#<span class="date">2017.09.02 #name#</span></h2>
        <section>
            #text#
            <nav>#mod_<i class="fa fa-pencil" aria-hidden="true"></i><span>EDIT</span>#</nav>
        </section>
    </dd>
</dl>

<header>
    <ul>
        <li><a href="掲示板ページURL"><i class="fa fa-reply" aria-hidden="true"></i><span>BACK</span></a></li>
        <li><h1>plecious</h1></li>
        <li></li>
    </ul>
</header>
<main>
    #error#<br />
    #form#
</main>

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;
    font-family: 'Gudea', sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

textarea {
    width: 100%;
    height: 80px;
    background: rgba(90,90,90,0.1);
    border: 1px solid #dfdfdf;
    padding: 10px;
    font-size: 11px;
}

strong {
    font-weight: bold;
}

a {
    text-decoration: none;
    color: #333;
}

p {
    margin-bottom: 15px;
}

body {
    line-height: 1.6;
    font-size: 12px;
    font-family: sans-serif;
    word-break: break-all;
    text-align: justify;
    color: #3F3038;
    position: relative;
}

header {
    background: #fafafa;
    box-shadow: 0 1px 0 rgba(30,30,30,0.1);
    font-family: 'Alegreya Sans SC', sans-serif;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
}

header ul {
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    margin: 0 auto;
}

header ul li {
    display: inline;
    text-align: center;
}

header ul li a {
    color: #999;
    font-size: 16px;
    transition: .3s;
}

header ul li a:hover {
    color: #9ad4de;
}

header ul li span {
    display: block;
    font-size: 10px;
    letter-spacing: 1px;
    margin-top: -5px;
}

header h1 {
    font-size: 18px;
    letter-spacing: 2px;
}

main {
    position: relative;
    width: 85%;
    max-width: 400px;
    margin: 90px auto 10px;
    padding-bottom: 30px;
}

main dl {
    box-shadow: 0 1px 0 rgba(30,30,30,0.1);
    padding: 5px 0 0;
    margin: 10px 0;
}

main dl dt {
    float: left;
    margin-right: 20px;
    text-align: center;
    font-family: 'Amiko', sans-serif;
}

main dl dt span {
    display: block;
    font-family: 'Alegreya Sans SC', sans-serif;
    letter-spacing: 2px;
}

main dl dd {
    overflow: hidden;
    min-height: 30px;
    position: relative;
    padding-right: 23px;
}

main dl dd:after {
    content: '\f105';
    font-family: 'FontAwesome';
    font-size: 18px;
    position: absolute;
    z-index: 10;
    top: 10px;
    right: 5px;
    color: #ADDCE4;
}

.res dl dd a,
main dl dd a {
    font-weight: bold;
    transition: .3s;
}

main dl dd p a {
    display: inline;
}

main dl dd a:hover {
    color: #9ad4de;
}

main dl dd p {
    font-size: 11px;
    color: #bfbfbf;
}

main dl dd * {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.res dl {
    box-shadow: none;
}

.res dl dt {
    margin-right: 10px;
}

.res dl dt img {
    width: 37px;
    height: 37px;
    object-fit: cover;
    border-radius: 4px;
    position: relative;
    z-index: 0;
}

.res dl dd {
    padding-right: 0;
    position: relative;
}

.res dl dd section {
    margin: 5px 0 0;
}

.res dl dd a {
    display: inline;
}

.res dl dd h2 {
    font-weight: bold;
}

.res dl dd * {
    overflow: visible;
    white-space: inherit;
    text-overflow: inherit;
}

.res dl dd h2 span {
    display: block;
    color: #cfcfcf;
    font-family: 'Amiko', sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
}

.res dl dd h2 a {
    display: inline;
}

.res dl dd h2 span::before {
    content: '\f017';
    font-family: 'FontAwesome';
}

.res dl dd::after {
    display: none;
}

.res dl dd p {
    color: #3F3038;
    font-size: 12px;
}

.res dl dd nav {
    margin-top: 10px;
    text-align: right;
}

.res dl dd nav a {
    display: inline ;
    font-size: 15px;
    margin-left: 8px;
}

.res dl dd nav a span {
    display: inline;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    margin-left: 2px;
    border-bottom: 1px solid #efefef;
}

footer {
    width: 100%;
    padding: 5px 10px;
    text-align: center;
}

footer ul {
    height: 34px;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
}

footer ul li {
    display: inline;
    position: absolute;
}

footer ul li p span,
footer ul li a span {
    display: block;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    position: relative;
    top: -4px;
}

footer ul li:first-child {
    left: 5px;
}

footer ul li:last-child {
    right: 5px;
}

footer ul li p * {
    opacity: .3;
}

input[type=password],
input[type=text],
input[type=submit],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    font-size: 12px;
    font-family: 'Assistant', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    background: #efefef;
    padding: 4px 10px;
    margin-bottom: -10px;
    border: none;
    border-radius: 3px;
    width: 100%;
    height: 29px;
    line-height: 22px;
    margin-bottom: 0;
}

select {
    display: block;
    font-size: 12px;
    font-family: 'Assistant', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    background: #fff;
    border: 1px solid #dadada;
    padding: 4px 10px;
    margin-bottom: -10px;
    border-radius: 3px;
    width: 100px;
    height: 29px;
    line-height: 22px;
    margin-bottom: 0;    
}

select,
input[type=text] {
    max-width: 240px;
    line-height: 22px;
}

input[type=password] {
    max-width: 180px;
}

input[type=submit] {
    display: block;
    line-height: 29px;
    letter-spacing: 5px;
    height: 36px;
    width: 100%;
    border: none;
    max-width: 220px;
    text-align: center;
    margin: 0;
    padding: 3px 8px;
    background: #c0e4ea;
    color: #fff;
    font-weight: bold;
}

input[type=file] {
    width: 100%;
    margin-bottom: 25px;
}

textarea {
  height: 100px;
  margin-bottom: 15px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table tr th,
table tr td {
    display: table-cell;
    padding: 5px 10px;
    border-bottom: 1px dotted #d2d2d2;
}

table tr th {
    width: 130px;
    background: #fafafa;
}

table tr td {
    width: 90px;
}
</style>