Simple05

2022/11/02 2022/11/02
DEMO DOWNLOAD

小説、イラスト、漫画を展示する用の、シンプルなテンプレートです。
小説やイラストごとの展示ではなく、作品やカテゴリーごとに小説・イラスト・漫画をまとめる設計で、というリクエストをもとに作成しました。
作品の内容を邪魔しないよう、装飾も少なめに極力シンプルなデザインになっています。

ギャラリーの表示には画像表示には、do様の「fuwaimg」というプログラムを使用させていただいています。使用方法は配布元の説明をご参照ください。

レスポンシブデザインになっていますので、ブラウザの横幅が小さくなると、スマホ用の表示に切り替わります。
単純に、ブラウザの横幅を狭めても確認はできますが、GoogleChromeをお使いの方は、ブラウザ上右クリック→検証→上部のスマホ・タブレットのアイコン（Toggle device toolber）をクリックすると、モバイル用のレイアウトを確認できます。

ファイル構成

downloadボタンをクリックすると、zipファイルがダウンロードされます。

zipファイル内は、下記のファイルで構成されています。

ファイル名 内容
image 画像フォルダ。DL時画像は入っていません。
css
reset.css
common.css
each.css
reset.cssは編集不要。
common.css、each.cssでデザインを行っています。
デザインを編集したい場合はこのファイルを編集してください。
すべてのページに共通するパーツについてはcommon.css、個別のページについてのデザインはeach.cssで行っています。
js
common.js
サイト内で使用しているJavaScriptを記載しています。JavaScriptを追記する場合はこちらに追記可能です。
index.html トップページ。
info.html インフォメーション。サイトについてや注意書きのページ。
character.html キャラクター紹介のページ。
novel.html メインコンテンツの小説の一覧ページ。
novel2.html 長編小説の各話のタイトル一覧ページ
novelpage.html 小説の個別ページ。
illust.html メインコンテンツのギャラリーのページ。
comic.html メインコンテンツの漫画の一覧ページ。
comic2.html 漫画の各話の表紙。あらすじや各話のタイトル一覧ページ
comicpage.html 漫画の個別ページ。
sample.html 見出しなどのサンプルを載せています。

以下の部分を編集してください。

  1. <head></head>の中 <title>サイト名～<title>の部分
  2. <body></body>の中 <!-- サイト名 --> <!-- メニュー --> <!-- メインコンテンツ --> <!-- クレジット-->の記載の下に、
    それぞれの内容が記載されてありますので、必要に応じて編集してください。
  3. <footer></footer>の中サイト名等の部分

サイト名、メニュー、クレジットの編集は、すべてのページで同様の編集が必要です。