概要 outline
桜がテーマの美しく透明感のあるデザインのテンプレートです。
小説サイトを想定しています。
スクロールした時に、上部に固定された桜の写真に文字が溶け込むように流れるのがポイント。
ただし、桜の写真とその横の部分（ページトップから228px分）はリンクなどに反応しないので、少し操作性が悪いです。
サイト内リンクの少ない、読ませるサイト向け。
特定の連載小説のページのためのリクエストから作成したもので、小説の背景を黒から白へ変更できるようにとのことだったので、小説ページのみ背景を黒設定にしています。
style.cssの該当部分を編集することで白背景へ変更可能です。
レスポンシブデザインになっていますので、ブラウザの横幅が小さくなると、スマホ用の表示に切り替わります。
単純に、ブラウザの横幅を狭めても確認はできますが、
GoogleChromeをお使いの方は、ブラウザ上右クリック→検証→上部のスマホ・タブレットのアイコン（Toggle device toolber）をクリックすると、モバイル用のレイアウトを確認できます。
ファイル構成
zipファイル内は、下記のファイルで構成されています。
| ファイル名 | 内容 |
|---|---|
| img | 画像フォルダ。使用している画像はすべてここに入っています。 |
| css reset.css style.css |
reset.cssは編集不要。 style.cssでデザインをすべて行っています。 デザインを編集したい場合はこのファイルを編集してください。 |
| js common.js |
サイト内で使用しているJavaScriptを記載しています。JavaScriptを追記する場合はこちらに追記可能です。 |
| index.html | トップページ。 |
| novel.html | メインコンテンツの小説の一覧ページ。 |
| story.html | 小説の個別ページ。 |
| sample.html | 見出しなどのサンプルを載せています。 |
以下の部分を編集してください。
- <head></head>の中 <title>サイト名～<title>の部分
- <body></body>の中
<!-- メニュー -->
<!-- コンテンツ -->
<!-- フッター -->の記載の下に、
それぞれの内容が記載されてありますので、必要に応じて編集してください。 - <footer></footer>の中サイト名等の部分
メニュー、フッターの編集は、すべてのHTMLファイルで同じ編集が必要です。