@charset 'Shift_JIS'; *{ font-size: 100.1%; } html,body,p,ul,ol,li,dl,dt,dd{ margin: 0; padding: 0; } ul,ol,dl,form{ margin-top: 1em; margin-bottom: 1em; line-height: 1.5; } li,dd{ margin-left: 2em; } dt{ margin-bottom: 0.15em; } dd+dt{ margin-top: 0.5em; } small{ font-size: smaller; } big{ font-size: larger; } em,strong,dfn,caption{ font-style: normal; font-weight: bold; } em,strong{ letter-spacing: 0.8em; margin-left: 0.8em; } strong{ font-size: 130%; } q,cite,blockquote{ color: #2C7F43; } q,blockquote{ font-family: "MS P明朝", Serif; } cite{ font-style: normal; } blockquote{ padding: 0 0 0 10%; marign-left: 0; margin-right: 0; } abbr{ cursor: help; } code{ color: #816122; } var{ font-style: italic; font-family: Georgia, "MS P明朝", Serif; } code,kbd{ font-family: 'Courier New', Courier, monospace; } kbd,var{ margin-right: 0.2em; } table{ border-collapse: collapse; background: #FFF; color: #000; } th,td{ padding: 0.2em 1em; border:1px solid #999; vertical-align:top; text-align: left; } th{ background-color: #EEE; } a img{ border: none; } br{ letter-spacing: normal; } a:link,a:visited{ text-decoration: underline; } a:hover,a:focus{ text-decoration: none; } img,input,textarea{ vertical-align: text-bottom; } input[type="button"],input[type="submit"]{ cursor: pointer; } body>ins,div>ins,body>del,div>del{ display: block; } h1{ margin: .5em 0 2em; padding: 0; line-height: 1.2; } h2,h3,h4,h5,h6{ margin: 5.5em 0 2em; padding: 0; line-height: 1.2; } h1+h2,h2+h3,h3+h4{ margin-top: .5em; } span.dash{ letter-spacing: -0.1em; margin-right: 0.1em; } hr{ visibility: hidden; } .note,.notice,.afterword{ margin: 1.5em 0; } .notice p,.note p,.afterword p,form p{ margin: 0; text-indent: 0; line-height:1.45; } .note{ margin-left: 15%; font-size: small; text-align: right; } .note>li,.note>dt,.note>dd{ display: inline; margin-left: 0.5em; } .note>li+li,.note>dd+dt{ border-left: 1px dotted #888; padding-left: 0.5em; } .note>dt:after{ content: "\ff1a"; }/* content: ":" */ .notice{ border: 3px solid red; padding: 0.8em; } .notice:before{ content: "\4e\6f\74\69\63\65\3a"; /* content: "Notice:" */ display: block; margin: -0.5em 0 0.8em; border-bottom: 1px dotted red; color: red; font-weight: bold; font-size: 110%; } .afterword form{ text-align: center; } ul.nav{ margin: 4em 0 2em; clear: both; } p.mark{ text-indent: 0; } /* ★任意カスタマイズ事項======================= */ html { background-color: #FAFAFA; /* 全体背景色 */ background-image: none; /* 全体背景画像 */ background-repeat: repeat; background-position: 0 0; background-attachment: fixed; } body { width: 80%; /* 横幅 */ max-width: 48em; /* 最大横幅 */ color: #222; /* 文字色 */ background-color: #FAFAFA; /* テキスト表示部背景色 */ background-image: none; /* テキスト表示部背景画像 */ background-repeat: repeat; background-position: 0 0; background-attachment: scroll; } p { /* text-indent: 1em; */ /* margin-bottom: 0.5em; */ } hr,div.break{ margin: 2em 0; color: #777; }/*場面展開用スペースと文字色*/ .notice{ margin-bottom: 8em; } /* 前書きの下部スペース */ .afterword{ margin-top: 10em; background: #EEE; color: #888; } /* 後書きの上部スペースと背景・文字色 */ h1,h2,h3,h4,h5,h6{ color: #000; } /* 見出しの文字色 */ ul.nav{ border-right: 5px solid #000; } /* ナビ右ボーダー */ a:link{ color: #1E38FF; } /*未訪問リンク文字色 */ a:visited{ color: #77697A; } /*既訪問リンク文字色 */ a:hover,a:focus{ color: #FC0600; }/*ホバー・ホーカス時リンク文字色*/ /* ============================ */ body{ margin: .5em auto 2em 0; padding: 2em 15px 1em 80px; line-height: 1.75; } h1,h2,h3,h4,h5,h6, .notice, .note{ font-family: Georgia,"Hiragino Mincho Pro","MS P明朝", Serif; } h1,h2{ display: inline-block; letter-spacing: -.15em; padding: .2em 20px; } h1{ margin-left: -80px; margin-right: 10px; font-size: 120%; background: #000; color: #FFF; } p+h1{ margin-top: .8em; } h2{ font-size: 120%; border-left: 1px solid #000;} h3{ font-size: 120%; border-left: 1px dotted #000; padding-left: 20px; } h4{ margin-right: 4em; margin-left:2em; } h5,h6{ margin-right: 6em; margin-left: 3em; } ul,ol,dl{ overflow: auto; } div.break{ text-align: center; } ul.nav{ padding-right: 1em; text-align: right; } ul.nav li{ display: inline; } ul.nav a{ padding: 0 .3em; } kbd{ margin: 0; padding: 0 0.2em; background: #222; color: #EEE; } .afterword{ padding: .2em 1.5em; font-size: small; } .afterword h2,.afterword h3{ margin: 1em 0; } 小説ページ用テンプレート < alevirita

小説ページ用テンプレート

このページはaleviritaで配布しているテンプレートのサンプルページです。

HTML要素の基本的スタイルと、小説展示ページで使いそうな、前書きブロック、後書きブロック、ナビゲーションや補足要素用の装飾をつけられるデザインです。

共通HTMLは一応サンプルとしてついてますが、全体のレイアウトの再現のために必要なものでははなく、どんなHTMLでもCSSを読み込めばフレームワークとして汎用的に使えます。

作品展示サンプル

ダウンロード

2019-05-11
共通HTMLをHTML5に変更
2012-07-03
IEでダウンロードできなかったので共通HTMLをzipダウンロードに変更
2012-03-16
ダウンロードできる共通HTMLが草案時のものでした。正しいHTMLに修正しました。

ダウンロード版共通HTML使い方

  1. ダウンロードしたHTMLファイルを任意のエディタで開いて、★で囲われている部分に指定のURLなり文字列を挿入します。もし不要の部分があれば<!-- ▽説明-->から<!-- △説明-->までを消してください
  2. ★スタイルシートURL★を適宜書き換えます
Path
alevirita > original > 小説用テンプレート