Sea

2018/12/16 2020/08/20
DEMO DOWNLOAD

海の写真を大胆に背景に使った、2カラムのテンプレートです。
見出し、メニューを半透明にして、手書き風のフォントを使うことで、
マスキングテープに書いたようなイメージにしてみました。

創作系の個人サイトを想定して作成していますが、その他の目的でもお使いいただけます。
お好きにカスタマイズしてお使いください。

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

ファイル構成

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

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

ファイル名 内容
imgフォルダ 画像フォルダ。使用している画像はすべてここに入っています。
cssフォルダ
reset.css style.css

reset.cssは編集不要。
style.cssでデザインをすべて行っています。
デザインを編集したい場合はこのファイルを編集してください。
index.html 最初の画面。サイトの入り口にしています。
top.html トップページ。
main.html メインコンテンツのページ。
小説やイラストの展示のページとして作成していますが、別の用途でご使用の場合はご自由に変更ください。
story.html メインコンテンツの小説のページ。
illust.html メインコンテンツのイラストのページ。
sample.html 見出しなどのサンプルを載せています。
link.html リンク集のページ。

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

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

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