Starbracelet

2020/04/22 2020/04/22
DEMO DOWNLOAD

ご依頼からの制作第一弾です。

星か星空をモチーフに、淡い色でとのことだったので、「朝の星空をイメージしたブレスレット」をテーマにしてみました。
やわらかく可愛らしさもありつつ、シンプルできれいめなデザインになったかなと思います。
背景色を青から白のグラデーションにしていますが、黒っぽい色にすると夜空ぽくなってそれも良さそうです。
style.cssのbodyの背景色を変えてみてください（linear-gradient～の部分をお好きな色に）。

小説サイト向けのテンプレートになっていますが、お好きにカスタマイズしてお使いください。
名前変換とメールのお返事ページがついています。
（名前変換とメールフォームはサンプルです。動作はしません）

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

ファイル構成

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

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

ファイル名 内容
img 画像フォルダ。使用している画像はすべてここに入っています。
css
reset.css style.css
reset.cssは編集不要。
style.cssでデザインをすべて行っています。
デザインを編集したい場合はこのファイルを編集してください。
index.html トップページ。
novel.html 小説の目次ページとして作成していますが、別の用途でご使用の場合はご自由に変更ください。
novel1.html 小説の個別ページ。
sample.html 見出しなどのサンプルを載せています。
link.html リンク集のページ。
mail.html メールフォームのページ。
re.html メールのお返事を載せる用のページ。

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

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

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