Cool01

2020/03/06 2020/03/06
DEMO DOWNLOAD

2カラムのモノトーンでクールな印象のテンプレートです。
web漫画サイトを想定して構成していますが、イラストや小説のサイトなど、汎用的に使えると思います。

topページに連載漫画のバナーを掲示して、そこから各々の漫画ページに飛ぶ仕様になっていますが、必要に応じて修正していただければと思います。
漫画ページにもバナーやら扉絵やら入れていますが、お好きに改変してください。

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

個人的に、漫画ページのスマホ表示での目次が気に入っています!やってみたかった表示の仕方が実現できてうれしい。

ファイル構成

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

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

ファイル名 内容
img 画像フォルダ
css
reset.css style.css

reset.cssは編集不要。
style.cssでデザインをすべて行っています。
デザインを編集したい場合はこのファイルを編集してください。
comic01
top.html 1.html
漫画用のフォルダ。連載ごとにフォルダを分けて、任意のフォルダ名をつけて管理してください。
top.html:連載のトップページ
1.html:漫画掲載用のページ。とりあえず1ページだけ作成しているので、どんどん増やしてください。
index.html 最初の画面
sample.html 見出しなどのサンプルを載せています。

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

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

ヘッダー、メニュー、フッターの編集は、すべてのHTMLファイルで同じ編集が必要です。