@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; 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: #000; /* 全体背景色 */ background-image: none; /* 全体背景画像 */ background-repeat: repeat; background-position: 0 0; background-attachment: fixed; } body { width: 75%; /* 横幅(IE6用) */ max-width: 40em; /* 最大横幅 */ margin-left: auto; margin-right: auto; color: #CCC; /* 文字色 */ background-color: #333; /* テキスト表示部背景色 */ background-image: none; /* テキスト表示部背景画像 */ background-repeat: repeat; background-position: 0 0; background-attachment: scroll; border-left: 1px solid #444; border-right: 1px solid #444; } p { /* text-indent: 1em; */ /* margin-bottom: 0.5em; */ } hr,div.break{ margin: 2em 0; color: #ff12fc; }/*場面展開用スペースと文字色*/ .notice{ margin-bottom: 8em; } /* 前書きの下部スペース */ .afterword{ margin-top: 10em; color: #999; } /* 後書きの上部スペースと文字色 */ h1{ color: #ff12fc; } /* 見出しの文字色 */ h2,h3{ color: #FFF; } /* 見出しの文字色 */ h2:first-letter { color: #ff12fc; } a:link{ color: #3f82c6; } /*未訪問リンク文字色 */ a:visited{ color: #856b8b; } /*既訪問リンク文字色 */ a:hover,a:focus{ color: #fc0600; }/*ホバー・ホーカス時リンク文字色*/ /* ============================ */ body{ padding: 0.2em 3% 1em; line-height: 1.75; } html>body{ width: auto; } h1, ul.nav{ margin-left: -1%; margin-right: -1%; box-shadow: 0 0 3px rgba(50,50,50,0.6); } h1,h2,h3,h4,h5,h6{ font-family: Meiryo,'メイリオ',Osaka,Sans-serif; } h1{ margin: 0.2em 0; font-size: 700%; line-height: 0.8; text-align: center; } h2,h3,h4,h5,h6{ letter-spacing: 0.5em; padding-top: 0.8em } h2{ font-size: 130%; } h5,h6{ padding-left: 4em; } div.break{ text-align: center; } ul.nav{ text-align: right; } ul.nav li{ display: inline-block; width: 6em; text-align:center; border: 5px solid #777; background: #FFF; margin-bottom: 0.3em; padding: 2.4em 0.2em; vertical-align: middle; -webkit-border-radius: 2.5em; -moz-border-radius: 2.5em; border-radius: 2.5em; } kbd{ padding: 1px; background: #000; color: #EEE; } .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 > 小説用テンプレート