Novelpage02
hiro
送信中です
×
+44
Outline
小説の個別ページ用テンプレート。
縦書きタイトルの下に、写真を敷いたデザインです。
メインタイトルの横に、キャプションやサブタイトルを添えられます。（削除も可能です）
HTMLの方で画像を指定しているので、作品ごとに画像を変えてお使いください。
向日葵の写真や文章はサンプルですが、画像は同梱しているので、そのままご使用いただけます。
ご利用の際の注意点
- 画像は800×600px以上、比率4:3の画像がおすすめです。比率が違うと、画像の位置の修正が必要になります。
- 暗い色の画像を使う場合は、style.cssの.novelvisual__img{opacity:0.6}を1にして、フォントの色を白にする方がきれいです。
- キャプションは文字数によって良い位置が違うと思うので、.captionのtop、leftの値を変えて調節してください。
- リニューアル後のテンプレートであれば、セットテンプレート内に入れこむことが可能です。（リニューアル前でもできるものも一部あります。）
HTML
セットテンプレートnovelpage.htmlの<main>～</main>の中身を、このテンプレートindex.htmlの<div class=”novelpage__inner”>～</div>に入れ替える
CSS
セットテンプレートeach.cssの最下部に、このテンプレートstyle.cssの小説のページ＞ページレイアウト部分の記載を張り付ける
これでだいたいうまくいくと思います。
Thanks
| フォント | Google Font |
| アイコン | LINE AWESOME |
※敬称略
Update
| 2023.06.11 | 公開・配布 |
File
| img | 画像フォルダ。使用している画像はすべてここに入っています。 |
| css reset.css style.css | reset.cssは編集不要。 style.cssでデザインを行っています。 デザインを編集したい場合はこのファイルを編集してください。 |
| js common.js | サイト内で使用しているJavaScriptを記載しています。JavaScriptを追記する場合はこちらに追記可能です。 |
| story.html | 小説の個別ページ |
※コメントは最大500文字、5回まで送信できます