sitename

更新履歴

20/03/21：こちらの件とその他不具合を修正しました。

source&image

PC

head

下記のCSSには小説部分＋トップページ＋更新履歴分の設定が含まれています。小説部分だけ使用する場合のCSSはこちらをご利用ください。

body(index)

<div class="wrap"> <header> <i class="fas fa-gem image img_top"></i> <h1>sitename</h1> <nav> <ul> <li><a href="design32_novel.html">contents</a></li> <li><a href="">blog</a></li> <li><a href="">clap</a></li> <li><a href="">mailform</a></li> </ul> </nav> </header> <iframe title="更新履歴" src="logページのURL" class="box"> <a href="logページのURL">更新履歴</a> </iframe> <div class="info"> <section> <h2>about</h2> <p>ここは○○を中心とした△△サイトです。</p> </section> <section> <h2>information</h2> <p>説明文と<a href="">リンク</a>と<em>強調</em></p> <div class="right"><a href="infoページURL">more</a></div> </section> <section> <h2>ranking</h2> <p><a href="">aaa</a>/<a href="">bbb</a>/<a href="">ccc</a></p> </section> </div> <footer> <p>since 00/00/00</p> <p>00000hit</p> </footer> </div>

body(info)

<main> <header> <i class="fas fa-gem image img_top"></i> <h1>sitename</h1> </header> <section> <h2>more information</h2> <p>更新履歴の部分はインラインフレームを使用しています。右側のボックスの高さより長くなった部分がスクロールされるので採用しました。……が、最新１０件だけの表示とかにするならclass="box"で囲ってトップページに直接書いても大差ないと思います。</p> </section> <section> <h2>heading2</h2> <p><a href="">リンク</a>と<em>強調</em></p> <h3>heading3</h3> <p><textarea></textarea><br> <input type="submit" value="送信ボタン"></p> </section> </main>

body(log)

<section class="new"> <h2>whats new?</h2> <p><span>00/00</span>○○＋１</p> <p><span>00/00</span>サイト改装</p> <p><span>00/00</span>はみ出した分はスクロールで表示されます</p> <p><span>00/00</span>○○＋１</p> <p><span>00/00</span>サイト改装</p> <p><span>00/00</span>□□＋１、△△＋１</p> </section>

body(contents)

<main class="novel"> <h2>連載中</h2> <ul> <li><i class="fas fa-gem image img_1"></i> <div><h3><a href="URL">title1</a><span>佐藤</span></h3> <p>世界で一番大嫌いな佐藤と偽装カップルを演じる話。</p></div> </li> <li><i class="fas fa-gem image img_2"></i> <div><h3><a href="URL">title2</a><span>相手</span></h3> <p>説明文</p></div> </li> </ul> <h2>完結済み</h2> <ul> <li><i class="fas fa-gem image img_3"></i> <div><h3><a href="">title2</a><span>鈴木</span></h3> <p>同級生の鈴木と出会って恋に落ちる話。（全１２話）</p></div> </li> <li><i class="fas fa-gem image img_4"></i> <div><h3><a href="">title3</a><span>高橋</span></h3> <p>幼馴染の高橋と５年ぶりに再会する話。（全１０話）</p></div> </li> <li><i class="fas fa-gem image img_5"></i> <div><h3><a href="">title4</a><span>田中</span></h3> <p>バーで知り合った田中と一夜限りの関係を築く話。（全５話）</p></div> </li> </ul> </main>

image

小説ページで使用している画像です。パブリックドメインの画像なのでこちらからお持ち帰りください。※一部加工しました。