@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{ margin-left: 10%; 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: 1em 0 3em; padding: 0.5em; line-height: 1.2; } h2,h3,h4,h5,h6{ margin: 5.5em 0 2em; padding: 0; line-height: 1.2; } span.dash{ letter-spacing: -0.1em; margin-right: 0.1em; } hr{ visibility: hidden; } .note,.notice,.afterword{ margin: 1.5em 0; clear: both; } .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: #efe5cb; /* 全体背景色 */ background-image: none; /* 全体背景画像 */ background-repeat: repeat; background-position: 0 0; background-attachment: fixed; } body { width: 70%; /* 横幅(IE6用) */ max-width: 48em; /* 最大横幅 */ margin-left: -1px; margin-right: auto; color: #45350a; /* 文字色 */ background-color: #fcf6e7; /* テキスト表示部背景色 */ background-image: none; /* テキスト表示部背景画像 */ background-repeat: repeat; background-position: 0 0; background-attachment: scroll; border: solid #b1a380; border-width: 5px 1px; /* テキスト表示部ボーダー */ } p { /* text-indent: 1em; */ /* margin-bottom: 0.5em; */ } hr,div.break{ margin: 2em 0; color: #777; }/*場面展開用スペースと文字色*/ .notice{ margin-bottom: 8em; } /* 前書きの下部スペース */ .afterword{ margin-top: 10em; color: #666; } /* 後書きの上部スペースと文字色 */ h1,h2,h3,h4,h5,h6{ color: #615027; }/* 見出しの文字色 */ h1,ul.nav{ border: solid #b1a380; }/* 見出しとナビのボーダー */ a:link{ color: #3f82c6; } /*未訪問リンク文字色 */ a:visited{ color: #856b8b; } /*既訪問リンク文字色 */ a:hover,a:focus{ color: #fc0600; }/*ホバー・ホーカス時リンク文字色*/ /* ============================ */ body{ margin-top: 2em; margin-bottom: 2em; padding: 1em 3%; line-height: 1.75; } html>body{ width: auto; } h1,h2,h3,h4,h5,h6{ font-family: "Meiryo",'メイリオ',Osaka,Verdana,Sans-serif; } h1{ font-size: 150%; margin-left: 20%; padding: 0 1em; border-width: 0 0 2px; text-align: right; } h1:first-letter{ font-size: 180%; } h2{ font-size: 130%; margin-right: 10%; } h2:first-letter{ font-size: 150%; } h3{ font-size: 110%; } div.break{ text-align: center; } ul.nav{ margin-right: 20%; padding: 1em 1em 0; border-width: 2px 0 0; } ul.nav li{ display: inline; margin: 0 1em; } kbd{ color: #888; } kbd:before{ content: "["; } kbd:after{ content: "]"; } .afterword{ margin-left: 25%; font-size: small; } 小説ページ用テンプレート < 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 > 小説用テンプレート